end0tknr's kipple - 新web写経開発

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

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

https://echarts.apache.org/en/index.html

f:id:end0tknr:20190708141007p:plain

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ECharts sample</title>
  <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  <script 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 dataBJ = [ // 北海道用data
     [1,55,9,56,0.46,18,6,  "良"],
     [2,25,11,21,0.65,34,9, "優"],
     [3,56,7,63,0.3,14,5,   "良"],
     [4,33,7,29,0.33,16,6,  "優"],
     [5,42,24,44,0.76,40,16,    "優"],
     [6,82,58,90,1.77,68,33,    "良"],
     [7,74,49,77,1.46,48,27,    "良"],
     [8,78,55,80,1.29,59,29,    "良"],
     [9,267,216,280,4.8,108,64, "不可"],
     [10,185,127,216,2.52,61,27,"可"],
   ];
   var dataGZ = [ // 本州用data
     [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 dataSH = [ // 九州用data
     [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のcolumn定義
   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の練習',
       link: 'http://www.google.co.jp',
       target: 'blank', // blank or self
       x:'center',
       y:'5px',
       textStyle: { color: '#fff', fontSize: 16 }
     },
     backgroundColor: '#404a59',
     // data表示の色 (今回、3種の為、3色)     
     color:  ['#dd4444', '#fec42c', '#80F1BE'], 
     legend: {data: ['北海道', '本州', '九州'], // 凡例
         y: '25px',
//       y: 'top',
              textStyle: { color: '#fff', fontSize: 16 }},
     grid: { // graph本体のpadding ?
        // x: '10%', x2: 150, y: '18%', y2: '10%'
       },
     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>'
         + schema[3].text + ':' + value[3] + '<br>'
         + schema[4].text + ':' + value[4] + '<br>'
         + schema[5].text + ':' + value[5] + '<br>'
         + schema[6].text + ':' + value[6].toLocaleString() + '<br>'; }
     },
     xAxis: {
       type: 'value', // = value or category
       name: '日',
       nameLocation: 'middle',
       nameGap: 16,
       nameTextStyle: {},
       max: 31,
       splitLine: { show: true },
       axisLine:  { lineStyle: {color: '#eee'}}
     },
     yAxis: {
       type: 'value',
       name: 'AQI指数',
       nameLocation: 'middle',
       nameGap: 20,
       nameTextStyle: {},
       splitLine: {show: true},
       axisLine: { lineStyle: {color: '#eee'}},
     },
     visualMap: [
       {dimension: 2,                   //表示dataのcolumn no
   left: 'right', top: '10%',
        min: 0,        max: 250,        //表示dataの値の範囲
        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']}
         }
        },
     ],
    series: [{name: '北海道',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataBJ },
             {name: '本州',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataSH },
             {name: '九州',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataGZ } ],
     toolbox: {
       iconStyle : {borderColor: '#fff' },
       // mouse over (hover)時の色指定方法不明
       feature : {
         dataView : {title: 'データの表示', 
            lang: ['データの表示','閉じる','更新'],
            readOnly: false},
         restore :     {title: '更新'},
         saveAsImage : {title: '画像保存'}
       },
       x : 'right'  // 表示位置
     },
   };
   if (option && typeof option === "object") {
     myChart.setOption(option, true);
   }
  </script>

</body>
</html>