From 222f09cda7c97706082c6246d879b52911dffb1d Mon Sep 17 00:00:00 2001
From: Anshi <bisexua1@foxmail.com>
Date: Fri, 13 Jul 2018 15:23:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E4=BE=8B?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9A=84=E7=82=B9=E5=87=BB=E7=9B=91=E5=90=AC?=
 =?UTF-8?q?...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Echarts/index.js       | 56 ++++++++++++++-------------
 src/components/Echarts/renderChart.js |  1 -
 src/components/Echarts/tpl.html       |  7 ++++
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js
index 7bd9ef1..8b5a286 100644
--- a/src/components/Echarts/index.js
+++ b/src/components/Echarts/index.js
@@ -2,69 +2,73 @@
 import React, { Component } from 'react';
 import { WebView, View, StyleSheet, Platform } from 'react-native';
 import renderChart from './renderChart';
-import renderChartNoFirst from './renderChart'
+import renderChartNoFirst from './renderChart';
 import echarts from './echarts.min';
 
-
 export default class App extends Component {
-// 预防过渡渲染
+  // 预防过渡渲染
 
   shouldComponentUpdate(nextProps, nextState) {
-    const thisProps = this.props || {}
-    nextProps = nextProps || {}
+    const thisProps = this.props || {};
+    nextProps = nextProps || {};
     if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
-      return true
+      return true;
     }
     for (const key in nextProps) {
       if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
-// console.log('props', key, thisProps[key], nextProps[key])
-        return true
+        // console.log('props', key, thisProps[key], nextProps[key])
+        return true;
       }
     }
-    return false
+    return false;
   }
 
   componentWillReceiveProps(nextProps) {
-    if(nextProps.option !== this.props.option) {
-
-// 解决数据改变时页面闪烁的问题
-      this.refs.chart.injectJavaScript(renderChart(nextProps,false))
+    if (nextProps.option !== this.props.option) {
+      // 解决数据改变时页面闪烁的问题
+      this.refs.chart.injectJavaScript(renderChart(nextProps, false));
     }
   }
 
   render() {
-    if (Platform.OS == 'android'){
+    const messageFn = this.props.onMessage || null;
+    if (Platform.OS == 'android') {
       return (
-        <View style={{flex: 1, height: this.props.height || 400,}}>
+        <View style={{ flex: 1, height: this.props.height || 400 }}>
           <WebView
             ref="chart"
-            scrollEnabled = {false}
+            scrollEnabled={false}
             javaScriptEnabled={true}
-            injectedJavaScript = {renderChart(this.props,true)}
+            injectedJavaScript={renderChart(this.props, true)}
             style={{
-              height: this.props.height || 400,
+              height: this.props.height || 400
             }}
+            onMessage={messageFn}
             //source={require('./tpl.html')}
-            source={{uri: 'file:///android_asset/tpl.html'}}
+            source={{ uri: 'file:///android_asset/tpl.html' }}
           />
         </View>
       );
-    }else{
+    } else {
       return (
-        <View style={{flex: 1, height: this.props.height || 400,}}>
+        <View style={{ flex: 1, height: this.props.height || 400 }}>
           <WebView
             ref="chart"
-            scrollEnabled = {false}
+            scrollEnabled={false}
             scalesPageToFit={false}
-            injectedJavaScript = {renderChart(this.props,true)}
+            injectedJavaScript={renderChart(this.props, true)}
             style={{
-              height: this.props.height || 400,
+              height: this.props.height || 400
             }}
-            source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}
+            onMessage={messageFn}
+            source={
+              Platform.OS === 'ios'
+                ? require('./tpl.html')
+                : { uri: 'file:///android_asset/tpl.html' }
+            }
           />
         </View>
       );
     }
-
   }
 }
diff --git a/src/components/Echarts/renderChart.js b/src/components/Echarts/renderChart.js
index 82c0a48..492396f 100644
--- a/src/components/Echarts/renderChart.js
+++ b/src/components/Echarts/renderChart.js
@@ -10,7 +10,6 @@ export default function renderChart(props,isFirst) {
     return `
     document.getElementById('main').style.height = "${height}";
     document.getElementById('main').style.width = "${width}";
-    myChart = echarts.init(document.getElementById('main'));
     myChart.setOption(${toString(props.option)});
   `
   }else{
diff --git a/src/components/Echarts/tpl.html b/src/components/Echarts/tpl.html
index c585c65..eea97ff 100644
--- a/src/components/Echarts/tpl.html
+++ b/src/components/Echarts/tpl.html
@@ -79,6 +79,13 @@
 <body>
 <div id="main" ></div>
 <script>
+  var myChart = echarts.init(document.getElementById('main'));
+
+  myChart.on('legendselectchanged',function(params){
+      if(typeof window.postMessage  === 'function'){
+        window.postMessage(params)
+      }
+  })
   function changeDigit(num = 0, digit = 2) {
     if (isNaN(num)) {
       return num;

From bfcfd07eb3c702f57b5667354fbb2736acfc0955 Mon Sep 17 00:00:00 2001
From: Anshi <bisexua1@foxmail.com>
Date: Mon, 16 Jul 2018 19:29:42 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Echarts/tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Echarts/tpl.html b/src/components/Echarts/tpl.html
index eea97ff..169cd3c 100644
--- a/src/components/Echarts/tpl.html
+++ b/src/components/Echarts/tpl.html
@@ -83,7 +83,7 @@
 
   myChart.on('legendselectchanged',function(params){
       if(typeof window.postMessage  === 'function'){
-        window.postMessage(params)
+        window.postMessage(JSON.stringify(params))
       }
   })
   function changeDigit(num = 0, digit = 2) {