微信小程序使用echarts教程

平時(shí)經(jīng)常在web系統(tǒng)中使用折線圖、柱狀圖、儀表盤(pán)等等等圖表展示數(shù)據(jù)，在瀏覽器頁(yè)面中我們?yōu)榱朔奖憬?jīng)常使用echarts，官網(wǎng)教程也寫(xiě)的很清楚。

但是在微信小程序中我們同樣有這種需求，那么如果直接用canvas，那么久太麻煩了，說(shuō)不定一個(gè)折線圖畫(huà)一上午！，所有瞬間就會(huì)想到echarts等框架，但是echarts官網(wǎng)沒(méi)有小程序版，不過(guò)?。。∫呀?jīng)有人在github發(fā)布echarts的小程序版本了。。感謝大神分享。

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

下載后打開(kāi)，如圖所示：

QQ截圖20181220174042.jpg

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

QQ截圖20181220165743.jpg

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

1.在頁(yè)面開(kāi)啟使用echarts

如：在 page目錄的ceshi頁(yè)面中使用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.開(kāi)始編寫(xiě)圖表 折線圖

我是在ceshi.js中直接寫(xiě)了一個(gè)函數(shù)，傳一些參數(shù)，返回一個(gè)option，至于echarts的option寫(xiě)法，可以參考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;
}

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

首先 建立一個(gè)全局變量（注意，放在page外面，要全局變量，不然你在頁(yè)面加載之后，在動(dòng)態(tài)修改圖表數(shù)據(jù)的話，沒(méi)法修改，這樣方便點(diǎn)），

然后在data中初始化echats對(duì)象 ecLine，名字隨便起，按照官方寫(xiě)法即可，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ù)加載好后賦值，
                //不過(guò)那樣沒(méi)setOption前，echats元素是一片空白，體驗(yàn)不好，所有我先set。
                var xData = [1,2,3,4,5......];  // x軸數(shù)據(jù) 自己寫(xiě)
                var option = getOption(xData);
                chartLine.setOption(option);
            }
        }
    }
})

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

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

QQ截圖20181220171735.jpg

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

//ajax請(qǐng)求好數(shù)據(jù)后，調(diào)用獲取option函數(shù)，傳一些數(shù)據(jù)，
//然后用全局變量echarts元素chartLine 來(lái) setOption即可。
// 三個(gè)參數(shù)： x軸數(shù)據(jù)，第一條線數(shù)據(jù)，第二條數(shù)據(jù)。 隨意，echarts就跟正常用隨便寫(xiě)就行
// 隨便寫(xiě)幾個(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，官方推薦寫(xiě)法，重新賦數(shù)據(jù)即可。
chartLine.setOption({
    xAxis: {
        data: xData
    }, 
    series: [{
        data: data_cur
    }, {
        data: data_his
    }]
});

效果如下：

QQ截圖20181220173033.jpg

示例寫(xiě)的折線圖，其他類型圖表，可以參考echarts官網(wǎng)文檔即可。

因?yàn)閺膅ithub下載的echarts.js包含類型比較多，如果上傳代碼進(jìn)行發(fā)布時(shí)，提示echarts文件過(guò)大，可以忽略。

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

下載定制echarts官網(wǎng)鏈接：http://echarts.baidu.com/builder.html

以上，結(jié)束。