如何在微信小程序中使用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: '訪問來源', 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({ /** * 頁面的初始數(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í)，然后通過圖表展示出：女生人數(shù)占全班人數(shù)的比率。(如：上面效果圖中的灰色部分表示全班人數(shù)，綠色部分表示女生人數(shù))。
假如你已經(jīng)懂了Echarts的基本配置，不懂的可以先看看官方文檔：Echarts配置文檔
基于上面例子我們進(jìn)行分析一下：
從wxml文件可以看出ec-canvas組件定義了兩個(gè)屬性canvas-id和ec ，這種自定義屬性一般用來傳參，也就是傳一些參數(shù)給ec-canvas組件內(nèi)部。canvas-id我們暫時(shí)先不管，看一下ec ，在js文件中data里面定義了ec ，
ec它是一個(gè)對(duì)象，并且有個(gè)屬性onInit 它的值是initChart函數(shù)(不是執(zhí)行之后的喔)，通過ec屬性將initChart函數(shù)傳入了ec-canvas組件內(nèi)部，這時(shí)我們可以知道，initChart函數(shù)是在ec-canvas組件里面執(zhí)行的。
打開ec-canvas.js文件，簡(jiǎn)單的看一下源碼：
上圖的兩個(gè)屬性，是通過組件傳參的方式傳進(jìn)來的：
<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í)候，通過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)來)，
如果存在，執(zhí)行init方法，在上圖中可以發(fā)現(xiàn)，init方法內(nèi)部會(huì)執(zhí)行onInit方法(如果條件滿足的話)，然后將函數(shù)返回的chart實(shí)例賦值給this.chart。
實(shí)現(xiàn)代碼如下：
假如我們有個(gè)ecTest Page頁。
1.wxml代碼
<view class='test' wx:for="{{itemList}}" wx:for-item="item"> <view>{{item.name}}</view> <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" tuData="{{item.data}}" ec="{{ ec }}"></ec-canvas> </view></view>2.js代碼
import * as echarts from '../../common/ec-canvas/echarts';function initChart(canvas, width, height ,data) {//這里多加一個(gè)參數(shù) 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: data, color: ["#666", "#179B16"] } ] } chart.setOption(option); return chart;}Page({ /** * 頁面的初始數(shù)據(jù) */ data: { ec: { onInit: initChart }, itemList:[ { name: '一年級(jí)', data: [{ value: 10 }, { value: 1 }] }, { name: '二年級(jí)', data: [{ value: 10 }, { value: 4 }] }, { name: '三年級(jí)', data: [{ value: 10 }, { value: 7 }] }, ] }})3.修改ec-canvas.js文件(這個(gè)文件是從echarts官網(wǎng)下載的)
在wxml文件里，引用ec-canvas組件時(shí)，傳了個(gè)tuData參數(shù)過去，所以我們需要在組件內(nèi)部接收一下，在ec-canvas.js文件里面找到properties對(duì)象，
properties: { canvasId: { type: String, value: 'ec-canvas' }, ec: { type: Object }, tuData:{//這是新增的參數(shù) type: Object } }4.找到init方法，將tuData傳入onInit方法里面即可
5.效果圖
總結(jié)：因?yàn)閏hart實(shí)例是在ec-canvas組件內(nèi)部才創(chuàng)建的，其它頁面使用ec-canvas組件時(shí)，通過傳參的方式，將實(shí)例化chart的方法通過ec屬性傳入ec-canvas組件內(nèi)部進(jìn)行實(shí)例化，
所以我們可以借助這一點(diǎn)，把我們的數(shù)據(jù)也通過傳參的方式傳入ec-canvas內(nèi)部即可。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
