echarts-bot[bot] commented on issue #18866:
URL: https://github.com/apache/echarts/issues/18866#issuecomment-1627319925
@ximi66 It seems you are not using English, I've helped translate the
content automatically. To make your issue understood by more people and get
helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] Realize the frame selection fallback function in the toolbox through
dispatch.
**BODY**
### 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([]);
// Handle the fallback event
function handleBack() {
const last = history[history. length - 1];
if (!last) return;
// Why does this dispatchAction fail? ? ? ? ? ? ? ? ? ? ? ? ?
chartInstance. dispatchAction({
...last,
type: 'dataZoom',
from: 'back'
});
setHistory(prev => prev. slice(0, -1));
}
// Handle the data range selection event
function handleDataZoom(params) {
// If it is a rollback event, no history is recorded
if (params. from === 'back') return;
setHistory(prev => [...prev, params]);
}
// Configure the options of 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)
}
]
};
// save the chart instance
function handleChartReady(chart) {
setChartInstance(chart);
// Trigger data range selection event
chart. dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true, // allow zooming
});
// Monitor changes in the data range selector
chart.on('datazoom', handleDataZoom);
}
return (
<div>
<ReactECharts
option={option}
style={{ height: '400px' }}
onChartReady={handleChartReady}
/>
<button onClick={handleBack}>Back</button>
<div>History: {JSON.stringify(history)}</div>
</div>
);
}
export default MyChart;
```
### Current Behavior
none
### Expected Behavior
This is our design draft
### Environment
```markdown
- OS:
-Browser:
- Framework:
```
### Any additional comments?
_No response_
</details>
--
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]
