apache / apache/echarts

[Bug] 不通过toolbox 自己实现 toolbox中的框选回退功能。

Open
#18,866 3 comments 0 reactions 0 assignees View on GitHub
bug pending
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 (



回退
历史记录:{JSON.stringify(history)}


);
}

export default MyChart;
```

### Current Behavior

none

### Expected Behavior

![image](https://github.com/apache/echarts/assets/18644939/e81650bc-7dce-4b91-926c-de44bf704d61)

这个是我们的设计稿

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.