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

問題

一個折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大(折線A范圍[0-50],折線B范圍[10000-20000]……),如果用單Y軸來表示,折線的變化趨勢不明顯。

解決方案

1、最開始想到的是多Y軸方式,每個折線對應(yīng)一個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 坐標(biāo)軸類型,橫軸默認(rèn)為類目型'bottom',縱軸默認(rèn)為數(shù)值型'left',可選為:'bottom' | 'top' | 'left' | 'right'
  • offset Y 軸相對于默認(rèn)位置的偏移,在相同的 position 上有多個 Y 軸的時候有用。
  • yAxisIndex 當(dāng)不指定時默認(rèn)控制所有縱向類目,可通過數(shù)組指定多個需要控制的縱向類目坐標(biāo)軸Index,僅一個時可直接為數(shù)字。第一個Y軸yAxisIndex為0

這樣就可以將多個折線對應(yīng)多個Y軸。但當(dāng)Y軸過多時(實際使用時有6條曲線),會顯得頁面太復(fù)雜。

2、在方案1的基礎(chǔ)上不顯示Y軸,只顯示折線變化趨勢

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

每個Y軸都這樣隱藏后,Y軸不再展示,界面只展示折線的變化趨勢。但這樣無法通過Y軸得到每條折線的大概范圍,只能去選擇折線的最高點(diǎn)與最低點(diǎn)來判斷,也不夠直接。

3、每次只展示一條折線

  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 ] 圖例選擇的模式,控制是否可以通過點(diǎn)擊圖例改變系列的顯示狀態(tài)。默認(rèn)開啟圖例選擇,可以設(shè)成 false 關(guān)閉。除此之外也可以設(shè)成 'single' 或者 'multiple' 使用單選或者多選模式。

  • yAxis scale [ default: false ] 是否是脫離 0 值比例。設(shè)置成 true
    后坐標(biāo)刻度不會強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中比較有用。在設(shè)置 minmax 之后該配置項無效。

通過設(shè)置為singlescale:true后,對Y軸進(jìn)行復(fù)用,并每次只展示一條折線,這樣能夠較好的展示每個折線的變化趨勢與大致范圍,不過一次看不了多個折線的……

參考文章

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Matplotlib 入門教程 來源:Introduction to Matplotlib and basic l...
    布客飛龍閱讀 32,238評論 5 162
  • 直方圖主要用在數(shù)據(jù)圖表,作為對比數(shù)據(jù),用柱體高度的高低,形象直觀地表達(dá)出來,往往與折線圖配合使用,而折線圖便于從眾...
    理想是試閱讀 1,087評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,525評論 19 139
  • 一、實驗?zāi)康?學(xué)習(xí)使用 weka 中的常用分類器,完成數(shù)據(jù)分類任務(wù)。 二、實驗內(nèi)容 了解 weka 中 explo...
    yigoh閱讀 8,832評論 5 4
  • virtualenv virtualenv是用來創(chuàng)建一個獨(dú)立的Python虛擬環(huán)境的工具,通過virtualenv...
    JimmyAnn閱讀 813評論 0 0

友情鏈接更多精彩內(nèi)容