echarts
echarts copied to clipboard
[Bug] dispatchAction select with dataIndex, but some nodes that are not in the array but have the same name as a node in the array are selected
Version
5.3.3
Link to Minimal Reproduction
https://codesandbox.io/s/les-miserables-forked-xz43i6?file=/index.js
Steps to Reproduce
See detail in the Minimal Reproduction.
- The graph have simple nodes and links, root -> a -> b, root -> c -> a. There two nodes with same name
a
but different id. - Minimal Reproduction will auto select nodes
a, c, root
in 3 seconds after the chart finished.
Current Behavior
When select node a
with id 4, the other node a
with id 1 is selected.
Expected Behavior
If I use dispatchAction
funciton with name
attribute [a] or a
, selected all nodes named a
is right. But when I use the function with dataIndex
attribute, it should only select the specific node.
Environment
- OS: Mac OS X 10_15_7
- Browser: Chrome/104.0.0.0
- Framework: doesn't matter.
Any additional comments?
No response
In case the link expires.
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var option = {
animationDuration: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
name: "simple force",
type: "graph",
layout: "force",
data: [
{ id: 0, name: "root", symbolSize: 30 },
{ id: 1, name: "a" },
{ id: 2, name: "b" },
{ id: 3, name: "c" },
{ id: 4, name: "a" }
],
links: [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 0, target: 3 },
{ source: 3, target: 4 }
],
label: {
show: true,
position: "right",
formatter: "{b}"
},
selectedMode: "multiple",
select: {
disabled: false,
itemStyle: {
color: "red"
}
}
}
]
};
myChart.setOption(option);
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
myChart.on("finished", () => {
setTimeout(() => {
myChart.dispatchAction({
type: "select",
dataIndex: [4, 3, 0]
});
}, 3000);
});
I think this is not a bug. In Apache ECharts, series/data with the same name
means intentionally set them to be the same group. For example, if you set the name to be the same for a pie series, the data with the same name share the same color and they all dispears on legend toggling. So I think disapactAction
should work similarly and this is by design.
This means you set name as the key of node. Ok, I can set label {c}
, and the name of node not duplicate.
I have a suggestion:
-
- Modify the document in image above,
数据项名称
->数据项名称(键值)
. It is easy to misunderstand that this value is label, not a key.
Besides this, I think my question is still a bug. If I use dataName
in dispatchAction function, you select nodes by name
is right. But I use dataIndex
in the funciton, the result should be the node with specific index is highlight, not get the node with index then get the same name nodes.
I think this is not a bug. In Apache ECharts, series/data with the same
name
means intentionally set them to be the same group. For example, if you set the name to be the same for a pie series, the data with the same name share the same color and they all dispears on legend toggling. So I thinkdisapactAction
should work similarly and this is by design.
I have another similar question about the same 'name'
As follows
When there are two connect "group" line charts, I only click to close the legend of one line chart with the same name, and the legend of the other line chart is also closed;
A example :https://codepen.io/hongdeyuan/pen/yLjXPXv
As shown in the picture:
Whether it is possible to connect only the hover event, but not the click event Therefore, I think whether Apache ECharts can provide a "group" for each mouse event separately, so that users can control mouse events that need to be connect “group” in a more granular way;