supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 33 forks source link

使用dispatchAction函数触发datazoom的start,end值,图表并无变动,但在dataZoom事件里打印值是已经被修改的start和end #72

Closed zylgt closed 2 years ago

zylgt commented 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>
    );
  }
}
supervons commented 2 years ago

移除一下代码中的:

dataZoomId: "series00"

我可以成功触发。