ECharts折線圖多個折線每次只顯示一條

問題

一個折線圖中有多條折線。因爲折線之間數值範圍相差較大（折線A範圍[0-50]，折線B範圍[10000-20000]……），若是用單Y軸來表示，折線的變化趨勢不明顯。

解決方案

一、最開始想到的是多Y軸方式，每一個折線對應一個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，僅一個時可直接爲數字。第一個Y軸yAxisIndex爲0

這樣就能夠將多個折線對應多個Y軸。但當Y軸過多時（實際使用時有6條曲線），會顯得頁面太複雜。

二、在方案1的基礎上不顯示Y軸，只顯示折線變化趨勢

var option = {
      ……
      yAxis : [
          {
              name : "A",
              type : 'value',
              scale : false,
              show : false,
              splitLine:{  
          　　    show:false  
          　　}, 
              position : 'left',
          },
          ……
      ],
      ……
    };

• show 置爲false不展現

每一個Y軸都這樣隱藏後，Y軸再也不展現，界面只展現折線的變化趨勢。但這樣沒法經過Y軸獲得每條折線的大概範圍，只能去選擇折線的最高點與最低點來判斷，也不夠直接。

三、每次只展現一條折線

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' 使用單選或者多選模式。
• yAxis scale [ default: false ] 是不是脫離 0 值比例。設置成 true
   後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設置 min 和 max 以後該配置項無效。

經過設置爲single與scale：true後，對Y軸進行復用，並每次只展現一條折線，這樣可以較好的展現每一個折線的變化趨勢與大體範圍，不過一次看不了多個折線的……

參考文章

ECharts3.0文檔配置項
ECharts2.0文檔
echarts折線圖多條折線的時候怎麼控制每次只能限制1條