微信小程序使用echarts教程
平時(shí)經(jīng)常在web系統(tǒng)中使用折線圖溉贿、柱狀圖枫吧、儀表盤等等等圖表展示數(shù)據(jù)，在瀏覽器頁面中我們?yōu)榱朔奖憬?jīng)常使用echarts宇色，官網(wǎng)教程也寫的很清楚九杂。
但是在微信小程序中我們同樣有這種需求，那么如果直接用canvas宣蠕，那么久太麻煩了例隆，說不定一個(gè)折線圖畫一上午！抢蚀，所有瞬間就會(huì)想到echarts等框架镀层，但是echarts官網(wǎng)沒有小程序版，不過Ｃ笄３辍！已經(jīng)有人在github發(fā)布echarts的小程序版本了屋休。坞古。感謝大神分享。
首先劫樟，下載echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin
下載后打開痪枫，如圖所示：
將下載好的文件中 ec-canvas目錄 放在小程序項(xiàng)目目錄中即可。如下圖所示：
然后在需要的地方引入即可叠艳，下面就做一個(gè)折線圖吧奶陈。
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中建立一個(gè)元素吃粒，外層用view包一下是方便設(shè)置echarts元素的寬高。
<view class="echart_panel">
<ec-canvas></ec-canvas>
</view>
4.開始編寫圖表 折線圖
我是在ceshi.js中直接寫了一個(gè)函數(shù)拒课，傳一些參數(shù)徐勃，返回一個(gè)option，至于echarts的option寫法捕发，可以參考echats官網(wǎng)api文檔疏旨。
function getOption(xData, data_cur, data_his) {
var option = {
backgroundColor: "#f5f4f3",
color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"],
title: {
text: '實(shí)時(shí)運(yùn)行速度',
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中配置初始化很魂，如何初始化扎酷？
首先 建立一個(gè)全局變量（注意，放在page外面遏匆，要全局變量法挨，不然你在頁面加載之后谁榜，在動(dòng)態(tài)修改圖表數(shù)據(jù)的話，沒法修改凡纳，這樣方便點(diǎn)）窃植，
然后在data中初始化echats對(duì)象 ecLine，名字隨便起荐糜，按照官方寫法即可巷怜，onInit函數(shù)中參數(shù)有三個(gè)，canvas, width, height暴氏，這些都不需要管延塑，直接初始化echats元素。復(fù)制粘貼即可答渔。
let chartLine;
Page({
data: {
ecLine: {
onInit: function (canvas, width, height){
//初始化echarts元素关带，綁定到全局變量，方便更改數(shù)據(jù)
chartLine = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chartLine);
//可以先不setOption沼撕，等數(shù)據(jù)加載好后賦值宋雏，
//不過那樣沒setOption前，echats元素是一片空白务豺，體驗(yàn)不好磨总，所有我先set。
var xData = [1,2,3,4,5......]; // x軸數(shù)據(jù) 自己寫
var option = getOption(xData);
chartLine.setOption(option);
}
}
}
})
然后將建立的echats對(duì)象綁定到echarts元素中冲呢，如下：
<view class="echart_panel">
<ec-canvas ec="{{ ecLine }}"></ec-canvas>
</view>
然后就可以在數(shù)據(jù)加載后舍败，給圖表賦值option了，或者是重新setOption的數(shù)據(jù)敬拓。
//ajax請(qǐng)求好數(shù)據(jù)后邻薯，調(diào)用獲取option函數(shù)，傳一些數(shù)據(jù)乘凸，
//然后用全局變量echarts元素chartLine 來 setOption即可厕诡。
// 三個(gè)參數(shù)： x軸數(shù)據(jù)，第一條線數(shù)據(jù)营勤，第二條數(shù)據(jù)灵嫌。 隨意，echarts就跟正常用隨便寫就行
// 隨便寫幾個(gè)假數(shù)據(jù)
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);
// 方法二：
//如果上面初始化時(shí)候葛作，已經(jīng)chartLine已經(jīng)setOption了寿羞，
//那么建議不要重新setOption，官方推薦寫法赂蠢，重新賦數(shù)據(jù)即可绪穆。
chartLine.setOption({
xAxis: {
data: xData
},
series: [{
data: data_cur
}, {
data: data_his
}]
});
效果如下：
示例寫的折線圖，其他類型圖表，可以參考echarts官網(wǎng)文檔即可玖院。
因?yàn)閺膅ithub下載的echarts.js包含類型比較多菠红，如果上傳代碼進(jìn)行發(fā)布時(shí)，提示echarts文件過大难菌，可以忽略试溯。
或者是自己重新下載echarts定制需要的組件，如我就需要折線圖郊酒，我就定制帶折線圖的即可遇绞。然后直接替換文件夾中的echarts.js即可。
下載定制echarts官網(wǎng)鏈接：http://echarts.baidu.com/builder.html
以上燎窘，結(jié)束试读。
