[Bug] 不通过toolbox 自己实现 toolbox中的框选回退功能。
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 15h 17m
- Merged PRs (30d)
- 5
Description
### 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 (
回退
);
}
export default MyChart;
```
### Current Behavior
none
### Expected Behavior

这个是我们的设计稿
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Research direction
Start with the supplied React reproduction and investigate the ECharts dataZoom and dispatchAction behavior used for manual rollback. Compare the datazoom event payload with the toolbox selection behavior; done means the custom button reliably restores the previous zoom range without adding a new history entry.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100