導航

echarts-for-weixin 是 ECharts 官方維護的一個開源項目，提供了一個微信小程序組件（Component），我們可以通過這個組件在微信小程序中使用 ECharts 繪制圖表。echarts-for-weixin 自身包含很多使用示例，方便我們參考。

echarts-for-weixin 是 ECharts 官方維護的一個開源項目，提供了一個微信小程序組件（Component），我們可以通過這個組件在微信小程序中使用 ECharts 繪制圖表。

echarts-for-weixin 自身包含很多使用示例，方便我們參考。

安裝 ECharts 組件

克隆項目：

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

切換版本：

git checkout v2.0.0

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

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

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

使用 ECharts 組件

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

• 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 是組件對象，內部包含組件繪制所需要的數據。

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

在文件 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）設置圖表寬高，也可以使用絕對定位（absolute/top/bottom/left/right）的方式設置圖表位置和寬高。

在 echarts.js 中創建和綁定 ECharts 組件對象：

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

導入 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 組件初始化 通用 函數，我們只需要修改函數中的 option 中的內容即可。

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 組件內部畫布（Canvas）的唯一標識。

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

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

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;
});

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

this.lazyChart.dispose();

不需要圖表時，獲取圖表實例，銷毀圖表。