diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js index 6ce885f..c4e70a7 100644 --- a/src/components/Echarts/index.js +++ b/src/components/Echarts/index.js @@ -4,12 +4,23 @@ import renderChart from './renderChart'; import echarts from './echarts.min'; 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(); } } + setNewOption(option) { + this.refs.chart.postMessage(JSON.stringify(option)); + } + render() { return ( diff --git a/src/components/Echarts/renderChart.js b/src/components/Echarts/renderChart.js index c63abc1..8592749 100644 --- a/src/components/Echarts/renderChart.js +++ b/src/components/Echarts/renderChart.js @@ -9,6 +9,10 @@ export default function renderChart(props) { 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) { diff --git a/src/index.js b/src/index.js index 7e4f8ec..bc6a869 100644 --- a/src/index.js +++ b/src/index.js @@ -3,10 +3,15 @@ import { WebView, View } from 'react-native'; import { Container, Echarts } from './components' export default class App extends Component { + + setNewOption(option) { + this.chart.setNewOption(option); + } + render() { return ( - + this.chart = e}/> ); }