微信小程序中使用echarts图表

1、下载ec-canvas，拷贝到项目中（下载地址github.com/ecomfe/echa…）

2、根据自己页面功能，在 index.json文件中引入ec-canvas

例如：

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

3、index.wxml 中，我们创建了一个  组件，内容如下：

//代码如下

<view class="container"> <el-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></el-canvas> </view>

4、index.js中

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

let chart = null;

data: {

  vertical: false, //滑动方向是否为纵向

    autoplay: false, //是否自动切换

    interval: 2000, //自动切换时间间隔

    duration: 500, //滑动动画时长

    navScrollLeft: 0,     ec: {

      // onInit: ''

      lazyLoad: true  //// 延迟加载

    },

}

initChart: function (canvas, width, height) {

    //初始化表图

    this.echartsComponnet.init((canvas, width, height) => {

      chart = echarts.init(canvas, null, {

        width: width,

        height: height

      });

      canvas.setChart(chart);

      //这里复制了官方示例配置

      this.setOption(chart);

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等

      return chart

    })

   

  },

  setOption: function (chart) {

    chart.clear(); // 清除

    chart.setOption(this.getOption(), true); //获取新数据

  },

getOption:function(){

    let that = this //图表参数配置

    var option ={ title：{}， legend：{}， series：[] }

return option

}

onReady: function () {

     this.echartsComponnet = this.selectComponent('#mychart-dom-pie'); //一定要初始化

     this.initChart(); //初始化图表

  },