Apache EChartsのグラフをスイッチで切り替えられるようにする ~1日10行コーディング~

概要

1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる...)

実装するもの

とあるソシャゲのイベント走った記録とかができるサービスを作りたい。

ただ、今日その中のグラフのタイプを切り替えられるようにする部分を作る。

手順

1. jqueryを使えるようにする
   ラジオボタンの切り替えを検知したりするので素のJSだと大変なのでjqueryを使います。
   jqueryのcdnを埋め込む

   <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
   

2. ラジオボタンを配置
   グラフ切り替え用のラジオボタンを配置

   <input type="radio" name="graf_type" value="線グラフ" checked/>線グラフ
   <input type="radio" name="graf_type" value="棒グラフ"/>棒グラフ
   

3. 切り替えを検知してグラフタイプを切り替える
   スクリプトを記載(function以下が今回の実装)

   // Initialize the echarts instance based on the prepared dom
   var myChart = echarts.init(document.getElementById('main'));
   
   // Specify the configuration items and data for the chart
   var option = {
       title: {
       text: 'ECharts Getting Started Example'
       },
       tooltip: {
       trigger: 'item'
       },
       legend: {
       data: ['sales']
       },
       xAxis: {
       data: ['1/11', '1/12', '1/13', '1/14', '1/15', '1/16']
       },
       yAxis: {},
       series: [
       {
           name: 'sales',
           type: 'line',
           data: [1000, 2000, 3000, 3000, 5000, 6000]
       }
       ]
   };
   
   // Display the chart using the configuration items and data just specified.
   myChart.setOption(option);
   
   $(function () {
       // ラジオボタンを選択変更したら実行
       $('input[name="graf_type"]').change(function () {
           console.log("sss");
           // value値取得
           var val = $(this).val();
           if(val == "棒グラフ"){
               option['series'] = [
                   {
                   name: 'sales',
                   type: 'bar',
                   data: [1000, 2000, 3000, 3000, 5000, 6000]
                   }
               ];
               myChart.setOption(option);
           }else{
               option['series'] = [
                   {
                   name: 'sales',
                   type: 'line',
                   data: [1000, 2000, 3000, 3000, 5000, 6000]
                   }
               ];
               myChart.setOption(option);
           }
       });
   });
   

   ラジオボタンの切り替えを検知して、optionの値を書き換えて登録してsetOptionを流せばおｋ
   でもちょっと気に入らないので一部書き換え

   $(function () {
       // ラジオボタンを選択変更したら実行
       $('input[name="graf_type"]').change(function () {
           // value値取得
           var val = $(this).val();
           if(val == "棒グラフ"){
               option['series'][0]['type'] = 'bar';
               myChart.setOption(option);
           }else{
               option['series'][0]['type'] = 'line';
               myChart.setOption(option);
           }
       });
   });