微信小程式使用ECharts的範例詳解

2022-06-15 10:00:21

安裝 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();

不需要圖表時，獲取圖表範例，銷燬圖表。

以上就是微信小程式使用ECharts的範例詳解的詳細內容，更多關於小程式 ECharts的資料請關注it145.com其它相關文章！

微信小程式使用ECharts的範例詳解

目錄

安裝 ECharts 元件

使用 ECharts 元件

圖表延遲載入

熱門文章