lvwang2002
/
react-native-echarts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2 from Anshiii/master 

魔改：添加点击图例的回调事件自定义
This commit is contained in:
WebBug 2018-07-16 19:34:25 +08:00 committed by GitHub
parent d2895266f7 bfcfd07eb3
commit 230b8aceca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Echarts/index.js
View File

@ -2,69 +2,73 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native'; import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart'; import renderChart from './renderChart';
import renderChartNoFirst from './renderChart' import renderChartNoFirst from './renderChart';
import echarts from './echarts.min'; import echarts from './echarts.min';
export default class App extends Component { export default class App extends Component {
// 预防过渡渲染 // 预防过渡渲染
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {} const thisProps = this.props || {};
nextProps = nextProps || {} nextProps = nextProps || {};
if (Object.keys(thisProps).length !== Object.keys(nextProps).length) { if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
return true return true;
} }
for (const key in nextProps) { for (const key in nextProps) {
if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) { if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
// console.log('props', key, thisProps[key], nextProps[key]) // console.log('props', key, thisProps[key], nextProps[key])
return true return true;
} }
} }
return false return false;
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) { if (nextProps.option !== this.props.option) {
// 解决数据改变时页面闪烁的问题
// 解决数据改变时页面闪烁的问题 this.refs.chart.injectJavaScript(renderChart(nextProps, false));
this.refs.chart.injectJavaScript(renderChart(nextProps,false))
} }
} }
render() { render() {
if (Platform.OS == 'android'){ const messageFn = this.props.onMessage || null;
if (Platform.OS == 'android') {
return ( return (
<View style={{flex: 1, height: this.props.height || 400,}}> <View style={{ flex: 1, height: this.props.height || 400 }}>
<WebView <WebView
ref="chart" ref="chart"
scrollEnabled = {false} scrollEnabled={false}
javaScriptEnabled={true} javaScriptEnabled={true}
injectedJavaScript = {renderChart(this.props,true)} injectedJavaScript={renderChart(this.props, true)}
style={{ style={{
height: this.props.height || 400, height: this.props.height || 400
}} }}
onMessage={messageFn}
//source={require('./tpl.html')} //source={require('./tpl.html')}
source={{uri: 'file:///android_asset/tpl.html'}} source={{ uri: 'file:///android_asset/tpl.html' }}
/> />
</View> </View>
); );
}else{ } else {
return ( return (
<View style={{flex: 1, height: this.props.height || 400,}}> <View style={{ flex: 1, height: this.props.height || 400 }}>
<WebView <WebView
ref="chart" ref="chart"
scrollEnabled = {false} scrollEnabled={false}
scalesPageToFit={false} scalesPageToFit={false}
injectedJavaScript = {renderChart(this.props,true)} injectedJavaScript={renderChart(this.props, true)}
style={{ style={{
height: this.props.height || 400, height: this.props.height || 400
}} }}
source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }} onMessage={messageFn}
source={
Platform.OS === 'ios'
? require('./tpl.html')
: { uri: 'file:///android_asset/tpl.html' }
}
/> />
</View> </View>
); );
} }
} }
} }

1
src/components/Echarts/renderChart.js
View File

@ -10,7 +10,6 @@ export default function renderChart(props,isFirst) {
return ` return `
document.getElementById('main').style.height = "${height}"; document.getElementById('main').style.height = "${height}";
document.getElementById('main').style.width = "${width}"; document.getElementById('main').style.width = "${width}";
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(${toString(props.option)}); myChart.setOption(${toString(props.option)});
` `
}else{ }else{

7
src/components/Echarts/tpl.html
View File

@ -79,6 +79,13 @@
<body> <body>
<div id="main" ></div> <div id="main" ></div>
<script> <script>
var myChart = echarts.init(document.getElementById('main'));
myChart.on('legendselectchanged',function(params){
if(typeof window.postMessage === 'function'){
window.postMessage(JSON.stringify(params))
}
})
function changeDigit(num = 0, digit = 2) { function changeDigit(num = 0, digit = 2) {
if (isNaN(num)) { if (isNaN(num)) {
return num; return num;