如何在微信小程序中使用Echarts可以看我的另一個教程：點擊查看

創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶上1000+，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

首先看一個簡單的例子

1.wxml文件

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)下載，然后放到一個文件夾里面，然后在json文件中引入)

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

4.效果圖

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

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

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

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

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

打開ec-canvas.js文件，簡單的看一下源碼：

上圖的兩個屬性，是通過組件傳參的方式傳進(jìn)來的：

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

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

如果存在，執(zhí)行init方法，在上圖中可以發(fā)現(xiàn)，init方法內(nèi)部會執(zhí)行onInit方法(如果條件滿足的話)，然后將函數(shù)返回的chart實例賦值給this.chart。

實現(xiàn)代碼如下：

假如我們有個ecTest Page頁。

1.wxml代碼

 {{item.name}}
 
  
 

2.js代碼

import * as echarts from '../../common/ec-canvas/echarts';
function initChart(canvas, width, height ,data) {//這里多加一個參數(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: '一年級', data: [{ value: 10 }, { value: 1 }] },
   { name: '二年級', data: [{ value: 10 }, { value: 4 }] },
   { name: '三年級', data: [{ value: 10 }, { value: 7 }] },
  ]
 }
})

3.修改ec-canvas.js文件(這個文件是從echarts官網(wǎng)下載的)

在wxml文件里，引用ec-canvas組件時，傳了個tuData參數(shù)過去，所以我們需要在組件內(nèi)部接收一下，在ec-canvas.js文件里面找到properties對象，

properties: {
  canvasId: {
   type: String,
   value: 'ec-canvas'
  },

  ec: {
   type: Object
  },
  tuData:{//這是新增的參數(shù)
   type: Object
  }
 }

4.找到init方法，將tuData傳入onInit方法里面即可

5.效果圖

總結(jié)：因為chart實例是在ec-canvas組件內(nèi)部才創(chuàng)建的，其它頁面使用ec-canvas組件時，通過傳參的方式，將實例化chart的方法通過ec屬性傳入ec-canvas組件內(nèi)部進(jìn)行實例化，

所以我們可以借助這一點，把我們的數(shù)據(jù)也通過傳參的方式傳入ec-canvas內(nèi)部即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。