怎么用ECharts畫折線圖

這篇文章主要介紹“怎么用ECharts畫折線圖”，在日常操作中，相信很多人在怎么用ECharts畫折線圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用ECharts畫折線圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)絡空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設計、豐都網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

首先，打開ECharts官網(wǎng)，在“實例”菜單中選擇任意一個圖，如圖4-1所示。

▲圖4-1 ECharts實例

可以看到，左邊顯示的是option，也就是ECharts的具體配置，右邊是對應的可視化圖。當我們改變左邊的代碼時，右邊的可視化也會實時改變。當左邊的代碼有誤時，右邊則不會顯示可視化，如圖4-2所示。

▲圖4-2 ECharts代碼有誤時的界面

大家應該已經(jīng)發(fā)現(xiàn)了，可視化設置的大部分參數(shù)都在option中，這樣可以幫我們省去很多額外的工作，方便快速調(diào)試。當我們調(diào)試出滿意的可視化時，將option加入框架中即可。本文演示的代碼和可視化結果圖都是基于這個在線工具實現(xiàn)的。

01 基礎折線圖

在ECharts中，繪制折線圖需要將series中的type設置為line，代碼如下所示：

option = {      xAxis: {          type: 'category',          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']      },      yAxis: {          type: 'value'      },      series: [{          data: [450, 232, 301, 734, 1090, 830, 500],          type: 'line'      }]  };

其中，series中的data值序列長度需要和xAxis中的data值序列長度一致，x軸和y軸分別為類別（星期）和數(shù)值，可視化效果如圖4-3所示。

▲圖4-3 基礎折線圖

當我們在series中加入?yún)?shù)smooth: true后，可以得到較為光滑的折線（曲線）。代碼如下所示：

option = {      xAxis: {          type: 'category',          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']      },      yAxis: {          type: 'value'      },      series: [{          data: [450, 232, 301, 734, 1090, 830, 500],          type: 'line',          smooth: true      }]  };

可視化結果如圖4-4所示。

▲圖4-4 基礎折線圖（曲線）

02 多條折線圖

至此我們就學會了如何繪制單條折線圖，當然我們還會遇到繪制多條折線圖的情況，如圖4-5所示。

▲圖4-5 多條折線圖

此時我們在上面單條折線圖的代碼中做少量修改即可，具體代碼如下：

option = {      xAxis: {          type: 'category',          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']      },      yAxis: {          type: 'value'      },      legend: {          data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],          left: 'right'  },      series: [{          name:'A產(chǎn)品銷量',          data: [550, 232, 311, 764, 1090, 830, 500],          type: 'line',          smooth: true      },      {          name:'B產(chǎn)品銷量',          data: [420, 162, 121, 474, 720, 640, 230],          type: 'line',          smooth: true      },      {          name:'C產(chǎn)品銷量',          data: [850, 432, 501, 934, 1190, 930, 600],          type: 'line',          smooth: true      }]  };

通過觀察可以發(fā)現(xiàn)，series中并列了三個字典結構，分別存放A~C產(chǎn)品的數(shù)據(jù)，我們加入了legend圖例，目的是為了區(qū)分A～C產(chǎn)品的數(shù)據(jù)。需要注意的是，A～C產(chǎn)品數(shù)據(jù)的name字段內(nèi)容需要和legend中的內(nèi)容一一對應。

03 堆疊折線圖

有時候，我們需要使用堆疊折線圖來反映不同項的累加情況，此時可以通過在ECharts的series的每項數(shù)據(jù)中加入stack和areaStyle參數(shù)實現(xiàn)，可視化結果如圖4-6所示。

▲圖4-6 堆疊折線圖

具體實現(xiàn)代碼如下：

option = {      xAxis: {          type: 'category',          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']      },      yAxis: {          type: 'value'      },      legend: {          data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],          left: 'right'      },      series: [{          name:'A產(chǎn)品銷量',          data: [550, 232, 311, 764, 1090, 830, 500],          type: 'line',          smooth: true,          stack: '總量',          areaStyle: {}      },      {          name:'B產(chǎn)品銷量',          data: [420, 162, 121, 474, 720, 640, 230],          type: 'line',          smooth: true,          stack: '總量',          areaStyle: {}      },      {          name:'C產(chǎn)品銷量',          data: [850, 432, 501, 934, 1190, 930, 600],          type: 'line',          smooth: true,          stack: '總量',          areaStyle: {}      }]  };

其中，areaStyle用于對區(qū)域填充色彩，如果沒有該參數(shù)，區(qū)域?qū)⒉粫刑畛渖?，感興趣的讀者可以刪除該參數(shù)看看效果。堆疊的順序自上到下和數(shù)據(jù)的順序相反，例如代碼數(shù)據(jù)中的順序是ABC，可視化圖中自上到下的順序是CBA。

為了方便辨識堆疊總量數(shù)據(jù)信息，可以在最上層的數(shù)據(jù)中加入label參數(shù)，同時加入tooltip方便查閱數(shù)據(jù)，修改后的代碼如下：

option = {      xAxis: {          type: 'category',          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']      },      yAxis: {          type: 'value'      },      legend: {          data: ['A產(chǎn)品銷量', 'B產(chǎn)品銷量','C產(chǎn)品銷量'],          left: 'right'  },      tooltip: {          trigger: 'axis',          axisPointer: {              type: 'cross',              label: {                  backgroundColor: '#6a7985'              }          }      },      series: [{          name:'A產(chǎn)品銷量',          data: [550, 232, 311, 764, 1090, 830, 500],          type: 'line',          smooth: true,          stack: '總量',          areaStyle: {}      },      {          name:'B產(chǎn)品銷量',          data: [420, 162, 121, 474, 720, 640, 230],          type: 'line',          smooth: true,          stack: '總量',          areaStyle: {}      },      {          name:'C產(chǎn)品銷量',          data: [850, 432, 501, 934, 1190, 930, 600],          type: 'line',          smooth: true,          stack: '總量',          label: {                  normal: {                      show: true,                     position: 'top'                  }              },          areaStyle: {}      }]  };

可視化結果如圖4-7所示。

▲圖4-7 堆疊柱狀圖優(yōu)化版

到此，關于“怎么用ECharts畫折線圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁標題：怎么用ECharts畫折線圖
網(wǎng)頁路徑：http://bm7419.com/article40/gocieo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、App開發(fā)、網(wǎng)頁設計公司、品牌網(wǎng)站制作、網(wǎng)站維護、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)