apache / apache/echarts

[Bug] setOption frequently will lead to legend click failure

Open
#20,882 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.6.0

### Link to Minimal Reproduction

1

### Steps to Reproduce

when i use react useEffect to update series frequently such as every 60ms
than i can not click legend
i want to toggle legend when series update

### Current Behavior

1

### Expected Behavior

1

### Environment

```markdown
- OS:mac OS 15.3.1
- Browser: Chrome
- Framework: react 18.3
```

### Any additional comments?

const StCharts: React.FC = ({ playTime }) => {
const stContainer = useRef(null);
const chartRef = useRef(null);

const handleLegendSelect = (params: any) => {
// 当图例切换时强制重渲染
console.log("chartRef==", params, chartRef.current?.getOption());
};

useEffect(() => {
if (stContainer.current) {
chartRef.current = echarts.init(stContainer.current, {
animation: false,
chartEvent: [{ type: "legendselectchanged", handler: handleLegendSelect }],
});
const option = baseOption;
option && chartRef.current.setOption(option);
}
}, []);

useEffect(() => {
if (chartRef.current) {
const chartsData = dataManager.getStData(playTime, legends);
const series = legends.map((name) => ({
data: chartsData[name] || [],
}));

chartRef.current.setOption({ series });
}
}, [playTime]); // every 60ms i will update the chart

return ;
};

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.