TaroEcharts-各種圖表在Taro中的實踐

hello等風來發表於2019-01-17
Echarts

隨著React的快速發展，我們也越來越接受它的寫法和思想，如今小程式如火中天，普通的編譯模式早已不適應開發者的需求。人們在不斷的尋求一種React能夠在小程式中編譯的語言框架，因此Taro便誕生了。宇宙中最強的執行官。它支援使用 React 的開發方式來編寫可以同時在微信小程式、Web 、React Native 等多個平臺上執行的應用。經過不斷地迭代完善，已經讓 Taro 浴火重生。

TaroEcharts簡介

本專案是在實際開發中總結出來的一套基於ec-canvas封裝的適用於Taro版本的圖表框架。開發者可以通過簡單的配置及 React 的語法，快速開發圖表，滿足各種視覺化需求。

Github地址：github.com/WsmDyj/echa…

微信小程式預覽：

TaroECharts Demo

實現過程

1 下載

為了相容小程式 Canvas，我們首先去構建ec-canvas下載到本地。其中ec-canvas是echarts官網提供的元件，我們可以自行下載或者去官網自定義構建選擇自己需要的圖表或外掛進行下載。

2 引入元件

在專案中引入我們需要的元件庫，這裡統一將其放在src/components/ec-canvas資料夾下。大家可將該資料夾匯入到自己專案中去。其中echarts.js就是剛我們自行下載的echarts圖表外掛，可根據實際專案需求自定義下載所需圖表然後將其匯入。

3 建立圖表(以餅圖為例)

3.1 新建圖表元件

在components資料夾下建立pieCharts.js元件。引入我們剛建立的元件

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

3.2 懶載入渲染圖表

配置我們的ec-canvas

config = {
    usingComponents: {
        "ec-canvas": "./ec-canvas/ec-canvas"
    }
};
複製程式碼

在render函式中使用剛匯入的ec-canvas

<ec-canvas
    ref={this.refChart}
    canvas-id="mychart-area"
    ec={this.state.ec}
/>
複製程式碼

構建refresh函式初始化圖表

refresh(data) {
    this.Chart.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setChartData(chart, data);
      return chart;
    });
  }

  refChart = node => (this.Chart = node);
複製程式碼

配置懶載入圖表

state = {
    ec: {
      lazyLoad: true
    }
 };
複製程式碼

3.3 配置我們所需圖表的option

這裡在setChartData進行配置，並傳入charts,data引數。


function setChartData(chart, data) {
  let option = {
    series : [
      {
        name: '訪問來源',
        type: 'pie',
        center: ['50%', '50%'],
        radius: [0, '60%'],
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
}
複製程式碼

至此餅圖已經建立完成，具體的可參考餅圖

4 例項化圖表

在需要圖表的頁面中匯入剛建立的圖表(餅圖)

import PieChart from "../../components/PieChart";

render函式中匯入

<PieChart ref={this.refPieChart} />
複製程式碼

例項化圖表並傳入data

componentDidMount() {
    const chartData = [
      {value:335, name:'直接訪問'},
      {value:310, name:'郵件營銷'},
      {value:234, name:'聯盟廣告'},
      {value:135, name:'視訊廣告'},
      {value:1548, name:'搜尋引擎'}
    ];
    this.pieChart.refresh(chartData);
  }
  refPieChart = (node) => this.pieChart = node
複製程式碼

至此餅圖已經建立完成，餅圖如此其他的都是類似的。只要照著這個方式去設定option,我們就可以建立你想要的圖表了。

5 其他圖表的建立

可滑動圖表：

可滑動圖表

一個頁面多個圖表:

一個頁面多個圖表

多個圖表結合在一起:

多個圖表結合在一起

總結

從不為人知到家喻戶曉，Taro現在也逐漸被開發者所接受。在未來的道路上應該還會更火，畢竟是宇宙中最強的執行官。然而一個好的框架也是需要大部分工具輔助的。就好比ADC旁邊總跟著個輔助。其中圖表在Taro中目前還沒有一個統一的開發規範，目前這僅是我們團隊中使用的一種方式。目前也正在抽離出單獨針對Taro-echarts包。志同道合歡迎提issue一起加入我們。

相關文章