微信小程序使用echarts绘画动态图表_ec: { oninit: initchart },

1. 首先我们从官网下载echarts插件，路径是https://github.com/ecomfe/echarts-for-weixin，把echarts文件放到自己项目的根目录下
2. 在需要用到的页面js文件第一行引入插件import * as echarts from '../../../echarts/ec-canvas/echarts';,json文件也要引入；
3. 图表需要用到的数据部分的值，可以在page外面定义例如let dataListA=[]也可以在page data里面定义dataListA:[]。（使用第一个方法定义需要在onshow里面初始化Chart:Chart = null，第二种不用）
4. page对象外面再定义let Chart = null;
5. 前期准备的值如下；
6. 把三种x轴的数据定义在page.data里面，顺便定义图表插件标签的参数

dataDay: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '2', '28', '29', '30', '31'],
    dataWeak: ['周一', '周二', '周三', '周四', '周五', '周六', '周末'],
    dataYear: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '腊月'],
    ec: {
      // onInit: initChart,
      // 将 lazyLoad 设为 true 后，需要手动初始化图表 
      lazyLoad: true
    },
1
2
3
4
5
6
7
8

6. wxml文件里插入此标签

7. <view class="container" >
   	<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar2" ec="{{ec}}" force-use-old-canvas="true"></ec-canvas>
   </view>
   1
   2
   3

``
8. 绘画图标的js代码如下

  getData: function () {
    /**
     * 此处的操作：
     * 获取数据json
     */
    // dataListA = [18, 36, 65, 30, 78, 40, 33];
    //如果是第一次绘制
    if (!Chart) {
      this.init_echarts(); //初始化图表
    } else {
      this.setOption(Chart); //更新数据
    }
  },
  //初始化图表
  init_echarts: function () {
    this.ecComponent.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: 370,
        height: 260
      });
      // Chart.setOption(this.getOption());
      this.setOption(Chart);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  setOption: function (Chart) {
    Chart.clear(); // 清除
    Chart.setOption(this.getOption(), true); //获取新数据
  },
  getOption: function () {
    // 指定图表的配置项和数据
    console.log(Chart)
    var option = {
      color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
      legend: {
        data: ['支付宝', '微信', '银行卡'],
        top: 10,
        left: 'center',
        backgroundColor: 'none',
        z: 100,
        type: 'scroll'
      },
      grid: {
        containLabel: true,
        bottom:10,
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: xData,
        boundaryGap: false,
        axisLabel: {
          // interval:0,//代表显示所有x轴标签显示
        },
        axisLine: {
          onZero: true
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
          name: '支付宝',
          smooth: true,
          data: dataListA,
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              // color: '#FF9307' //改变区域颜色
            }
          },
          lineStyle: {
            // color:'#FF9307' //改变折线颜色
          }
        },
        {
          name: '微信',
          smooth: true,
          data: dataListB,
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              // color: '#FF9307' //改变区域颜色
            }
          },
          lineStyle: {
            // color:'#FF9307' //改变折线颜色
          }
        },
        {
          name: '银行卡',
          smooth: true,
          data: dataListC,
          type: 'line',
          symbol: "none",
          areaStyle: {
            normal: {
              // color: '#FF9307' //改变区域颜色
            }
          },
          lineStyle: {
            // color:'#FF9307' //改变折线颜色
          }
        }
      ]
    }
    return option;
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

9. 使用的时候调用this.getData();
   10.切换日期类型的时候代码如下

switchNav(e) {
    switch (e.currentTarget.dataset.index) {
      case '1': //周
        dataListA = 请求到的数据的第一条线需要的数据整理出来;
        dataListB = 请求到的数据的第二条线需要的数据整理出来;
        dataListC = 请求到的数据的第三条线需要的数据整理出来;
        xData = this.data.dataWeak;//修改x轴的数据
        this.getData();
        break;
      case '2': //天
        dataListA = 请求到的数据的第一条线需要的数据整理出来;
        dataListB = 请求到的数据的第二条线需要的数据整理出来;
        dataListC = 请求到的数据的第三条线需要的数据整理出来;
        xData = this.data.dataDay;
        this.getData();
        break;
      case '3': //月   一年的
        dataListA = 请求到的数据的第一条线需要的数据整理出来;
        dataListB = 请求到的数据的第二条线需要的数据整理出来;
        dataListC = 请求到的数据的第三条线需要的数据整理出来;
        xData = this.data.dataYear;
        this.getData();
        break;
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1、图标模糊可以调整图表大小，我是直接在init_echarts方法里把宽高写死了，
2、第二次进入没有渲染一片空白的问题，解决办法是每次进入页面初始化Chart ，见第四条
3、 第二次进入，数据混乱的问题，我还没有遇到过，网上搜的办法是setOption: function (Chart) { Chart.clear(); // 清除 Chart.setOption(this.getOption(), true); //获取新数据 },setOption方法加了一一个true属性。原因如下
原因：chart.setOption(option,notMerge,lazyUpdate);
option:图表的配置项和数据
notMerge:可选，是否不跟之前设置的option进行合并，默认为false，即合并。（这里是导致二次渲染不成功的根本）
lazyUpdate:可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。