在微信小程序中，常常需要获取后台的数据，对数据进行相对应的处理之后，再结合该数据对图表进行渲染。
但是，在官方给出的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图表。
（如有任何不对的地方，请提出指正批评！！！）
