微信小程序创建echarts图表（一）

下载地址：https://github.com/ecomfe/echarts-for-weixin
在dist文件夹中引入ec-canvas文件

1.index.json 配置如下：

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

2.wxml元素
在index.wxml中建立一个元素，外层用view方便设置echarts元素的宽高。

<view class="echart-box">
    <ec-canvas ec="{{ ec }}"></ec-canvas>
</view>

给echart-box设置宽高：

.echart-box {
  width: 100%;
  height: 800rpx;
}

给ec-canvas设置宽高：

ec-canvas {
  width: 90%;
  height: 50%;
}

3.引入
在 index.js 中引入echarts.js

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

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
    }
  }
});

注：
图表信息部分和echarts官网内容一致，直接引用官网实例即可。