微信小程序 引入echars图表组件

微信小程序引入echars图表组件

官网资源地址

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

引入图表组件到微信小程序

1. 下载解压git项目，查看目录，将文件夹ec-canvas，复制到小程序内pages同级目录

2. 将解压项目文件中pages的图表展示，复制任一风格图表到要添加的微信小程序pages内，并在app.json内注册这个路径

   
   注册页面路径
   图表文件列表

• 具体代码段

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 = {  /*具体使用什么风格的图表，在这里编辑数据*/  };

  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 实例的方式
      // console.log(chart)
    }, 2000);
  }
});

3. 一些注意事项：

• 在ec-canvas文件夹内的echarts.js，不能超过500kb，否则警告，且无法渲染；
  解决办法：
  通过https://echarts.apache.org/zh/builder.html，进行定制化，用到什么表格，就勾选哪个，不要都用，实测后发现使用一个普通的柱状图后，echarts.js文件就已经443kb了。

注意：
下载的文件放在 ec-canvas/echarts.js，注意一定需要重命名为 echarts.js，否则 ec-canvas.js 引入路径会错误：
ec-canvas.js内的依赖：

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

echars在线定制-1
echars在线定制-2

• 官方建议可以尝试微信的分包操作，但是不会，因为开发的都是企业身份账号，后续考虑使用webview嵌套H5，规避图表选择种类的限制，一劳永逸的解决这个问题。