升级兼容

.gitignore

@@ -1,2 +1,12 @@
-/node_modules
-*.sh
+logs/
+npm-debug.log
+yarn-error.log
+node_modules/
+package-lock.json
+yarn.lock
+coverage/
+.idea/
+run/
+.DS_Store
+*.sw*
+*.un~

package.json

@@ -26,6 +26,6 @@
   },
   "homepage": "https://github.com/somonus/react-native-echarts#readme",
   "dependencies": {
-    "echarts": "3.2.3"
+    "echarts": "^4.2.0-rc.1"
   }
 }

src/components/Container/index.js

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
-import { View } from 'react-native';
+import React, {Component} from 'react';
+import {View} from 'react-native';
 import styles from '../../style';
 
 export default class App extends Component {
-  render() {
-    return (
-      <View style={[styles.container, {width: this.props.width}]}>
-        {this.props.children}  
-      </View>
-    );
-  }
+    render() {
+        return (
+            <View style={[styles.container, {width: this.props.width}]}>
+                {this.props.children}
+            </View>
+        );
+    }
 }

src/components/Echarts/index.js

@@ -1,42 +1,38 @@
-import React, { Component } from 'react';
-import { WebView, View, StyleSheet, Platform } from 'react-native';
-import renderChart from './renderChart';
-import echarts from './echarts.min';
+import React, { Component } from "react";
+import { WebView, View } from "react-native";
+import renderChart from "./renderChart";
 
 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();
+    // 预防过渡渲染
+    shouldComponentUpdate(nextProps = {}, nextState) {
+        const thisProps = this.props || {};
+        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])) {
+                return true;
+            }
+        }
+        return 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>
-    );
-  }
+    render() {
+        const messageFn = this.props.onMessage || null;
+        return (
+            <View style={{ flex: 1, height: this.props.height || 400 }}>
+                <WebView
+                    ref="chart"
+                    scrollEnabled={false}
+                    scalesPageToFit={false}
+                    injectedJavaScript={renderChart(this.props)}
+                    style={{
+                        height: this.props.height || 400,
+                    }}
+                    onMessage={messageFn}
+                    source={require("./tpl.html")}
+                />
+            </View>
+        );
+    }
 }

src/components/Echarts/renderChart.js

@@ -1,30 +1,18 @@
-import echarts from './echarts.min';
-import toString from '../../util/toString';
-
 export default function renderChart(props) {
-  const height = `${props.height || 400}px`;
-  const width = props.width ? `${props.width}px` : 'auto';
-  return `
-    document.getElementById('main').style.height = "${height}";
-    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) {
-        if (val != null && typeof val == "object") {
-          if (seen.indexOf(val) >= 0) {
-            return;
-          }
-          seen.push(val);
+    const height = `${props.height || 400}px`;
+    const width = props.width ? `${props.width}px` : "auto";
+    return `
+    setTimeout(()=>{
+      document.getElementById('main').style.height = "${height}";
+      document.getElementById('main').style.width = "${width}";
+      var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
+      myChart.on('legendselectchanged',function(params){
+        params = params || {};
+        if(typeof window.postMessage  === 'function'){
+          window.postMessage(JSON.stringify(params))
         }
-        return val;
-      });
-      window.postMessage(paramsString);
-    });
-  `
+      })
+      myChart.setOption(${JSON.stringify(props.option)});
+    }, 100)
+  `;
 }

src/index.js

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