[Bug] series多的时候,偶现高亮某条线后,其他线的颜色变暗后恢复不了
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.2.2
### Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?code=fVZvT9tGGH_PpzhFk0gGgSSUKQtj0rT2xaRVndRpk4aQ6pKDWIrtyL6sARQp679lIh2M0aGRAgqtQtZNkA7UhhDol8nZySu-Qp87O7EvDrWiJL57_tzz-_2eu1vMqgtE1lS0hFWsSwTf-jol6cS4k2GjQY3_GGgWreZDaHUEwbMAA8T5zx6DgMP3soLBKhCLxKbD0Wg4FkeRSIJ_AuN9U6wmfYafDzNc0TTl7nVxpxNT037zW0Nix1F0ymesZpVvZRWzoqZiwvB3mqwSNh6Lx_l4Hv47EMyM8JHJSdQ5fGnubZiFc3P7bXf7lLYK9HCNbpas8z_N3f12o4luAo6IHp913lSuWsV2o0Bf_QP2nXc12qxetX7zwEg0IqV5pdxpFqn4AfcP9mENzQzaQ6mD1g6yftubWWCVETwr-oYHUs-w0szjf63DTfruiBZasHLa3GLlxG4gWl-HaiFG_LMbEfYgxRALAeSw_rOU7uXp551EQRfaMIqGnEzr7cZr6-EZINjd2WLJdn-lpQItPqWNR_RFzUaN5ejhbm3tm8UNB_TmOi1ug1cOdS5Ozed189nRVavUqT61yn_RJzXH1YMFgAOIKhlG79y8DdOipqNgGsPiYTAyAz9fuDKA17GxnuaHBPKiL0I5sYQ5ccEQGoOYn_axcdhhj7ueiUzWSAX7766zDVT74r21VbOJsWs3iye2OAeQATUjc7diNd9bO497kBS7O-vmiyZaRpzSklmrmGv7vVkvQgbWZd4UPnTS0C3fqEmcs1FyXzlavJc8o8NAS0pE8kQWomcY2p7wnneBDXdczOBgINZZbF-u0epDKDgSjoJaO6VHtHwKr7RRBWW1m2X692v6st6DQFzufcnAP0jpLOuw6QiQeFsiqQlDVoOexU2iKJvq1x0ComOwflgL3W9alYJ5ckAvDoaEVzXZYKGDPKwuqUlNAa2EUWRimkWJOlH4CgV_hqOtlzlXQHPuoubHPWsfsxPNe1SXdzdtzrYdS8RSlRScQPdARiAm9MmqS_cYiubvuRsml_FyBoxHmc2oOLOS8AgFPMc5SyuIvtkzC4fty13zv0q3sEkP9hhb57-jKKLFOmh4kBJWc4J_iwn4E8BKJiUZshFIDEiCzy5qC1k2FbDLDQgWeTGeoWgaSSUQ0bN4nOO_cQydR89OzPM_zPL_AIhgz6q7S5bTUL8_8wM5yWJFxYQuDw4nbgs7x65z2qDuk2fWxZGnO_GC51hmx7FnJyH-NRCcI8BLf0eg5UvrVROaAsCGww3Bxmvvlb1ttsQA_gmOUdT5Zcd6XEVxZ88HOkbddbuQEU1LEznjS6zLS0tYh9xSTjaGeqYx3DWSg442zY4sFSkThK3oS2RMMDmGRKbua4RoCqAbGRa-V0gCzQlefpJs8QZk1ZCT2HNBEC42vJcS4oXEbwoFeQydq4jfjE3eUW9rWQP_mMI4bavtGpHMu_65rwBMH9R277GNYKD37BYetY8LdrT2DsShfCx_JDgcWtnroj-vw1Y7NKLNYo9NW-nO_UnHJKuropxnRqAPHOHPXnMRDX0A&enc=deflate
### Steps to Reproduce
function generateEChartsOption(options = {}) {
const {
startTime = "2025-11-28 00:00:00",
endTime = "2025-11-29 00:00:00",
zoomStartTime = "2025-11-28 05:35:00",
zoomEndTime = "2025-11-28 13:35:00",
numLines = 32,
numPoints = 288
} = options;
// 解析总时间开始和结束为 Date 对象(一天总跨度)
const totalStartDate = new Date(startTime);
const totalEndDate = new Date(endTime);
const totalDuration = totalEndDate - totalStartDate; // 毫秒差值(应为 24 小时 = 86400000 ms)
const interval = totalDuration / (numPoints - 1); // 每个点间隔(均匀分布在一天)
// 生成时间序列(x 轴数据,覆盖全天)
const timestamps = [];
for (let i = 0; i < numPoints; i++) {
const timestamp = new Date(totalStartDate.getTime() + i * interval);
timestamps.push(timestamp.getTime()); // 使用毫秒时间戳
}
// 生成 32 条线的数据(随机 y 值,模拟数据)
const series = [];
for (let lineIndex = 0; lineIndex < numLines; lineIndex++) {
const data = [];
for (let pointIndex = 0; pointIndex < numPoints; pointIndex++) {
// 随机 y 值(例如,0-100 范围,带一些噪声)
const baseValue = 50 + Math.sin(pointIndex / 10 + lineIndex) * 20; // 基础波形
const noise = (Math.random() - 0.5) * 10; // 噪声
data.push([timestamps[pointIndex], baseValue + noise]);
}
series.push({
name: `线条 ${lineIndex + 1}`,
type: 'line',
z: lineIndex + 1, // z 属性依次递增(从 1 到 32)
data: data,
"emphasis": {
"focus": "series"
},
smooth: true, // 启用平滑曲线
lineStyle: {
width: 1
}
});
}
// ECharts option 配置
const echartsOption = {
title: {
text: '32 条线图示例(288 点覆盖一天,dataZoom 聚焦 8 小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: series.map(s => s.name),
bottom: 10
},
dataZoom: [
{
type: "inside",
startValue: zoomStartTime,
endValue: zoomEndTime,
zoomOnMouseWheel: true
}
],
xAxis: {
type: 'time',
name: '时间(全天)'
},
yAxis: {
type: 'value',
name: '数值'
},
series: series
};
return echartsOption;
}
option = generateEChartsOption()
### Current Behavior
偶现线条变暗后恢复不了
### Expected Behavior
线条恢复正常颜色
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Research direction
Start with the linked minimal reproduction and the generateEChartsOption setup, especially emphasis.focus: "series", z ordering, and the inside dataZoom configuration. Reproduce repeated highlighting with 32 lines, then trace the highlight and unhighlight rendering path; done means every non-focused line returns to its normal color after focus is cleared.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100