end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

javascript製 多機能グラフライブラリ( echarts )の練習 - 3D 散布図

echarts.apache.org

先程のエントリの3次元版

f:id:end0tknr:20190708230441p:plain

↓こう書くと、↑こう表示 & いろいろ操作できます。

<!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>