ximi66 opened a new issue, #18866:
URL: https://github.com/apache/echarts/issues/18866
### Version
5.4.2
### Link to Minimal Reproduction
wu
### Steps to Reproduce
```
import React, { useState } from 'react';
import ReactECharts from 'echarts-for-react'
const data = [
{
name: '231424',
value: 112312
},
{
name: 'e',
value: 112312
},
{
name: 'r',
value: 112312
}, {
name: 'sd',
value: 112312
}, {
name: '534',
value: 112312
},
]
function MyChart() {
const [chartInstance, setChartInstance] = useState(null);
const [history, setHistory] = useState([]);
// 处理回退事件
function handleBack() {
const last = history[history.length - 1];
if (!last) return;
// 为什么这个dispatchAction 失效了？？？？？？？？？？？？？
chartInstance.dispatchAction({
...last,
type: 'dataZoom',
from: 'back'
});
setHistory(prev => prev.slice(0, -1));
}
// 处理数据区间选择事件
function handleDataZoom(params) {
// 如果是回退事件，则不记录历史
if (params.from === 'back') return;
setHistory(prev => [...prev, params]);
}
// 配置ECharts的选项
const option = {
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
toolbox: {
feature: {
dataZoom: {}
}，
iconStyle: {
opacity: 0
}
},
series: [
{
type: 'line',
data: data.map(item => item.value)
}
]
};
// 保存图表实例
function handleChartReady(chart) {
setChartInstance(chart);
// 触发数据区间选择事件
chart.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true, // 允许缩放
});
// 监听数据区间选择器的变化
chart.on('datazoom', handleDataZoom);
}
return (
<div>
<ReactECharts
option={option}
style={{ height: '400px' }}
onChartReady={handleChartReady}
/>
<button onClick={handleBack}>回退</button>
<div>历史记录：{JSON.stringify(history)}</div>
</div>
);
}
export default MyChart;
```
### Current Behavior
none
### Expected Behavior
这个是我们的设计稿
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
