先程のエントリの3次元版
↓こう書くと、↑こう表示 & いろいろ操作できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ECharts sample</title> <!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> </head> <body> <div id="main_graph" style="width: 100%;height:700px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main_graph')); var data_a =[[1,26,37,27,1.163,27,13, "優"], [2,85,62,71,1.195,60,8, "良"], [3,78,38,74,1.363,37,7, "良"], [4,21,21,36,0.634,40,9, "優"], [5,41,42,46,0.915,81,13, "優"], [6,56,52,69,1.067,92,16, "良"], [7,64,30,28,0.924,51,2, "良"], [8,55,48,74,1.236,75,26, "良"], [9,76,85,113,1.237,114,27, "良"], [10,91,81,104,1.041,56,40, "良"]]; var data_b =[[1,91,45,125,0.82,34,23, "良"], [2,65,27,78,0.86,45,29, "良"], [3,83,60,84,1.09,73,27, "良"], [4,109,81,121,1.28,68,51, "不可"], [5,106,77,114,1.07,55,51, "不可"], [6,109,81,121,1.28,68,51, "不可"], [7,106,77,114,1.07,55,51, "不可"], [8,89,65,78,0.86,51,26, "良"], [9,53,33,47,0.64,50,17, "良"], [10,80,55,80,1.01,75,24, "良"]]; // 上記dataの定義 var schema =[{index: 0, name: 'date', text: '日'}, {index: 1, name: 'AQIindex', text: 'AQI指数'}, //空気質指数 {index: 2, name: 'PM25', text: 'PM2.5'}, {index: 3, name: 'PM10', text: 'PM10'}, {index: 4, name: 'CO', text: '一酸化炭素(CO)' }, {index: 5, name: 'NO2', text: '二酸化窒素(NO2)'}, {index: 6, name: 'SO2', text: '二酸化硫黄(SO2)'}]; // data表示のstyle (ドットの影) var itemStyle = { // normal: { // opacity: 0.8, shadowBlur: 10, // shadowOffsetX: 0,shadowOffsetY: 0, // shadowColor: 'rgba(0, 0, 0, 0.5)' // } }; option = { title: {text: 'EChartsの練習 3D版', link: 'http://www.google.co.jp', target: 'blank', // blank or self x:'center', y:'5px', textStyle: { color: '#fff', fontSize: 16 }}, backgroundColor: '#404a59', color: ['#dd4444', '#fec42c'], legend: { // 凡例 data:['本州', '九州'], textStyle: {color: '#fff', fontSize: 16}, orient : 'horizontal', // horizontal or vertical x:'center', y:'30px', // 表示位置 }, toolbox: { iconStyle : {borderColor: '#fff' }, feature: {dataView : {title: 'データの表示', lang: ['データの表示','閉じる','更新'], readOnly: false}, restore : {title: '更新'}, saveAsImage : {title: '画像保存'}}, x: 300 // 表示位置 }, tooltip: { // カーソルを重ねた際の情報 padding: 10, backgroundColor: '#222', borderColor: '#777', borderWidth: 1, formatter: function (obj) { var value = obj.value; return '<div style="border-bottom: 1px solid rgba(255,255,255,.3);">' + obj.seriesName + ' ' + value[0] + '日:'+ value[7] + '</div>' + schema[1].text + ':' + value[1] + '<br>' + schema[2].text + ':' + value[2] + '<br>'; } }, xAxis3D: { // 軸の目盛設定 type : 'value', // value or category name: '日', nameGap: 16, nameTextStyle: {}, max: 31, splitLine: { show: true }, axisLine: { lineStyle: {color: '#eee'}} }, yAxis3D: { type: 'value', name: 'AQI指数', nameLocation: 'end', nameGap: 20, nameTextStyle: {}, splitLine: {show: true}, axisLine: { lineStyle: {color: '#eee'}}, }, zAxis3D: { type: 'value', name: 'PM2.5', nameLocation: 'end', nameGap: 20, nameTextStyle: {}, splitLine: {show: true}, axisLine: { lineStyle: {color: '#eee'}}, }, grid3D: { axisLine: { lineStyle: { color: '#fff' } }, axisPointer: { lineStyle: { color: '#ffbd67' } }, viewControl: { // autoRotate: true // projection: 'orthographic' } }, series: [{name: '本州', type: 'scatter3D', itemStyle: itemStyle, data: data_a }, {name: '九州', type: 'scatter3D', itemStyle: itemStyle, data: data_b } ], visualMap: [ {dimension: 2, // 表示するdataの種類 left: 'right', top: '10%', min: 0, max: 250, itemWidth: 30, itemHeight: 120, calculable: false, // calculable: true, precision: 0.1, text: ['PM2.5'], textStyle: { color: '#fff'}, inRange: {symbolSize: [10, 70] }, controller: { inRange: { color: ['#c23531']} } }, ], }; myChart.setOption(option); </script> </body> </html>