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

1.安裝native-echarts組件

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

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

搜索github發現其star、fork數量并不是很多，到現在為止加上我的star也就492。從這個數來看算是不太受歡迎吧！

npm install native-echarts--save

安裝完成后在node_modules文件夾下會多出一個文件夾叫native-echarts。

頁面引入

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

該組件提供了三個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文檔配置好參數后

運行效果，發現android平臺下?圖表滾輪上下滾動，左右拖動，雙擊縮小。

網上找到的辦法是

修改/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}/>

主要是設置 scalesPageToFit在android平臺下為true

?

2.組件優化

修改node_modules模塊的代碼？

對于合作的項目，node_modules不會上傳到git上的，需要和每一個開發人員說下？

其實沒有那個必要了，現在的做法是

?

提取node_modules/native-echarts 里面的核心代碼，直接放到項目中去。作為一個單獨的組件改寫。

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

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

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

?

3.遇到的坑

現在針對公司項目，有這么一個需求

?

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

我們都知道? 在?interval設置下就行。。

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}}`} }

　　

?但是，這里的通過接口請求的數據??xData? 值拿不到。 導致不顯示最后一個日期的數據。

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

?然后在使用組件時，設定chartContext 值就可以啦。。。

?

問題2：tooltips 滑動時，上面的一列文字的數據跟著變化。

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

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

　此時的做法是

?問題3：設置為漸變色， 此處設置的是針對網頁的

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項目這里并沒有 暴露echarts 對象

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

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.關于打包

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

?

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

原因：打包時，由于自定義屬性是手動加的，打包時轉換成了簡寫，不能被識別

// renderChart.js var chartContext = ${toString(chartContext)}; 替換為 var g_chartContext = ${toString(chartContext)};// 使用時，把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并不生效，獲取不到外部定義的變量 }

?

轉載于:https://www.cnblogs.com/zuobaiquan01/p/9882500.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。