微信小程序使用ECharts的示例詳解

更新時間：2022年06月15日 08:26:40 作者：萌貓他爸

echarts-for-weixin是ECharts官方維護的一個開源項目，提供了一個微信小程序組件，可以通過這個組件在微信小程序中使用?ECharts?繪制圖表。本文將通過示例詳解微信小程序使用ECharts的方法，感興趣的可以了解一下

安裝 ECharts 組件

克隆項目：

git clone https://github.com/ecomfe/echarts-for-weixin.git

切換版本：

git checkout v2.0.0

echarts-for-weixin 最新的 Releases 版本為 v2.0.0，內(nèi)部使用的 ECharts 版本為 5.1.1，詳情可以參考 Releases。

項目文件夾 ec-canvas 就是我們需要的 ECharts 組件文件夾，我們只需要把該文件夾整個復(fù)制/拷貝到我們小程序項目中就可以完成安裝。

ec-canvas 目錄下有一個 echarts.js，默認文件大小較大，如果我們需要使用從官網(wǎng)自定義構(gòu)建的方式減小文件大小，選擇的 ECharts 版本一定要和 echarts-for-weixin 版本相匹配，如：5.1.1。

使用 ECharts 組件

假設(shè)我們需要繪制圖表的頁面（Page）為 echarts，小程序項目中對應(yīng)以下四個文件：

echarts.js
echarts.wxml
echarts.wxss
echarts.json

在文件 echarts.json 中引用聲明組件：

{
  "usingComponents": {
    "ec-canvas": "/activity/components/ec-canvas/ec-canvas"
  }
}

ec-canvas 為 ECharts 組件名稱，/activity/components/ec-canvas/ec-canvas 是小程序項目中 ECharts 組件的安裝目錄。

在文件 echarts.wxml 中使用組件：

<view class="ec-container">
  <ec-canvas canvas-id="echart-pie" ec="{{ec}}"></ec-canvas>
</view>

canvas-id 是組件ID，必須唯一；ec 是組件對象，內(nèi)部包含組件繪制所需要的數(shù)據(jù)。

ECharts 組件需要一個組件容器（view），多個組件可以位于同一個組件容器中，必須保證組件初始化（onInit）之前，組件容器是有寬度和高度的；否則，可能導(dǎo)致圖表不能正常顯示，只顯示空白。

在文件 echarts.wxss 中聲明布局樣式類：

.ec-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;
}

ec-canvas {
  width: 100%;
  height: 100%;
}

.ec-container 為組件容器使用的樣式類，注意組件容器寬高（width）和高度（height）的聲明；ec-canvas 為組件容器使用的樣式類，可以使用寬高（width）和高度（height）設(shè)置圖表寬高，也可以使用絕對定位（absolute/top/bottom/left/right）的方式設(shè)置圖表位置和寬高。

在 echarts.js 中創(chuàng)建和綁定 ECharts 組件對象：

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

導(dǎo)入 echarts；

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武漢'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '廣州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };
  chart.setOption(option);

  return chart;
}

ECharts 組件初始化通用函數(shù)，我們只需要修改函數(shù)中的 option 中的內(nèi)容即可。

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

ECharts 組件初始化，加載圖表：

圖表延遲加載

如果不想頁面渲染時就加載圖表，就需要使用延遲加載，俗稱“懶加載”。

<view class="ec-container">
  <ec-canvas id="lazy-echart-pie" canvas-id="lazy-canvas-pie" ec="{{lazyEc}}"></ec-canvas>
</view>

id 是 ECharts 組件的唯一標識，canvas-id 是 ECharts 組件內(nèi)部畫布（Canvas）的唯一標識。

Page({
  data: {
    lazyEc: {
      lazyLoad: true
    }
  }
})

頁面渲染時，不直接初始化 ECharts 組件對象，且設(shè)置組件啟用懶加載；

this.lazyComponent = this.selectComponent('#lazy-echart-pie')

頁面渲染完成后，使用組件ID獲取組件實例（lazyComponent），保存至頁面（this）實例中。

this.lazyComponent.init((canvas, width, height, dpr) => {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  this.lazyChart = chart;

  var option = {
    ...
  };
  chart.setOption(option);

  return chart;
});

需要加載圖表時，使用組件實例，手動調(diào)用初始化方法（init），方法內(nèi)容與 initChart 相同。為了方便后續(xù)操作圖表實例（chart），也可以將它保存至頁面實例中。