From 577801a6ab79ac4171c0d0a8d5a157b075cd339f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E6=89=AC?= <luyang@thundersdata.com>
Date: Tue, 17 Apr 2018 13:41:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=A8oppo=20r7=E4=B8=8B?=
 =?UTF-8?q?=E4=BC=9A=E5=87=BA=E7=8E=B0=E7=9A=84=E9=97=AA=E7=83=81=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=88=E5=8E=BB=E6=8E=89webview=E7=9A=84background?=
 =?UTF-8?q?=EF=BC=89=EF=BC=8C=E4=BB=A5=E5=8F=8A=E5=8E=BB=E6=8E=89=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8Decharts.init=E5=8F=AF=E8=83=BD=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Echarts/index.js       | 79 ++++++++++++++++++---------
 src/components/Echarts/renderChart.js | 35 +++++-------
 2 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js
index 4c557d2..836e9e3 100644
--- a/src/components/Echarts/index.js
+++ b/src/components/Echarts/index.js
@@ -1,42 +1,69 @@
+// 修改后
 import React, { Component } from 'react';
 import { WebView, View, StyleSheet, Platform } from 'react-native';
 import renderChart from './renderChart';
+import renderChartNoFirst from './renderChart'
 import echarts from './echarts.min';
 
-export default class App extends Component {
 
-  constructor(props) {
-    super(props);
-    this.setNewOption = this.setNewOption.bind(this);
+export default class App extends Component {
+// 预防过渡渲染
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const thisProps = this.props || {}
+    nextProps = nextProps || {}
+    if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
+      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
+      }
+    }
+    return false
   }
-  
 
   componentWillReceiveProps(nextProps) {
     if(nextProps.option !== this.props.option) {
-      this.refs.chart.reload();
+
+// 解决数据改变时页面闪烁的问题
+      this.refs.chart.injectJavaScript(renderChart(nextProps,false))
     }
   }
 
-  setNewOption(option) {
-    this.refs.chart.postMessage(JSON.stringify(option));
-  }
-
   render() {
-    return (
-      <View style={{flex: 1, height: this.props.height || 400,}}>
-        <WebView
-          ref="chart"
-          scrollEnabled = {false}
-          injectedJavaScript = {renderChart(this.props)}
-          style={{
-            height: this.props.height || 400,
-            backgroundColor: this.props.backgroundColor || 'transparent'
-          }}
-          scalesPageToFit={Platform.OS !== 'ios'}
-          source={require('./tpl.html')}
-          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
-        />
-      </View>
-    );
+    if (Platform.OS == 'android'){
+      return (
+        <View style={{flex: 1, height: this.props.height || 400,}}>
+          <WebView
+            ref="chart"
+            scrollEnabled = {false}
+            injectedJavaScript = {renderChart(this.props,true)}
+            style={{
+              height: this.props.height || 400,
+            }}
+            //source={require('./tpl.html')}
+            source={{uri: 'file:///android_asset/tpl.html'}}
+          />
+        </View>
+      );
+    }else{
+      return (
+        <View style={{flex: 1, height: this.props.height || 400,}}>
+          <WebView
+            ref="chart"
+            scrollEnabled = {false}
+            scalesPageToFit={false}
+            injectedJavaScript = {renderChart(this.props,true)}
+            style={{
+              height: this.props.height || 400,
+            }}
+            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 8592749..bb31260 100644
--- a/src/components/Echarts/renderChart.js
+++ b/src/components/Echarts/renderChart.js
@@ -1,30 +1,23 @@
+// 修改后
 import echarts from './echarts.min';
 import toString from '../../util/toString';
-
-export default function renderChart(props) {
+var myChart = null;
+export default function renderChart(props,isFirst) {
+  // const height = props.height || 400;
   const height = `${props.height || 400}px`;
   const width = props.width ? `${props.width}px` : 'auto';
-  return `
+  if (isFirst){
+    return `
     document.getElementById('main').style.height = "${height}";
     document.getElementById('main').style.width = "${width}";
-    var myChart = echarts.init(document.getElementById('main'));
+    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) {
-        if (val != null && typeof val == "object") {
-          if (seen.indexOf(val) >= 0) {
-            return;
-          }
-          seen.push(val);
-        }
-        return val;
-      });
-      window.postMessage(paramsString);
-    });
   `
+  }else{
+    return `
+    document.getElementById('main').style.height = "${height}";
+    document.getElementById('main').style.width = "${width}";
+    myChart.setOption(${toString(props.option)});
+  `
+  }
 }