React Native使用百度Echarts顯示圖表

本文原創首發於公衆號：ReactNative開發圈

Echarts是百度推出的免費開源的圖表組件，功能豐富，涵蓋各行業圖表。相信不少同窗在網頁端都使用過。今天我就來介紹下在React Native中如何使用Echarts來顯示各類圖表。

首先須要在咱們的React Native項目中安裝native-echarts組件，該組件是兼容IOS和安卓雙平臺的。

安裝

npm install native-echarts --save

安裝完成後在node_modules文件夾下會多出一個文件夾叫native-echarts。
目錄結構以下圖所示：

基礎使用

native-echarts的使用方法基本和網頁端的Echarts使用方法一致。組件主要有三個屬性：

1. option (object)：圖表的相關配置和數據。詳見文檔：ECharts Documentation
2. width (number)：圖表的寬度，默認值是外部容器的寬度。
3. height (number) ：圖表的高度，默認值是400。

示例代碼：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Echarts from 'native-echarts';

export default class app extends Component {
  render() {
    const option = {
      title: {
          text: 'ECharts demo'
      },
      tooltip: {},
      legend: {
          data:['銷量']
      },
      xAxis: {
          data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
      },
      yAxis: {},
      series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    };
    return (
      <Echarts option={option} height={300} />
    );
  }
}

AppRegistry.registerComponent('app', () => app);

經過上面的代碼咱們就能夠在React Native裏面顯示一個圖表了。可是咱們會發現顯示的字體會偏小。咱們須要適配下移動端的字體，咱們須要在native-echarts文件下找到tpl.html文件，在head裏面增長下面一句代碼：
<meta name="viewport" content="width=device-width, initial-scale=1">
這樣字體大小就顯示正常了。

進階使用：

在使用圖表時，若是咱們須要使用圖表的點擊事件，好比點擊柱狀圖的某個柱子，獲取到該柱子的信息，再跳轉到詳情頁面，這該怎麼作呢?組件自己是沒有這個屬性的，須要咱們本身修改下代碼，傳遞下消息。具體代碼以下：

首先咱們須要在renderChart.js文件中把須要的數據注入並傳遞出來（window.postMessage）：

import echarts from './echarts.min';
import toString from '../../util/toString';

export default function renderChart(props) {
  const height = props.height || 400;
  const width = props.width || 568;
  return `
    document.getElementById('main').style.height = "${height}px";
    document.getElementById('main').style.width = "${width}px";
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(${toString(props.option)});
    myChart.on('click', function (params) {
      var  message = {};
      message.event='click';
      message.seriesName = params.seriesName;
      message.name = params.name;
      window.postMessage(JSON.stringify(message));
 });
  `
}

而後在index.js中作處理（handleMessage）：

import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {
  componentWillReceiveProps(nextProps) {
    if(JSON.stringify(nextProps.option) !== JSON.stringify(this.props.option)) {
      this.refs.chart.reload();
    }
  }
  handleMessage = (evt) => {
    const message = JSON.parse(evt.nativeEvent.data)
     this.props.handleMessage(message);
  }
  render() {
    return (
      <View style={{flex: 1, height: this.props.height,width: this.props.width }}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height|| 400,
            width: this.props.width || 568,
          }}
          onMessage={this.handleMessage}
          source={require('./tpl.html')}
        />
      </View>
    );
  }
}

最後在使用圖表的頁面中，修改下代碼來接受傳遞過來的消息：
<Echarts option={option} height={height} width={theme.screenWidth} handleMessage={this.handleMessage} />
在handleMessage方法中就能夠寫本身的邏輯來處理傳遞過來數據了。

打包：

若是就這樣打包的話，IOS是能夠正常打包並顯示的。可是在android端打包時會出錯。

解決方法：

• 將index.js中的代碼：source={require('./tpl.html')}修改成：
  source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
• 同時將tpl.html文件拷貝到安卓項目下面的app/src/main/assets文件夾中。

在執行完react-native bundle命令後，須要手動將資源文件res/drawable-mdpi中生成的tpl.html文件刪除，再執行cd android && ./gradlew assembleRelease命令，這樣就能成功打包了。

舉手之勞關注個人微信公衆號：ReactNative開發圈