摘要:今天我就來介紹下在中如何使用來顯示各種圖表。首先需要在我們的項目中安裝組件,該組件是兼容和安卓雙平臺的。組件主要有三個屬性圖表的相關配置和數據。圖表的高度,默認值是。解決方法將中的代碼修改為同時將文件拷貝到安卓項目下面的文件夾中。
本文原創首發于公眾號:ReactNative開發圈
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 (); } }
最后在使用圖表的頁面中,修改下代碼來接受傳遞過來的消息:
在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開發圈
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89527.html
摘要:數據可視化庫超過的的可能是最流行和最廣泛的數據可視化庫。是一組組件,用于高效地渲染大型列表和表格數據。一種優雅而靈活的方式,可以利用組件來支持實際的數據可視化。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...
摘要:額外的三個參數賦給的參數對象,發生變化后內部會自動調用,實現響應式刷新。利用,實現了通知執行在中,可利用實現的事件向組件的通信。 一種在 React Native 中封裝的響應式 Echarts 組件,使用與示例請參見:react-native-echarts-demo 近年來,隨著移動端對數據可視化的要求越來越高,類似 MPAndroidChart 這樣的傳統圖表庫已經不能滿足產品...
閱讀 1295·2021-11-23 09:51
閱讀 3399·2021-09-06 15:00
閱讀 987·2021-08-16 10:57
閱讀 1371·2019-08-30 12:46
閱讀 933·2019-08-29 12:22
閱讀 1604·2019-08-29 11:07
閱讀 3148·2019-08-26 11:23
閱讀 2980·2019-08-23 15:14