微信小程序结合echarts完美实现缩放折线图，圆环图，饼图

今天做了折线图和饼图，作为一个后端程序员，做前端页面是真难受，在网上找了很多资料和代码，一路磕磕碰碰总算是写出来了。下面我分享给大家，大家直接粘贴就可以了。不用想我一样痛苦了，最起码比我好受点了。

引入echarts组件

为了兼容小程序 Canvas，echarts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
首先，下载 GitHub 上的项目。点击进入github进行下载

下载之后解压文件即可

把ec-canvas文件拷贝到你的小程序项目根路径下

实战echarts组件

放到根目录之后，打开index.josn

实现缩放折线图

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

打开index.js

import * as echarts from '../../ec-canvas/echarts';//需要注意这个地方的路径不用引用错误了
const app = getApp();
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    //折线图标题
    title: {
      text: '今日心率',
      left: 'center'
    },
    // 折线图线条的颜色
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    // 折线图的线条代表意义
    legend: {
      itemWidth: 5,//小圆点的宽度
      itemGap: 25,
      selectedModel: 'single',//折线可多选
      inacti