微信小程序引入echars圖表組件

官網(wǎng)資源地址

https://github.com/ecomfe/echarts-for-weixin

引入圖表組件到微信小程序

1. 下載解壓git項(xiàng)目，查看目錄，將文件夾ec-canvas，復(fù)制到小程序內(nèi)pages同級(jí)目錄

2. 將解壓項(xiàng)目文件中pages的圖表展示，復(fù)制任一風(fēng)格圖表到要添加的微信小程序pages內(nèi)，并在app.json內(nèi)注冊(cè)這個(gè)路徑

   
   
   注冊(cè)頁面路徑
   
   
   圖表文件列表

• 具體代碼段

import * as echarts from '../../ec-canvas/echarts';
let chart = null;

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

  var option = {  /*具體使用什么風(fēng)格的圖表，在這里編輯數(shù)據(jù)*/  };

  chart.setOption(option);
  return chart;
};

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 獲取 chart 實(shí)例的方式
      // console.log(chart)
    }, 2000);
  }
});

3. 一些注意事項(xiàng)：

• 在ec-canvas文件夾內(nèi)的echarts.js，不能超過500kb，否則警告，且無法渲染；
  解決辦法：
  通過https://echarts.apache.org/zh/builder.html，進(jìn)行定制化，用到什么表格，就勾選哪個(gè)，不要都用，實(shí)測(cè)后發(fā)現(xiàn)使用一個(gè)普通的柱狀圖后，echarts.js文件就已經(jīng)443kb了。

注意：
下載的文件放在 ec-canvas/echarts.js，注意一定需要重命名為 echarts.js，否則 ec-canvas.js 引入路徑會(huì)錯(cuò)誤：
ec-canvas.js內(nèi)的依賴：

import WxCanvas from './wx-canvas';
import * as echarts from './echarts';

echars在線定制-1

echars在線定制-2

• 官方建議可以嘗試微信的分包操作，但是不會(huì)，因?yàn)殚_發(fā)的都是企業(yè)身份賬號(hào)，后續(xù)考慮使用webview嵌套H5，規(guī)避圖表選擇種類的限制，一勞永逸的解決這個(gè)問題。