echarts [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

zynd9foi  于 3个月前  发布在  Echarts
关注(0)|答案(4)|浏览(64)

Version

5.3.3

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

1qczuiv0

1qczuiv01#

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

eufgjt7s2#

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.

1sbrub3j

1sbrub3j3#

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.

mpgws1up

mpgws1up4#

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:

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;

相关问题