摘要：今天我就來介紹下在中如何使用來顯示各種圖表。首先需要在我們的項目中安裝組件，該組件是兼容和安卓雙平臺的。組件主要有三個屬性圖表的相關(guān)配置和數(shù)據(jù)。圖表的高度，默認(rèn)值是。解決方法將中的代碼修改為同時將文件拷貝到安卓項目下面的文件夾中。

本文原創(chuàng)首發(fā)于公眾號：ReactNative開發(fā)圈

Echarts是百度推出的免費開源的圖表組件，功能豐富，涵蓋各行業(yè)圖表。相信很多同學(xué)在網(wǎng)頁端都使用過。今天我就來介紹下在React Native中如何使用Echarts來顯示各種圖表。

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

npm install native-echarts --save

安裝完成后在node_modules文件夾下會多出一個文件夾叫native-echarts。
目錄結(jié)構(gòu)如下圖所示：

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

option (object)：圖表的相關(guān)配置和數(shù)據(jù)。詳見文檔：ECharts Documentation

width (number)：圖表的寬度，默認(rèn)值是外部容器的寬度。

height (number) ：圖表的高度，默認(rèn)值是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 (
      
    );
  }
}

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

通過上面的代碼我們就可以在React Native里面顯示一個圖表了。但是我們會發(fā)現(xiàn)顯示的字體會偏小。我們需要適配下移動端的字體，我們需要在native-echarts文件下找到tpl.html文件，在head里面增加下面一句代碼：

這樣字體大小就顯示正常了。

在使用圖表時，如果我們需要使用圖表的點擊事件，比如點擊柱狀圖的某個柱子，獲取到該柱子的信息，再跳轉(zhuǎn)到詳情頁面，這該怎么做呢?組件本身是沒有這個屬性的，需要我們自己修改下代碼，傳遞下消息。具體代碼如下：

首先我們需要在renderChart.js文件中把需要的數(shù)據(jù)注入并傳遞出來（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 (
      
        
      
    );
  }
}

最后在使用圖表的頁面中，修改下代碼來接受傳遞過來的消息：

在handleMessage方法中就可以寫自己的邏輯來處理傳遞過來數(shù)據(jù)了。

如果就這樣打包的話，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文件夾中。

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

舉手之勞關(guān)注我的微信公眾號：ReactNative開發(fā)圈