微信小程序填坑记一之异步加载数据渲染echarts图表

在微信小程序中，常常需要获取后台的数据，对数据进行相对应的处理之后，再结合该数据对图表进行渲染。
但是，在官方给出的ECharts的微信小程序版本的示例中，是把配置函数写在了page之外，那么我们要如何获取后台传来的数据对图表进行渲染呢？
防止有的人不了解如何在微信小程序中使用echarts，我们先从图表组件的引入开始说起：
1.下载
首先我们需要下载echarts的组件，放置到微信小程序当中，作为页面的子组件来使用。
ecomfe/echarts-for-weixin
把该文件下载下来之后，把文件中ec-canvas的文件夹拷贝到小程序项目中的组件文件夹下。

2.引入组件
下载了echarts组件之后，把需要使用echarts的js页面（index页面下）当中引入该组件：
（1）
import * as echarts from '../../../../../ec-canvas/echarts';

（2）在index.html 引入echarts组件：

<view class='content'>
          <ec-canvas id="my-canvas" canvas-id="mycharts-line" ec="{{ec}}"></ec-canvas>
</view>

注意！在ec-canvas的组件上一定要加一个view并且给view一个宽高，因为ec-vanvas的宽高是百分比的，所以一定要给外层的view一个宽高，这样才能正确的渲染出来。除此之外，需要给这个ec-canvas的组件一个id名。
这样，就能在页面中引用该组件了
3.编写图表配置

  getCwData(){
    return {
      color: ["#36de95", "#f25259", "#fbbb56", "#f7d756", "#383bc6","#57b8f5"],
      grid: {
        left: '3%',
        right: '5%'
      },
      backgroundColor: '#fff',
      series: [
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: '45%',
          data: [{name:'类型1', value: 10}, {name:'类型2', value: 100}],
         //  data: _this.data.存储数据的变量名,
          label: {
            normal: {
              textStyle: {
                color: '#000',
                fontSize: 14
              },
              padding: [0, -25],
              formatter: function (params) {
                var personnelPercent = Math.round(params.percent);
                var result = params.name + personnelPercent + "% \n\n";
                return result;
              },
              rich: {}
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 40
            }
          },
        }
      ]
    };
  }

4.在编写完图表配置之后，在页面page中的data中配置初始化，如何初始化？
在js页面的data中给该组件一个懒加载

ec: {  
       lazyLoad: true,
},

5.在js文件中的onload函数中，获取到该组件对象
this.emotionsEcharts = this.selectComponent('#my-canvas');

6.定义一个对图表进行初始化的函数

init_echarts(el, fn) {
    el.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(fn());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },

7.在获取到后台数据之后，就可以对该图表进行渲染

（前面是接口数据的处理，把图表需要的数据存到data下的变量里）
_this.init_echarts(_this.emotionsEcharts , _this.getCwData);

这样，就是一个完整的在小程序中异步加载echarts图表。

（如有任何不对的地方，请提出指正批评！！！）

微信小程序填坑记一之异步加载数据渲染echarts图表

推荐阅读更多精彩内容