微信小程序教程之-小程序中使用echarts

微信小程序使用echarts教程

平時經常在web系統中使用折線圖、柱狀圖、儀表盤等等等圖表展示數據，在瀏覽器頁面中我們為了方便經常使用echarts，官網教程也寫的很清楚。

但是在微信小程序中我們同樣有這種需求，那么如果直接用canvas，那么久太麻煩了，說不定一個折線圖畫一上午！，所有瞬間就會想到echarts等框架，但是echarts官網沒有小程序版，不過！！！已經有人在github發布echarts的小程序版本了。。感謝大神分享。

首先，下載echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin

下載后打開，如圖所示：

 

QQ截圖20181220174042.jpg

將下載好的文件中 ec-canvas目錄 放在小程序項目目錄中即可。如下圖所示：

 

QQ截圖20181220165743.jpg

然后在需要的地方引入即可，下面就做一個折線圖吧。

1.在頁面開啟使用echarts

如：在 page目錄的ceshi頁面中使用echarts的話，需要在ceshi.json中添加以下配置。

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }

2.引入

在 ceshi.js 中引入echarts.js

import * as echarts from '../../ec-canvas/echarts'; 

3.wxml元素

在ceshi.wxml中建立一個元素，外層用view包一下是方便設置echarts元素的寬高。

  <view class="echart_panel"> <ec-canvas></ec-canvas> </view> 

4.開始編寫圖表 折線圖

我是在ceshi.js中直接寫了一個函數，傳一些參數，返回一個option，至於echarts的option寫法，可以參考echats官網api文檔。

function getOption(xData, data_cur, data_his) { var option = { backgroundColor: "#f5f4f3", color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"], title: { text: '實時運行速度', textStyle: { fontWeight: '500', fontSize: 15, color: '#000' }, x:'center', y:'0' }, legend: { data: ['今日', '昨日'], right: 10 }, grid: { top: '15%', left: '1%', right: '3%', bottom: '60rpx', containLabel: true }, tooltip: { show: true, trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: xData||[], axisLabel: { interval: 11, formatter: function (value, index) { return value.substring(0, 2) * 1; }, textStyle: { fontsize: '10px' } } }, yAxis: { x: 'center', name: 'km/h', type: 'value', min: 0, max: 120 }, series: [{ name: '今日', zIndex:2, type: 'line', smooth: true, symbolSize: 0, data: data_cur||[] },{ name: '昨日', zIndex: 1, type: 'line', smooth: true, symbolSize: 0, data: data_his||[] }] }; return option; } 

然后就可以在 頁面page中的data中配置初始化，如何初始化？

首先 建立一個全局變量（注意，放在page外面，要全局變量，不然你在頁面加載之后，在動態修改圖表數據的話，沒法修改，這樣方便點），

然后在data中初始化echats對象 ecLine，名字隨便起，按照官方寫法即可，onInit函數中參數有三個，canvas, width, height，這些都不需要管，直接初始化echats元素。復制粘貼即可。

let chartLine; Page({ data: { ecLine: { onInit: function (canvas, width, height){ //初始化echarts元素，綁定到全局變量，方便更改數據 chartLine = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chartLine); //可以先不setOption，等數據加載好后賦值， //不過那樣沒setOption前，echats元素是一片空白，體驗不好，所有我先set。 var xData = [1,2,3,4,5......]; // x軸數據 自己寫 var option = getOption(xData); chartLine.setOption(option); } } } }) 

然后將建立的echats對象綁定到echarts元素中，如下：

<view class="echart_panel"> <ec-canvas ec="{{ ecLine }}"></ec-canvas> </view> 

 

QQ截圖20181220171735.jpg

然后就可以在數據加載后，給圖表賦值option了，或者是重新setOption的數據。

//ajax請求好數據后，調用獲取option函數，傳一些數據， //然后用全局變量echarts元素chartLine 來 setOption即可。 // 三個參數： x軸數據，第一條線數據，第二條數據。 隨意，echarts就跟正常用隨便寫就行 // 隨便寫幾個假數據 var xData=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]; var data_cur=[55,67,66,78,55,67,66,78,55,67,66,78,55,67,66,78,55,67,66,78,65,66,65,54]; var data_his=[67,66,78,65,66,65,54,67,66,78,65,66,65,54,67,66,78,65,66,65,54,67,66,78]; // 方法一： var option = getOption(xData, data_cur, data_his); chartLine.setOption(option); // 方法二： //如果上面初始化時候，已經chartLine已經setOption了， //那么建議不要重新setOption，官方推薦寫法，重新賦數據即可。 chartLine.setOption({ xAxis: { data: xData }, series: [{ data: data_cur }, { data: data_his }] }); 

效果如下：

 

QQ截圖20181220173033.jpg

示例寫的折線圖，其他類型圖表，可以參考echarts官網文檔即可。

因為從github下載的echarts.js包含類型比較多，如果上傳代碼進行發布時，提示echarts文件過大，可以忽略。

或者是自己重新下載echarts定制需要的組件，如我就需要折線圖，我就定制帶折線圖的即可。然后直接替換文件夾中的echarts.js即可。

下載定制echarts官網鏈接：http://echarts.baidu.com/builder.html

  

轉自：https://www.jianshu.com/p/a2ab21bc7e9e