ECharts折れ線グラフ複数の折れ線は毎回1本しか表示されません

4106 ワード

に質問
1つの折れ線グラフに複数の折れ線があります.折れ線間の数値範囲の差が大きいため(折れ線A範囲[0-50]、折れ線B範囲[1000-2000]......)、単Y軸で表すと折れ線の変化傾向は明らかではない.
ソリューション
1、最初に思いついたのはマルチY軸方式で、折れ線ごとに1つのY軸に対応する
    var option = {
      ……
      yAxis : [
          {
              name : "A",
              type : 'value',
              scale : false,
              show : true,
              splitLine:{  
                show:true  
            }, 
              position : 'left',
          },
          {
              name : "B",
              type : 'value',
              scale : true,
              show : false,
              splitLine:{  
                show:false  
            },
              position : 'right',
          },
          {
              name : "C",
              type : 'value',
              scale : true,
              show : false,
              splitLine:{  
                show:false  
            },
              offset: 50,
              position : 'left'
          },
          ……
      ],
      series : [
          {
              name:'A',
              type:'line',
              yAxisIndex:0,
              data:AArr,
          },
          {
              name:'B',
              type:'line',
              yAxisIndex:1,
              data:BArr,
          },
          {
              name:'C',
              type:'line',
              yAxisIndex:2,
              data:CArr,
          },
          ……
        ]
    };
  • position座標軸タイプ、横軸デフォルトはクラス型「bottom」、縦軸デフォルトは数値型「left」、オプションは「bottom」|「top」|「left」|「right」
  • offsetデフォルト位置に対するY軸のずれは、同じposition上に複数のY軸がある場合に役立ちます.
  • yAxisIndex指定しない場合は全ての縦型クラスをデフォルトで制御し、配列で複数の制御が必要な縦型クラス座標軸Indexを指定し、1つのみの場合はそのまま数字とする.最初のY軸yAxisIndexは0
  • これにより、複数の折れ線を複数のY軸に対応させることができる.しかし、Y軸が多すぎる場合(実際に使用する場合は6本の曲線がある)、ページが複雑すぎるように見えます.
    2、方案1の基礎の上でY軸を表示しないで、折れ線の変化傾向だけを表示する
        var option = {
          ……
          yAxis : [
              {
                  name : "A",
                  type : 'value',
                  scale : false,
                  show : false,
                  splitLine:{  
                    show:false  
                }, 
                  position : 'left',
              },
              ……
          ],
          ……
        };
    
  • show置きfalse非展示
  • 各Y軸がこのように隠れていると、Y軸は表示されず、インタフェースは折れ線の変化傾向だけを示します.しかし、これではY軸ごとに折れ線のおおよその範囲を得ることができず、折れ線の最高点と最低点を選択して判断するしかなく、直接的ではない.
    3、毎回1本の折れ線しか展示していません
      var option = {
          legend: {
            x : 'center',
            borderWidth : '1',
            data:YDescrib,
            selectedMode: 'single',
          },
          calculable : true,
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data : xScale
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  scale : true,
                  show : true,
                  splitLine:{  
                    show:true  
                }, 
              },
          ],
          series : [
              {
                  name:'A',
                  type:'line',
                  data:AArr,
              },
              {
                  name:'B',
                  type:'line',
                  data:BArr,
              },
              {
                  name:'C',
                  type:'line',
                  data:CArr,
              },
              ……
          ]
      };
    
  • selectedMode[default:true]凡例選択のモードで、凡例をクリックしてシリーズの表示状態を変更できるかを制御します.デフォルトでは、凡例選択がオンになり、falseがオフに設定できます.それ以外にも「single」または「multiple」に設定してラジオまたはマルチ選択モードを使用することもできます.
  • yAxisscale[default:false]が0値の割合から外れているか.trueに設定すると、座標スケールにゼロスケールは強制的に含まれません.二重数値軸の散点図では比較的有用である.minとmaxを設定した後、この構成項目は無効です.
  • single・とscale:trueに設定することで、Y軸を多重化し、一度に1本の折れ線のみを表示することで、折れ線ごとの変化傾向や大まかな範囲をより良く示すことができるが、一度に複数の折れ線を見ることはできない…
    参考記事
    ECharts3.0ドキュメント構成項目ECharts 2.0ドキュメントecharts折れ線グラフ複数の折れ線の場合、毎回1本しか制限できないように制御する方法