native react 折線圖_React Native使用百度Echarts顯示圖表的示例代碼

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

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

安裝

npm install native-echarts --save

安裝完成後在node_modules檔案夾下會多出一個檔案夾叫native-echarts。

目錄結構如下圖所示：

基礎使用

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

option (object)：圖表的相關配置和資料。詳見文檔：ECharts Documentation

width (number)：圖表的寬度，預設值是外部容器的寬度。

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 (

);

}

}

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

通過上面的代碼我們就可以在React Native裡面顯示一個圖表了。但是我們會發現顯示的字型會偏小。我們需要适配下移動端的字型，我們需要在native-echarts檔案下找到tpl.html檔案，在head裡面增加下面一句代碼：

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

進階使用：

在使用圖表時，如果我們需要使用圖表的點選事件，比如點選柱狀圖的某個柱子，擷取到該柱子的資訊，再跳轉到詳情頁面，這該怎麼做呢?元件本身是沒有這個屬性的，需要我們自己修改下代碼，傳遞下消息。具體代碼如下：

首先我們需要在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 (

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')}

/>

);

}

}

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

在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'加載。

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