如何在微信小程序中使用Echarts可以看我的另一個(gè)教程：點(diǎn)擊查看

首先看一個(gè)簡(jiǎn)單的例子

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: '訪問(wèn)來(lái)源',    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({ /**  * 頁(yè)面的初始數(shù)據(jù)  */ data: {  ec: {   onInit: initChart  } }})

3.json文件 (ec-canvas組件需要到官網(wǎng)下載，然后放到一個(gè)文件夾里面，然后在json文件中引入)

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

4.效果圖

需求：假如有一個(gè)列表，每一條數(shù)據(jù)表示一個(gè)班級(jí)，然后通過(guò)圖表展示出：女生人數(shù)占全班人數(shù)的比率。(如：上面效果圖中的灰色部分表示全班人數(shù)，綠色部分表示女生人數(shù))。

假如你已經(jīng)懂了Echarts的基本配置，不懂的可以先看看官方文檔：Echarts配置文檔

基于上面例子我們進(jìn)行分析一下：

從wxml文件可以看出ec-canvas組件定義了兩個(gè)屬性canvas-id和ec ，這種自定義屬性一般用來(lái)傳參，也就是傳一些參數(shù)給ec-canvas組件內(nèi)部。canvas-id我們暫時(shí)先不管，看一下ec ，在js文件中data里面定義了ec ，

ec它是一個(gè)對(duì)象，并且有個(gè)屬性onInit 它的值是initChart函數(shù)(不是執(zhí)行之后的喔)，通過(guò)ec屬性將initChart函數(shù)傳入了ec-canvas組件內(nèi)部，這時(shí)我們可以知道，initChart函數(shù)是在ec-canvas組件里面執(zhí)行的。

打開(kāi)ec-canvas.js文件，簡(jiǎn)單的看一下源碼：

上圖的兩個(gè)屬性，是通過(guò)組件傳參的方式傳進(jìn)來(lái)的：

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

因?yàn)閕nitChart函數(shù)賦值給了ec對(duì)象的onInit屬性，所以我們可以搜索一下onInit ，可以發(fā)現(xiàn)它在init函數(shù)里面，如圖：

我們先捋一捋這個(gè)邏輯，首先在引入組件的時(shí)候，通過(guò)ec屬性傳了個(gè)對(duì)象到ec-canvas組件內(nèi)部，而這個(gè)對(duì)象有個(gè)屬性onInit 值為一個(gè)函數(shù)，然后進(jìn)入ec-canvas.js文件，在ready鉤子函數(shù)中，判斷ec對(duì)象是否存在(也就是判斷用戶是否傳了ec進(jìn)來(lái))，