微信小程序遍历Echarts图表实现多个饼图

如何在微信小程序中使用Echarts可以看我的另一个教程：点击查看

首先看一个简单的例子

1.wxml文件

<view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas></view>

2.js文件

import * as echarts from '../../common/ec-canvas/echarts';function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, {  width: width,  height: height }) canvas.setChart(chart); var option = {  series: [   {    name: '访问来源',    type: 'pie',    radius: ['60%', '70%'],    animationType: 'scale',    silent: true,    labelLine: {     normal: {      show: false     }    },    data: [     {value:10},     {value:3}    ],    color: ["#666", "#179B16"]   }  ] } chart.setOption(option); return chart;}Page({ /**  * 页面的初始数据  */ data: {  ec: {   onInit: initChart  } }})

3.json文件 (ec-canvas组件需要到官网下载，然后放到一个文件夹里面，然后在json文件中引入)

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

4.效果图

需求：假如有一个列表，每一条数据表示一个班级，然后通过图表展示出：女生人数占全班人数的比率。(如：上面效果图中的灰色部分表示全班人数，绿色部分表示女生人数)。

假如你已经懂了Echarts的基本配置，不懂的可以先看看官方文档：Echarts配置文档

基于上面例子我们进行分析一下：

从wxml文件可以看出ec-canvas组件定义了两个属性canvas-id和ec ，这种自定义属性一般用来传参，也就是传一些参数给ec-canvas组件内部。canvas-id我们暂时先不管，看一下ec ，在js文件中data里面定义了ec ，

ec它是一个对象，并且有个属性onInit 它的值是initChart函数(不是执行之后的喔)，通过ec属性将initChart函数传入了ec-canvas组件内部，这时我们可以知道，initChart函数是在ec-canvas组件里面执行的。

打开ec-canvas.js文件，简单的看一下源码：

上图的两个属性，是通过组件传参的方式传进来的：

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

因为initChart函数赋值给了ec对象的onInit属性，所以我们可以搜索一下onInit ，可以发现它在init函数里面，如图：

我们先捋一捋这个逻辑，首先在引入组件的时候，通过ec属性传了个对象到ec-canvas组件内部，而这个对象有个属性onInit 值为一个函数，然后进入ec-canvas.js文件，在ready钩子函数中，判断ec对象是否存在(也就是判断用户是否传了ec进来)，