apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.63k stars 19.61k forks source link

[Bug] 点击事件无效 #20514

Open yynyynyyn opened 1 day ago

yynyynyyn commented 1 day ago

Version

5.5.1

Link to Minimal Reproduction

1

Steps to Reproduce

创建折线图,点击事件无效

Current Behavior

const initChart = async () => { myChart.value = echarts.init(chart.value); myChart.value.setOption({ tooltip: { trigger: "axis", backgroundColor: "rgba(50,50,50,0.7)", textStyle: { color: "#ffffff" }, }, legend: { data: ["入场", "出场", "禁止"], top: "4%", itemWidth: 10, itemHeight: 10, icon: "circle", // 可以选择 'circle', 'rect', 'roundRect', 'triangle' 等 itemStyle: { borderWidth: 2, }, selectedMode: "multiple", textStyle: { color: "#ffffff", padding: [0, 0, 0, 8], }, itemGap: 20, itemStyle: { borderWidth: 2, shadowBlur: 5, // 发光模糊程度 shadowColor: "#05e8fe", // 发光颜色 }, }, grid: { left: "3%", right: "4%", bottom: "5%", containLabel: true, }, xAxis: { type: "category", boundaryGap: false, data: Array.from({ length: 30 }, (_, i) => ${i + 1}日), axisLine: { lineStyle: { color: "#ccc" } }, axisLabel: { color: "#cccccc" }, }, yAxis: { type: "value", name: "次数", nameTextStyle: { color: "#cccccc" }, axisLine: { lineStyle: { color: "#ccc" } }, axisLabel: { color: "#cccccc" }, splitLine: { lineStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: "#05e8fe" }, { offset: 0.5, color: "#0a74da" }, { offset: 1, color: "#05e8fe" }, ]), type: "dashed", // 设置为虚线 width: 1.4, // 调整线条宽度 opacity: 0.4, // 调整透明度,使其更柔和 }, }, }, series: [ { name: "入场", type: "line", smooth: true, lineStyle: { color: "#3B9FF7" }, areaStyle: { color: "rgba(59, 159, 247, 0.2)" }, data: Array.from({ length: 30 }, () => Math.floor(Math.random() 50)), itemStyle: { color: "#3B9FF7", borderColor: "rgba(59, 159, 247, 0.8)", borderWidth: 2, shadowBlur: 10, shadowColor: "rgba(59, 159, 247, 0.8)", }, }, { name: "出场", type: "line", smooth: true, lineStyle: { color: "#F5C842" }, areaStyle: { color: "rgba(245, 200, 66, 0.2)" }, data: Array.from({ length: 30 }, () => Math.floor(Math.random() 50)), itemStyle: { color: "#F5C842", borderColor: "rgba(245, 200, 66, 0.8)", borderWidth: 2, shadowBlur: 10, shadowColor: "rgba(245, 200, 66, 0.8)", }, }, { name: "禁止", type: "line", smooth: true, lineStyle: { color: "#F24C4E" }, areaStyle: { color: "rgba(242, 76, 78, 0.2)" }, data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 50)), itemStyle: { color: "#F24C4E", borderColor: "rgba(242, 76, 78, 0.8)", borderWidth: 2, shadowBlur: 10, shadowColor: "rgba(242, 76, 78, 0.8)", }, }, ], });

// 鼠标移入事件 myChart.value.on("click", (params) => { console.log('点击事件', params); }); };

Expected Behavior

点击无效 鼠标事件同样

Environment

- OS:win 11
- Browser: Chrome 130.0.6723.117
- Framework: vue@3

Any additional comments?

No response

echarts-bot[bot] commented 1 day ago

@yynyynyyn 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. 🤗

TRANSLATED
**TITLE** [Bug] Click event is invalid
Ovilia commented 21 hours ago

Please not that events trigger only with series data items. For line series, it means clicking the line will not trigger events.

helgasoft commented 15 hours ago

add triggerLineEvent