Closed zylgt closed 2 years ago
react-native-echarts-pro【1.8.7】 react-native version【0.61.0】 react-native-webview 【7.4.3】 Platform【ios】 System【15.4】 Demo:
import React, { Component } from "react"; import { Text, View, } from "react-native"; import Echarts from "react-native-echarts-pro"; export default class StockInDetail extends Component { constructor(props) { super(props); this.state = { }; } highlight = () => { // 传入object,触发单个action this.chartRef.dispatchAction({ "batch": [{ "animation": {}, "batch": null, "dataZoomId": "series00", "end": 80, "start": 30, "type": "datazoom" }], "type": "dataZoom" },); }; render() { return ( <View style={{flex:1,justifyContent: 'center',alignItems: 'center'}}> <Echarts ref={ref=>this.chartRef=ref} option={ { xAxis: { type: 'category', boundaryGap: false, inverse:true, data:['2022/9/30','2022/9/29','2022/9/28','2022/9/27','2022/9/26','2022/9/25','2022/9/24','2022/9/23','2022/9/22','2022/9/21'], axisTick:{ show:false }, axisLine:{ show:false }, axisLabel:{ interval:3, formatter(value){ var date = new Date(value.replace(/-/g, '/')); var hour = date.getHours(); var minutes = date.getMinutes(); var month = date.getMonth()+1; var days = date.getDate(); if(month<10){ month = '0' + month } if(days<10){ days = '0' + days } return month+'/'+days; }, }, }, yAxis: { type: 'value', position:'right', offset:4, axisLine:{ show:false }, axisTick:{ show:false }, splitLine:{ lineStyle:{ type:'dashed', color:'#ccc' } }, min:0, max:150, boundaryGap: [0, '100%'] }, animation:false, dataZoom: [ { type: 'inside', minValueSpan:5, start: 0, throttle:0, end: 10 }, { start: 0, end:10 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, data: [50,70,80,90,30,40,56,67,78,87] } ] } } height={300} eventActions={{ dataZoom:(params)=>{ console.log(params) } }} /> <Text onPress={this.highlight}>外部触发action</Text> </View> ); } }
移除一下代码中的:
dataZoomId: "series00"
我可以成功触发。
react-native-echarts-pro【1.8.7】 react-native version【0.61.0】 react-native-webview 【7.4.3】 Platform【ios】 System【15.4】 Demo: