react-native-echarts目前是RN開發中使用echarts圖表最好的外掛了，用法與Echarts完全一致，預設提供了三個屬性:

• 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

　　1.首先是最基本的使用：

　　　　

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 ( <Echarts option={option} height={300} /> ); } } AppRegistry.registerComponent('app', () => app);
 

當自定義tooltip時，由於react-native-echarts外層包裹了一層WebView，所以在配置項的函式內部不能拿到外部的變數

const deviceW = Dimensions.get('window').width / 750   option.tooltip.formatter = (params) => { 　　return `<div style="width: ${deviceW*690}px; font-size: ${deviceW*26}px;"></div>` // 此處deviceW並不生效，獲取不到外部定義的變數 }

　　2.改進：

　　　　WebView將圖表與外界的變數進行了隔離，只能另想他法，多傳入一個屬性，將外部變數變成可以供內部使用的變數

　　　　

const deviceW = Dimensions.get('window').width / 750
let chartContext = {
　　width: deviceW
}

　option.tooltip.formatter = (params) => { 　　return `<div style="width: ${chartContext.width*690}px; font-size: ${chartContext.width*26}px;"></div>` // 此處deviceW並不生效，獲取不到外部定義的變數  }

<Echarts option={option} height={300} chartContext={chartContext} />

// 修改react-native-echarts包程式碼：
// renderChart.js

　export default function renderChart(props) { 　　const height = `${props.height || 400}px`; 　　const width = props.width ? `${props.width}px` : "auto"; 　　 const chartContext = props.chartContext 　　return ` 　　　　document.getElementById('main').style.height = "${height}"; 　　　　document.getElementById('main').style.width = "${width}"; 　　　　var myChart = echarts.init(document.getElementById('main')); 　　　　 var chartContext = ${toString(chartContext)}; 　　　　myChart.setOption(${toString(props.option)}); 　　　　myChart.on('click', function(params) { 　　　　　　var seen = []; 　　　　　　var paramsString = JSON.stringify(params, function(key, val) { 　　　　　　　　if (val != null && typeof val == "object") { 　　　　　　　　　　if (seen.indexOf(val) >= 0) { 　　　　　　　　　　　　return; 　　　　　　　　　　} 　　　　　　　　　　seen.push(val); 　　　　　　　　} 　　　　　　　　return val; 　　　　　　}); 　　　　　　window.postMessage(paramsString); 　　　　}); 　　　　` 　}

　　3.以上方案解決了配置項拿不到外部變數的問題，看起來很完美，執行程式碼也沒有什麼問題，不過，在專案打包時，又出了問題，圖表顯示不出來了，很詭異

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

　　改進：

　　

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