【小程序】---- 封裝Echarts公共組件，遍歷圖表實現多個餅圖

一、問題描述：

在小程序的項目中，封裝公共的餅圖組件，並在需要的頁面引入使用。要求一個頁面中有多個餅圖，動態渲染不同的數據。

 

二、效果實現：

1. 查看——小程序使用Echarts的方式

2. 封裝餅圖公共組件

// pie.wxml

<view class="containers">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" tuData="{{ pieData }}"></ec-canvas> // tuData是自定義的
</view>

// pie.json

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas" // 下載的微信版Echarts
  },
  "component": true
}

// pie.js

import * as echarts from '../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr, pieData) { // 這里多加了pieData參數
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);
  // console.log('數據：',pieData)
  // pieData為頁面傳過來的數組數據：[[分類],[分類顏色],[標簽字大小,標簽字顏色],分類一數據,分類二數據]
  let option = {
    title: {},
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}'
    },
    legend: {
      left: 'center',
      bottom: 20,
      textStyle: {
        fontSize: pieData[2][0],
        color: pieData[2][1]
      },
      data: pieData[0]
    },
    color: pieData[1],
    // color: ['#FD7031','#00d6a5'],
    series: [{
      name: '客戶',
      type: 'pie',
      radius: '60%',
      center: ["45%", "38%"], 
      label: {
        position: 'inner',
        show: true,
        formatter: '{c}'
      },
      data: [{
          value: pieData[3] ? pieData[3] : 0,
          name: pieData[0][0],
          // name: '已聯系客戶',
          formatter: '{c}',
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
          }
        },
        {
          // name: '未聯系客戶',
          value: pieData[4] ? pieData[4] : 0,
          name: pieData[0][1],
          formatter: '{c}',
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
          }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
    }]
  };
  chart.setOption(option);
  return chart;
}

Component({
  // 接收頁面傳遞過來的 pieData 餅圖數據
  properties: {
    pieData: {
      type: Array
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  }
})

 

3. Page頁面遍歷 pie 餅圖組件，並傳過去需要的數據

(1) 通過 showPie 控制是否使用 pie 組件，當餅圖有數據時使用，當切換頁面時銷毀。這是為了解決展示的餅圖無法更新數據的問題。

 (2) 成功從接口獲取到餅圖數據后，為頁面每個餅圖需要用到的要傳遞的 pieData 數據賦值。

 

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

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

(2) 找到init方法，將tuData傳入onInit方法里。