diff --git a/.gitignore b/.gitignore
index dbe9c43..9154f84 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
/node_modules
*.sh
+# webstorm
+.idea
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 (
-
- this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
- />
-
- );
+ if (Platform.OS == 'android'){
+ return (
+
+
+
+ );
+ }else{
+ return (
+
+
+
+ );
+ }
+
}
}
diff --git a/src/components/Echarts/renderChart.js b/src/components/Echarts/renderChart.js
index 8592749..54b7fb0 100644
--- a/src/components/Echarts/renderChart.js
+++ b/src/components/Echarts/renderChart.js
@@ -1,30 +1,24 @@
+// 修改后
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.clear();
+ myChart.setOption(${toString(props.option)});
+ `
+ }
}
diff --git a/src/components/Echarts/tpl.html b/src/components/Echarts/tpl.html
index ca20a31..556599d 100644
--- a/src/components/Echarts/tpl.html
+++ b/src/components/Echarts/tpl.html
@@ -19,41 +19,72 @@
}
+
diff --git a/src/util/toString.js b/src/util/toString.js
index b4a6904..e0611db 100644
--- a/src/util/toString.js
+++ b/src/util/toString.js
@@ -1,13 +1,14 @@
export default function toString(obj) {
let result = JSON.stringify(obj, function(key, val) {
- if (typeof val === 'function') {
- return `~--demo--~${val}~--demo--~`;
- }
- return 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;
+ do {
+ result = result.replace('\"~--demo--~', '').replace('~--demo--~\"', '');
+ } while (result.indexOf('~--demo--~') >= 0);
+ result = result.replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
+ return result;
}