Incubator-echarts: 在graph关系图中，文字无法缩放。鼠标移入节点的鼠标样式无法更改。

Created on 10 Mar 2020 · 6Comments · Source: apache/incubator-echarts

Version
4.6.0

Steps to reproduce
①在graph图中，设置属性draggable: true, cursor: 'pointer'后，开启拖拽功能后设置的cursor属性无效。
②在graph图中，设置属性roam: true后，开启平移和缩放功能，进行缩放时，label的字体大小不会随缩放而缩放。

What is expected?
①开启拖拽功能后另支持鼠标样式的设置。
②开启缩放后，节点的字体大小可随画布的缩放而缩放。

What is actually happening?
目前不支持上述功能。

not-a-bug author

Source

lengxuan2018

Most helpful comment

已通过graphRoam实现：

 // 鼠标滚轮监听放大缩小
 myECharts.on('graphRoam', function(e) {
    const option = that.echartsGraph.getOption(); // 获得当前option.series的zoom
    const textPercent = (option.series[0].zoom - 0.8) / 0.8; // 计算比例,我设置zoom的初始值是0.8
    option.series[0].label.fontSize = 9 + 9 * textPercent // 等比例计算fontSize
    that.echartsGraph.setOption(option); // setOption
  });

同理可以加在toolbox内的自定义的“放大”和“缩小”按钮上

希望可以帮助到其他同学 😝

yuanzhou3118 on 28 Jun 2020

👍2

All 6 comments

文本不随节点缩放是故意设计成这样的，如果文本缩小到看不清会失去了文本显示的意义，如果文本变大了则显示效果会不好

pissang on 11 Mar 2020

有方法可以把文字设置成随图形缩放而缩放吗？

lengxuan2018 on 12 Mar 2020

@lengxuan2018 目前还不行，不过如果确实有需求的话可以考虑加入配置项

pissang on 16 Mar 2020

已通过graphRoam实现：

 // 鼠标滚轮监听放大缩小
 myECharts.on('graphRoam', function(e) {
    const option = that.echartsGraph.getOption(); // 获得当前option.series的zoom
    const textPercent = (option.series[0].zoom - 0.8) / 0.8; // 计算比例,我设置zoom的初始值是0.8
    option.series[0].label.fontSize = 9 + 9 * textPercent // 等比例计算fontSize
    that.echartsGraph.setOption(option); // setOption
  });

同理可以加在toolbox内的自定义的“放大”和“缩小”按钮上

希望可以帮助到其他同学 😝

yuanzhou3118 on 28 Jun 2020

👍2

我使用echarts-for-react来监听graphRoam没有反应