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 代碼如下
<WebView
ref="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並不生效，獲取不到外部定義的變量 }