apache / echarts

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

[Bug] series-graph.labelLayout. hideOverlap设置为true后links的label显示异常 #18149

Open guan-xiong opened 1 year ago

guan-xiong commented 1 year ago

Version

5.4.0

Link to Minimal Reproduction

No response

Steps to Reproduce

  1. 使用的是官方示例,代码如下

    myChart.showLoading();
    $.get(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
    myChart.hideLoading();
    graph.nodes.forEach(function (node) {
    node.symbolSize = 5;
    });
    
    option = {
    title: {
      text: 'Les Miserables',
      subtext: 'Default layout',
      top: 'bottom',
      left: 'right'
    },
    tooltip: {},
    legend: [
      {
        // selectedMode: 'single',
        data: graph.categories.map(function (a) {
          return a.name;
        })
      }
    ],
    series: [
      {
         labelLayout: {
          "hideOverlap": true
         },
        name: 'Les Miserables',
        type: 'graph',
        layout: 'force',
        data: graph.nodes,
        links: graph.links,
        categories: graph.categories,
        roam: true,
        label: {
          position: 'right'
        },
        edgeLabel:{
          show:true,
          formatter:params=>{
            return "测试"
          }
        },
        force: {
          repulsion: 100
        }
      }
    ]
    };
    myChart.setOption(option);
    });

Current Behavior

默认运行时关系线的名称显示位置有误 echarts官方示例截图1 缩放时,图变小,关系线名称变大,图变大,关系名称变小 echarts官方示例截图2

Expected Behavior

应当保持和未设置series-graph.labelLayout. hideOverlap为true一样的效果。

Environment

- OS:windows 10
- Browser:Microsoft Edge 版本 108.0.1462.76 (正式版本) (64 位)
- Framework:vue@3

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@guan-xiong 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] series-graph.labelLayout. When hideOverlap is set to true, the label of links displays an exception
PoloWitty commented 1 year ago

I meet the same problem as you, and I found that no matter true or false the 'hideOverlap' is, this bug will occur. And this bug will occur after you add labelLayout: {"hideOverlap": true} option even on the simple graph of official demo image

Looking forward to fixing.

gaowj136 commented 1 month ago

我遇到了和你一样的问题