echarts报错分析汇总

本文分析了Echarts在绘制桑基图时遇到的节点重复ID错误,以及拖拽操作导致的样式错乱和文字变大问题。解决方案包括为每个节点添加唯一ID以避免重复,并检查是否存在引入多个版本的Echarts库导致的冲突。通过调整代码结构,成功解决了样式异常,确保了图表的正常显示。

echart 节点重复报错—echarts2.js:60988 Graph nodes have duplicate name or id

nodes: [{
    name: '操作系统集团',
    category: 0
  }, {
    name: '浏览器有限公司',
    category: 0
  }, {
    name: 'HTML科技',
    category: 0
  }, {
    name: 'JavaScript科技',
    category: 0
  }, {
    name: 'CSS科技',
    category: 0
  }, {
    name: 'Chrome',
    category: 1
  }, {
    name: 'IE',
    category: 1
  }, {
    name: 'Firefox',
    category: 1
  }, {
    name: 'Safari',
    category: 1
  }],
  
  links: [{
    source: '浏览器有限公司',
    target: '操作系统集团',
    name: '参股'
  }, {
    source: 'HTML科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'CSS科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'JavaScript科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'Chrome',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'IE',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'Firefox',
    target: '浏览器有限公司'}]

解决方案:
加上一个id,用id进行匹配,新的结构:

nodes: [{
    name: '操作系统集团',
    id:1,
    category: 0
  }, {
    name: '浏览器有限公司',
    id:2,
    category: 0
  }, {
    name: 'HTML科技',
    id:3,
    category: 0
  }]

这样可以实现name重复节点的展示

参考:https://blog.csdn.net/weixin_44237806/article/details/124634219

桑基图-拖拽时出现样式错乱,文字变大

可能是引入多个版本导致的错误,去掉一个即可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值