React Native使用百度Echarts顯示圖表的範例程式碼，reactecharts

React Native使用百度Echarts顯示圖表的範例程式碼，reactecharts

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命令，這樣就能成功打包了。

Q1

當資料量比較大的時候，x軸的資料不顯示。這個是echarts自己的一個功能，解決辦法是設定xAxis-axisLabel-interval為0即可。

Q2

面積折線圖中面積顏色“不正“，也就是說和設定的顏色對不上。這個可能是react-native-echarts組件封裝的問題，解決辦法是設定areaStyle-normal-shadowColor為'#ffffff'，同理可以設定lineStyle等。

Q3

打release包的時候報錯了，
\android\app\src\main\res\drawable-mdpi\node_modules_nativeecharts_src_components_echarts_tpl.html
Error:Error: The file name must end with .xml or .png

原因：

release打包的時候把node_modules_nativeecharts_src_components_echarts_tpl.html打到了drawable下，這是不行的，要放到assets下。

解決辦法是

另外，release版本只能使用uri載入資源，android把tpl.html檔案放在android/app/src/main/assets檔案裡，使用uri:'file:///android_asset/tpl.html'這個地址載入，ios在項目目錄下建個檔案夾，把tpl檔案放裡面去，使用uri:'檔案名稱/tpl'載入。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。