添加一个主动刷新option的方法，界面不会闪动

Author: RebelBIrd

src/components/Echarts/index.js

@@ -4,12 +4,23 @@ import renderChart from './renderChart';
 import echarts from './echarts.min';
 
 export default class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.setNewOption = this.setNewOption.bind(this);
+  }
+  
+
   componentWillReceiveProps(nextProps) {
     if(nextProps.option !== this.props.option) {
       this.refs.chart.reload();
     }
   }
 
+  setNewOption(option) {
+    this.refs.chart.postMessage(JSON.stringify(option));
+  }
+
   render() {
     return (
       <View style={{flex: 1, height: this.props.height || 400,}}>

src/components/Echarts/renderChart.js

@@ -9,6 +9,10 @@ export default function renderChart(props) {
     document.getElementById('main').style.width = "${width}";
     var myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(${toString(props.option)});
+    window.document.addEventListener('message', function(e) {
+      var option = JSON.parse(e.data);
+      myChart.setOption(option);
+    });
     myChart.on('click', function(params) {
       var seen = [];
       var paramsString = JSON.stringify(params, function(key, val) {

src/index.js

@@ -3,10 +3,15 @@ import { WebView, View } from 'react-native';
 import { Container, Echarts } from './components'
 
 export default class App extends Component {
+
+  setNewOption(option) {
+    this.chart.setNewOption(option);
+  }
+
   render() {
     return (
       <Container width={this.props.width}>
-        <Echarts {...this.props} />
+        <Echarts {...this.props} ref={e => this.chart = e}/>
       </Container>
     );
   }