赵花花5070 2023-01-11 15:16 采纳率: 50%
浏览 30

echarts 桑基图

在开发桑基图的时候,想要实现如下效果,有什么好方式?

这是基础配置:


option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b} :{c}人"

    },
    series: {
        type: 'sankey',
        layout: 'none',
        nodeGap: 20,
        data: [
          {name: '测试企业'},
          {name: '测试'},
          {name: '高薪集团'},
          {name: 'A公司'},
          {name: 'A公司下的办公区'},
          {name: 'A公司下的办公1区'},
          {name: 'B公司'},
          {name: 'B公司下工厂1区'},
          {name: 'C公司'},
          {name: 'C1公司'},
          {name: 'C11公司'},
        ],
        links: [
                { "source": "测试企业", "target": "测试", "value": 625000 },
                { "source": "测试企业", "target": "高薪集团", "value": 407600 },
                { "source": "高薪集团", "target": "A公司", "value": 39840 },
                { "source": "A公司", "target": "A公司下的办公区", "value": 0 },
                { "source": "A公司", "target": "A公司下的办公1区", "value": 10 },
                { "source": "B公司", "target": "B公司下工厂1区", "value": 367760 },
                { "source": "高薪集团", "target": "B公司", "value": 367760 },
                { "source": "C1公司", "target": "C11公司", "value": 0 },
                { "source": "C公司", "target": "C1公司", "value": 0 },
                { "source": "高薪集团", "target": "C公司", "value": 0 }
        ],
        label: {
            normal: {
                color: "#656565",
                fontSize: 14,
            }
        },
        z: 0,
        levels: [{
            depth: 0,
            itemStyle: {
                color: '#fbb4ae'
            },
            lineStyle: {
                color: 'source',
                opacity: 0.6
            }
        }, {
            depth: 1,
            itemStyle: {
                color: '#b3cde3'
            },
            lineStyle: {
                color: 'source',
                opacity: 0.6
            }
        }],
        itemStyle: {
            borderWidth: 0,
        },
        lineStyle: {
            color: 'source',
            opacity: 0.25
        }

    }
};

当前配置运行效果:

img

变成如下效果

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-01-11 18:36
    关注
    评论

报告相同问题?

问题事件

  • 创建了问题 1月11日

悬赏问题

  • ¥15 php 同步电商平台多个店铺增量订单和订单状态
  • ¥15 关于logstash转发日志时发生的部分内容丢失问题
  • ¥17 pro*C预编译“闪回查询”报错SCN不能识别
  • ¥15 微信会员卡接入微信支付商户号收款
  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 Stata外部命令安装问题求帮助!
  • ¥15 从键盘随机输入A-H中的一串字符串,用七段数码管方法进行绘制。提交代码及运行截图。