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..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)}); + ` + } }