Echarts在微信小程序中的使用

Echarts提供了小程序版本echarts-for-weixin，封裝了成了一個名爲ec-canvas的自定義組件供咱們直接引用。html

下面會先介紹一下echarts的特性等，不須要的直接跳到在小程序中使用部分。git

特性

支持在線定製，勾選須要的圖標和組件，而非下載整個包。
v5.0.1開始支持按需引入。
提供了類型接口，方便使用了TS的項目進行類型檢查。
Echarts內含了默認主題、dark和light這三種主題色，此外還支持在主題編輯器中下載、自行編輯更多的主題色。
自定義圖表樣式：包括配置調色盤、經過itemStyle/lineStyle等精細的配置、鼠標懸浮高亮等。

小程序版本中不支持的特性：github

npm安裝方式，須要將整個/ec-canvas目錄放到諸如/components目錄下
按需引入。只支持在線定製，將定製的包替換/ec-canvas/echarts.js
chartInstance.showLoading()和chartInstance.hideLoading()不支持
主題色目前也沒有找到相關說明如何使用

概念概覽

組件

echarts上的內容被抽象爲了組件，包括座標軸、legend、series、tooltip、toolbox等。option 每一個屬性是一類組件。apache

series

表示一組數據以及它們映射成的圖。至少包含圖標類型、數據配置項以及如何映射的參數。npm

(備註：第i個x軸點要映射series中每一個item的第i個data做爲y軸數據，至關於遍歷一遍series中的item的第i個數據，橫座標對縱座標是一對多的關係)。canvas

使用

引入

可下載源碼自行編譯或者編譯後的產出物、npm安裝以及在線定製。小程序

建立圖表

提供一個具備寬高的容器節點，初始化，以後傳入option來表述圖表。api

異步數據加載和更新

獲取到數據後，經過setOption填入數據和配置項。數組

多提一下關於數據的處理，echarts提供了在series中分別傳入每一個系列的數據，以及在dataset屬性中統一管理數據兩種方式。推薦後者，a.將數據和其餘配置項分開管理，提升維護性; b.此外也可用於複用; c. 支持二維數組和對象數組，減小數據格式轉換。markdown

默認series映射爲y軸。dataset中默認series聲明的圖被安放到列，可經過series[i].seriesLayoutBy設置series映射到行仍是列。

小程序中使用

官方文檔echarts-for-weixin，對於如何在小程序中使用echarts進行了比較詳細的描述。在此不作過於基礎的說明，只列舉在真實項目中可能會遇到的場景。

縮減包的大小

ec-canvas文件夾整個有將近1M，仍是比較大了，建議在分包中組織可視化頁面。此外，考慮在線定製須要的圖表，下載的文件替換掉ec-canvas/echarts.js。

因爲個人項目中只用到了柱狀圖和折線圖，再加上座標系、toolTip等工具，壓縮後的代碼減到了500多K。

延遲加載圖表

一般圖表數據都是經過異步請求拿到，所以會但願獲取到數據後才初始化圖表，不然一開始會有一個只有座標軸的圖，比較醜。

先來看看若是是頁面一進來就初始化圖表，官方給的例子：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
複製代碼

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});
複製代碼

須要在dataoption中提供一個具備onInit屬性的對象，該屬性值爲初始化的方法。

因爲此時沒法訪問this，因此initChart須要定義在Page以外。這樣的問題就是若是要在後面訪問chart實例，須要提供一個page以外的變量來接收，是全局存在的。若是直接封裝成一個小程序自定義組件，這個chart實例變量須要額外處理一下複用問題。

再來看一下延遲加載圖表：

Page({
    data: {
        ec: {
            lazyLoad: true
        }
    },
    onReady: function () {
        // 手動獲取到echart節點
        this.compBar = this.selectComponent('#mychart-dom-bar')
        this.loadData()
    },
    loadData: function() {
        api.getData().then(res => {
            // 更新數據等配置項
            const opts = {
              dataset: {
                dimensions: res.dimensions,
                source: res.source
              }
            }
            
            if(this.chartBar) {
                this.chartBar.setOption(opts)
            } else {
                this.initBar(opts)
            }
        })
    },
    initBar: function(options) {
        this.compBar.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            
            // 這個是給chart注入一些初始化的配置項，數據項初始化爲空數組，後面再解釋該方法
            configBar(chart)
            chart.setOption(option)
        
            this.chartBar = chart
            return chart
        })
    }
});
複製代碼

可見須要首先經過selectComponent拿到ec-canvas組件節點，而後調用init方法手動初始化。當數據有更新時，調用chartInstance.setOption進行更新。

代碼組織

圖表的配置項除了數據之外，其餘諸如座標軸，lengend，label等的樣都比較固定，能夠在一個config文件中進行管理，如上面代碼中的configBar:

// chart-config.js
export function configBar(chart) {
    const opts = {
        //...各類配置項
        dataset: {
            dimensions: [],
            source: []
        },
        series: [
            {
                type: 'bar'
            }
        ]
    }
    chart.setOption(option)
}
複製代碼

若是圖表須要複用，還能夠進一步封裝爲一個小程序自定義組件：

<view class="report-group-bar">
  <ec-canvas id="{{chartDomId}}" canvas-id="{{canvasId}}" ec="{{ec}}" type="2d"></ec-canvas>
</view>
複製代碼

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

Component({
  properties: {
    chartId: {
      type: String,
      value: 'chart-group-bar'
    },
    canvasId: {
      type: String,
      value: 'canvas-group-bar'
    },
    chartData: {
      type: Array,
      value: []
    }
  },
  data: {
    ec: {
      lazyLoad: true
    }
  },
  lifetimes: {
    attached() {
      this.chartComp = this.selectComponent(this.properties.chartId)
    }
  },

  methods: {
    initChart(options) {
      this.chartComp && this.chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        configChart(chart)
        chart.setOption(options)
        this.chart = chart
        return chart
      })
    }
  },

  observers: {
    'chartData': function (value) {
      const opts = {
        // ...
      }
      if (this.chart) {
        this.chart.setOption(opts)
      } else {
        this.initChart(opts)
      }
    }
  }
})
複製代碼

其餘

小程序基礎庫2.9.0 起支持一套新Canvas 2D 接口），使用新的 Canvas 2d 能夠提高渲染性能，解決非同層渲染問題，強烈建議開啓：

<view class="report-group-bar">
  <ec-canvas id="{{chartDomId}}" canvas-id="{{canvasId}}" ec="{{ec}}" type="2d"></ec-canvas>
</view>
複製代碼