在小程序中的使用

使用文档
https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

1.在小程序根目录下放入ec-canvas 文件夹，下载链接https://github.com/ecomfe/echarts-for-weixin

2.引入ec-canvas组件。在需要使用该组件的页面的json文件中添加

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"    //该路径为ec-canvas存放的相对路径
  }
}

3.在wxml文件当中应用,ec 是当前页面js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。

4.js页面中开始定义ec对象

import * as echarts from '../../ec-canvas/echarts'   //引入ec-canvas下的echarts.js文件

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

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

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

option中添加的参数值则为当前图标所需的配置项。参考https://www.echartsjs.com/zh/option.html#title
也可直接在官方实例中复制实例中的option内容，在上面 的基础上逐一进行修改为自己项目所需的样式。https://www.echartsjs.com/examples/zh/index.html