微信小程序 调用echarts及问题解决_微信小程序initchart会卡

首先从https://github.com/ecomfe/echarts-for-weixin这里下载ec-canvas文件夹，里面已经包含echarts.js文件，不用单独下载
将ec-canvas放到小程序目录下，建议放到根目录中（尽量将该目录放到主包中，以免再使用时候出现先加载子包，然后再调用，出现调用失败的问题）
ec-canvas主要的作用是把echarts中的一些鼠标事件转换成触摸事件、相关样式的渲染的转换，从而让web版的echarts可以在移动端上展现和使用

使用步骤：
1、页面的JSON文件中加入

  "usingComponents": {
   
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }
1
2
3
4

根据自己的项目更换相对路径

2、页面的JS文件顶部加入

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

根据自己的项目更换相对路径

3、页面的WXML文件中加入

<view style="width:100vw;height:500rpx;">
  <ec-canvas id="bottom-echarts-canvas" canvas-id="bottom-echarts-canvas" ec="{
   {
   ec}}"></ec-canvas>
</view>
1
2
3
4
5

注：外层的VIEW一定要设置高宽，Echarts在绘制时，会获取外层高宽给画布

4、定义全局变量chart1

let chart1;
1

在onLoad中获取组件的实例

chart1 = that.selectComponent("#bottom-echarts-canvas");
1

5、页面的JS的DATA中加入

    ec: {
   
      lazyLoad: true,//如果不需要进行动态获取数据进行加载，可以设置为false
    },
1
2
3
4

6、初始化统计图

   /**
   *初始化统计图，在动态获取数据后调用此方法
   */
  initEcharts: function() {
   
    var that = this;
    chart1.init((canvas, width, height
1
2
3
4
5
6