性能优化

src/components/Echarts/index.js

@@ -17,13 +17,6 @@ export default class App extends Component {
         return false;
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.option !== this.props.option) {
-            // 解决数据改变时页面闪烁的问题
-            this.refs.chart.injectJavaScript(renderChart(nextProps, false));
-        }
-    }
-
     render() {
         const messageFn = this.props.onMessage || null;
         return (
@@ -32,7 +25,7 @@ export default class App extends Component {
                     ref="chart"
                     scrollEnabled={false}
                     scalesPageToFit={false}
-                    injectedJavaScript={renderChart(this.props, true)}
+                    injectedJavaScript={renderChart(this.props)}
                     style={{
                         height: this.props.height || 400,
                     }}

src/components/Echarts/renderChart.js

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

src/util/toString.js

@@ -1,13 +0,0 @@
-export default function toString(obj) {
-  let result = JSON.stringify(obj, function(key, val) {
-        if (typeof val === 'function') {
-            return `~--demo--~${val}~--demo--~`;
-        }
-        return val;
-    });
-
-    do {
-        result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
-    } while (result.indexOf('~--demo--~') >= 0);
-    return result;
-}