echarts关系图配置,及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题

情景:由于人物关系复杂,可以有几个 ——几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空。所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度。如果还是超出(eg:节点或者关系多),可添加roam:true的属性实现可平移拖拽 / 缩放。(在下一节讲述)效果如图:数据:// 数据let data = { nodes = [ // {symbol: 'image://http://127.0.0.1:8080
摘要由CSDN通过智能技术生成

情景:由于人物关系复杂,可以有几个 ——几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空。所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度。如果还是超出(eg:节点或者关系多),可添加roam:true的属性实现可平移拖拽 / 缩放。(在下一节讲述)

效果如图:(图与下面配置的属性出来的效果不完全相符 ------- 因为配置会不定期更新)

修改高度

数据:

// 数据
let data = {
    nodes = [
        // {symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png'/ symbol: 'circle',symbolSize: 80, name: "李小璐", category: 0},
        {
            symbolSize: 80,
            name: "李小璐",
            category: 0
        },
        {
            symbolSize: 60,
            name: "贾乃亮",
            category: 1
        },
        {
            symbolSize: 40,
            name: "王子文",
            category: 2
        },
        {
            symbolSize: 60,
            name: "葛优",
            category: 1
        },
        {
            symbolSize: 40,
            name: "陈飞宇",
            category: 2
        },
        {
            symbolSize: 60,
            name: "乔任梁",
            category: 1
        },
        {
            symbolSize: 40,
            name: "赵英博",
            category: 2
        },
        {
            symbolSize: 60,
            name: "赵英俊",
            category: 1
        },
        {
            symbolSize: 40,
            name: "张杰",
            category: 2
        },
        {
            symbolSize: 40,
            name: "大鹏",
            category: 2
        },
        {
            symbolSize: 40,
            name: "王源",
            category: 2
        },
        {
            symbolSize: 40,
            name: "袁姗姗",
            category: 2
        },
        {
            symbolSize: 40,
            name: "徐峥",
            category: 2
        },
        {
            symbolSize: 40,
            name: "卢正雨",
            category: 2
        },
        {
            symbolSize: 40,
            name: "董成鹏",
            category: 2
        },
        {
            symbolSize: 40,
            name: "王宝强",
            category: 2
        },
        {
            symbolSize: 40,
            name: "李宇春",
            category: 2
        },
        {
            symbolSize: 40,
            name: "薛之谦",
            category: 2
        },
        {
            symbolSize: 40,
            name: "陈思诚",
            category: 2
        },
        {
            symbolSize: 40,
            name: "杨庆",
            category: 2
        },
        {
            symbolSize: 40,
            name: "赵本山",
            category: 2
        },
        {
            symbolSize: 40,
            name: "张靓颖",
            category: 2
        },
        {
            symbolSize: 40,
            name: "包贝尔",
            category: 2
        },
        {
            symbolSize: 40,
            name: "高超",
            category: 2
        },
        {
            symbolSize: 40,
            name: "李荣浩",
            category: 2
        },
        {
            symbolSize: 40,
            name: "张文",
            category: 2
        },
        {
            symb
  • 13
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值