2021.07.08(微信小程序引入echart)

1、进入github地址：https://github.com/ecomfe/echarts-for-weixin，下载到本地

2、将ec-canvas文件夹拷贝到自己的项目根目录下

3、打开需要引入echarts的页面

4、配置

  （1）在index.json中加入

 "usingComponents": {

    "ec-canvas": "../../ec-canvas/ec-canvas"

  }

   （2）index.js中

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

function initChart(canvas, width, height, dpr) {

  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

    },

}

})

   (3)index.wxml中

 <view class="container">

    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

  </view>

（4）index.wxss中

//设置container的长和宽，使图表有个初始化值

.container{

  width: 100%;

  height: 100vh;

}

ec-canvas {

  margin-top: 20rpx;

  width: 90%;

  height: 50vh;

}