echarts是百度推出的免費(fèi)開源的圖表組件，功能豐富，涵蓋各行業(yè)圖表。公司項(xiàng)目做h5項(xiàng)目用了不少，最近公司翻新h5頁面，用react-native改造，來達(dá)到增強(qiáng)用戶體驗(yàn)效果的目的。項(xiàng)目中遇到了一些坑，記錄下。

1.安裝native-echarts組件

首先我們需要在RN項(xiàng)目中安裝native-echarts組件，該組件是兼容IOS和安卓雙平臺(tái)的。

github地址：https://github.com/somonus/react-native-echarts

搜索github發(fā)現(xiàn)其star、fork數(shù)量并不是很多，到現(xiàn)在為止加上我的star也就492。從這個(gè)數(shù)來看算是不太受歡迎吧！

npm install native-echarts--save

安裝完成后在node_modules文件夾下會(huì)多出一個(gè)文件夾叫native-echarts。

頁面引入

import Echarts from 'native-echarts';...render() {return (<Echarts option={option} height={rpx(420)} />） }

該組件提供了三個(gè)props屬性

component props:

• option?(object): The option for echarts:?Documentation。
• width?(number): The width of the chart. The default value is the outer container width.
• height?(number): The height of the chart. The default value is 400.

按照echart文檔配置好參數(shù)后

運(yùn)行效果，發(fā)現(xiàn)android平臺(tái)下?圖表滾輪上下滾動(dòng)，左右拖動(dòng)，雙擊縮小。

網(wǎng)上找到的辦法是

修改/node_modules/native-echarts/src/components/?下 Echarts 的 index.js? ?代碼如下

<WebViewref="chart"scrollEnabled = {false}injectedJavaScript = {renderChart(this.props)}style={{height: this.props.height || 400,backgroundColor: this.props.backgroundColor || 'transparent'}}scalesPageToFit={Platform.OS === 'android'}source={require('./chart.html')}onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}/>

主要是設(shè)置 scalesPageToFit在android平臺(tái)下為true

?

2.組件優(yōu)化

修改node_modules模塊的代碼？

對(duì)于合作的項(xiàng)目，node_modules不會(huì)上傳到git上的，需要和每一個(gè)開發(fā)人員說下？

其實(shí)沒有那個(gè)必要了，現(xiàn)在的做法是

?

提取node_modules/native-echarts 里面的核心代碼，直接放到項(xiàng)目中去。作為一個(gè)單獨(dú)的組件改寫。

源碼地址：https://github.com/zuobaiquan/react-native/tree/master/Echarts/component

chart.html 里面引入echarts.min.js文件。通過webView 引入到react-native項(xiàng)目中。

當(dāng)然了，覺得echarts.min.js 嫌大，可以去百度echart官網(wǎng)定制一份echarts.min.js即可（地址：http://echarts.baidu.com/builder.html），差不多300k左右吧。

?

3.遇到的坑

現(xiàn)在針對(duì)公司項(xiàng)目，有這么一個(gè)需求

?

問題1：圖表底部只顯示第一個(gè)日期和最后一個(gè)日期

我們都知道? 在?interval設(shè)置下就行。。

interval: (index, value) => {return index === 0 || xData.length - 1 === index },formatter: (value, index) => {if (index === 0) {return `{a|${value}}`} else if (index === xData.length - 1) {return `{b|${value}}`} }

　　

?但是，這里的通過接口請求的數(shù)據(jù)??xData? 值拿不到。 導(dǎo)致不顯示最后一個(gè)日期的數(shù)據(jù)。

解決辦法： 上文提到了該組件提供了三個(gè)props屬性。此時(shí)為啥我們不能暴露更多的屬性呢？

?然后在使用組件時(shí)，設(shè)定chartContext 值就可以啦。。。

?

問題2：tooltips 滑動(dòng)時(shí)，上面的一列文字的數(shù)據(jù)跟著變化。

首先想到的辦法是 在?formatter 設(shè)置?setState 改變數(shù)值，渲染到DOM里面。但是和問題1情況一樣，由于是echart圖表是通過?WebView 嵌入的。無法實(shí)現(xiàn)render的渲染。

tooltip: {formatter: (params)=> {this.setState({number1:???,number2:???})} }

　此時(shí)的做法是

?問題3：設(shè)置為漸變色， 此處設(shè)置的是針對(duì)網(wǎng)頁的

areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(234, 243, 253)'}, {offset: 1,color: 'rgb(255, 255, 255)'}])} }

RN項(xiàng)目這里并沒有 暴露echarts 對(duì)象

因此想要設(shè)置漸變色，得需要用另外一種方式了。

areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#A3C7F3' // 0% 處的顏色}, {offset: 1, color: '#FFFFFF' // 100% 處的顏色}],globalCoord: false // 缺省為 false}},origin:'start'}

路過的朋友，如果有更好的解決辦法，歡迎email我哦，郵箱：?zuobaiquan01@gmail.com??

?

4.關(guān)于打包

/android／app/src/main 創(chuàng)建 assets文件夾 講chart.html模板拷貝一份到該目錄。

?

上面 設(shè)置 chartContext? 解決了配置項(xiàng)拿不到外部變量的問題，看起來很完美，運(yùn)行代碼也沒有什么問題，不過，在項(xiàng)目打包時(shí)，又出了問題，圖表顯示不出來了。

原因：打包時(shí)，由于自定義屬性是手動(dòng)加的，打包時(shí)轉(zhuǎn)換成了簡寫，不能被識(shí)別

// renderChart.js var chartContext = ${toString(chartContext)}; 替換為 var g_chartContext = ${toString(chartContext)};// 使用時(shí)，把chartContext 全都替換為g_chartContext 就可以了 　　 option.tooltip.formatter = (params) => {return `<div style="width: ${g_chartContext.width*690}px; font-size: ${g_chartContext.width*26}px;"></div>` // 此處deviceW并不生效，獲取不到外部定義的變量 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/zuobaiquan01/p/9882500.html

總結(jié)

以上是生活随笔為你收集整理的react native使用百度echarts显示图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。