react native使用百度echarts顯示圖表

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並不生效，獲取不到外部定義的變量
}