echarts icon indicating copy to clipboard operation
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

Open weihaopeng opened this issue 2 years ago • 4 comments

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.

  1. The graph have simple nodes and links, root -> a -> b, root -> c -> a. There two nodes with same name a but different id.
  2. 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

weihaopeng avatar Aug 26 '22 09:08 weihaopeng

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);
});

weihaopeng avatar Aug 26 '22 09:08 weihaopeng

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.

Ovilia avatar Aug 26 '22 09:08 Ovilia

This means you set name as the key of node. Ok, I can set label {c}, and the name of node not duplicate.

image

I have a suggestion:

  • image
  • 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.

weihaopeng avatar Sep 01 '22 04:09 weihaopeng

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.

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: image

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;

hongdeyuan avatar Sep 20 '22 13:09 hongdeyuan