echarts树图修改连线样式颜色，树的形状曲线和折线，树图边的曲度

已于 2022-11-09 08:48:24 修改
阅读量3.8k 收藏 19
点赞数 7
分类专栏： echarts 文章标签： echarts树图 修改连线样式颜色 修改树的形状 曲线和折线 修改树图边的曲度
于 2022-06-10 19:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36509946/article/details/125220933
版权

具体效果如下，修改了连线颜色

 主要代码如下：

/**
     * 遍历数节点
     */
    function readNodes (nodes) {
        for (let item of nodes) { // js遍历树形数组结构
            console.log('item', item)
            if (item.children && item.children.length){
                readNodes(item.children)
            }
            if (item.id == 1 || item.id == 14) {
                // 修改连线颜色
                item.lineStyle = {
                    color: '#2E8B57'
                }
            } else {
                item.lineStyle = {
                    color: '#ff0000'
                }
            }
        }
    }
    readNodes([data]); // 调用时，要给data加[],因为原本的data不是一个正常的数组结构

代码布局如下：

 如果想要修改连线的其它样式，可以参考下方对官网的截图，可修改的属性不是很多，修改方法和颜色一致

在之后的开发中，有需求将树的曲线变成折线，于是乎，找到了了以下方法：

edgeShape: 'polyline',

 加了之后，没毛病，树图是由曲线变成了折线，但是可以看出来，下图的bug，就是连线的颜色变化不对

 这个bug我没有找到解决方法，如果有大佬知道为什么，欢迎下方评论解惑。

于是乎，我又找了别的可以让曲线边直的方法，官方是有给修改连线曲度的方法，如下

lineStyle: {
     color: '#2E8B57',
     curveness: 0, // 修改树的曲度
},

 代码中试了一下，效果如下：

总之实现是可以实现，但是效果都有点不敬人意，如果有大佬看到这篇文章，有什么好的方法，可以下方评论区说道说道

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <!--2.0版本的echarts不兼容高亮-->
    <!--<script type="text/javascript" src="js/echars.js"></script>-->
    <!--直接cdn引入的echarts-->
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        *{padding: 0;margin: 0;}
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="tree-container">
    <div id="main" style="width: 1000px;height:600px;"></div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = {
        "id": "0",
        "name": "外部网络",
        "type":"Internet",
        "symbol": 'image://image/internet.png',
        "children": [
            {
                "id": "1",
                "name": "交换机",
                "type":"switch",
                "IP":"192.168.30.126",
                "MAC":"b0:98:6e:bf:6r:4c",
                "deviceType":"交换机",
                "deviceNum":"HUAWEI",
                "symbol": 'image://image/switch.png',
                "children": [
                    {
                        "id": "2",
                        "name": "笔记本",
                        "type":"switch",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "symbol": 'image://image/network.png',
                    },
                    {
                        "id": "3",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "symbol": 'image://image/computer.png',
                        "children": [
                            {
                                "id": "4",
                                "name": "计算机1",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "5",
                                "name": "计算机2",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "6",
                                "name": "计算机3",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "symbol": 'image://image/computer.png',
                            },
                            {
                                "id": "7",
                                "name": "计算机4",
                                "type":"computer",
                                "IP":"192.168.30.126",
                                "MAC":"b0:98:6e:bf:6r:4c",
                                "lastLoginTime":"2020-8-26",
                                "symbol": 'image://image/computer.png',
                            }
                        ]
                    },
                    {
                        "id": "8",
                        "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "symbol": 'image://image/rooter.png',
                    },
                    {
                        "id": "9",
                        "name": "服务器",
                        "type":"service",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"服务器",
                        "symbol": 'image://image/service.png',
                    },
                    {
                        "id": "10",
                        "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "symbol": 'image://image/print.png',
                    },
                    {
                        "id": "11",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/computer.png',
                    }
                ]
            },
            {
                "id": "12",
                "name": "无线交换机",
                "type":"switch",
                "IP":"192.168.30.126",
                "MAC":"b0:98:6e:bf:6r:4c",
                "deviceType":"交换机",
                "deviceNum":"HUAWEI",
                "symbol": 'image://image/switch.png',
                "children": [
                    {
                        "id": "13",
                        "name": "手机",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "symbol": 'image://image/phone.png',
                    },
                    {
                        "id": "14",
                        "name": "平板",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"平板",
                        "symbol": 'image://image/phone.png',
                    }
                ]
            },
            {
                "id": "15",
                "name": "hub",
                "type":"hub",
                "symbol": 'image://image/hub.png',
                "children": [
                    {
                        "id": "16",
                        "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"计算机",
                        "symbol": 'image://image/computer.png',
                    },
                    {
                        "id": "17",
                        "name": "笔记本",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "symbol": 'image://image/phone.png',
                    },
                    {
                        "id": "18",
                        "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "symbol": 'image://image/print.png',
                    },
                    {
                        "id": "19",
                        "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "symbol": 'image://image/rooter.png',
                    }
                ]
            }
        ]
    };
    //		页面初始化的时候,隐藏奇数位的子节点
    //		echarts.util.each(data.children, function (datum, index) {
    //	        index % 2 === 0 && (datum.collapsed = true);
    //	    });
    //         console.log('data',data);
    // 		console.log('link',link);
    var option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            enterable:true,//鼠标是否可进入提示框浮层中
            formatter:formatterHover,//修改鼠标悬停显示的内容
        },
        toolbox: {
            show: true,
            top:20,
            left:20,
            feature: {
                restore: {
                    title:'刷新'//刷新echarts图标
                },
                saveAsImage: {
                    title:'下载图片',//鼠标悬停在下载图标上时，显示的文字
                    name:'network-topology'//下载图片的文件名为network-topology.png
                }
            }
        },
        series: [
            {
                type: 'tree',
                data: [data],
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                // edgeShape: 'polyline', // 修改树的形状为折线
                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    color: '#666',
                    fontSize: 9
                },
                lineStyle: {
                    color: '#2E8B57',
                    curveness: 1, // 修改树的曲度
                },
                orient: 'LR',
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                symbolSize: [30, 30],
                edgeForkPosition: "72%",
                emphasis: { // 高亮
                    focus: 'descendant'
                },
                initialTreeDepth:2, // 树图初始展开层级
                roam:true,//鼠标缩放，拖拽整颗树
                expandAndCollapse: true,//无关的子树折叠收起
                animationDuration: 550,
                animationDurationUpdate: 750,
                width: "50%"//组件宽度
            }
        ]
    };
    /**
     * 鼠标悬停时显示详情
     */
    function formatterHover(params){
        // console.log(params.collapsed);
        var deviceType = params.data.type;
        var imgPath = params.data.symbol;
        //图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址
        var imgPathSrc = imgPath.split("image://")[1];
        // console.log('str',imgPathSrc);
        if (deviceType === 'Internet' || deviceType === 'hub'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding:0 5px;font-size: 14px;">'+ params.data.name+'</span>';
        }  if (deviceType === 'switch'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：'+ params.data.IP+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：'+ params.data.MAC+'</span>'+ '<br>';
                // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> IP列表</button>'
                // +'<button style="padding:2px 5px;border:none;outline:none;color:#ffffff;border-radius: 5px;background:rgba(0,0,0,0.5);margin-left: 10px;"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MAC列表</button>';
        }else{
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="padding: 0 5px;font-size: 14px;">设备类型：'+ params.data.name+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">IP：'+ params.data.IP+'</span>'+ '<br>'
                + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;font-size: 14px;">MAC：'+ params.data.MAC+'</span>'+ '<br>';
        }
    }
    /**
     * 解决echarts图片首次加载不显示的问题
     */
    setTimeout(function(){
        $(myChart).resize();
    },200);
    /**
     * 解决点击父节点合并或展开后子节点图片不显示的问题
     */
    $(window).on('click',function(){
        $(myChart).resize();
    });
    /**
     * 遍历数节点
     */
    function readNodes (nodes) {
        for (let item of nodes) { // js遍历树形数组结构
            console.log('item', item)
            if (item.children && item.children.length){
                readNodes(item.children)
            }
            if (item.id == 1 || item.id == 14) {
                // 修改连线颜色
                item.lineStyle = {
                    color: '#2E8B57'
                }
            } else {
                item.lineStyle = {
                    color: '#ff0000'
                }
            }
        }
    }
    readNodes([data]); // 调用时，要给data加[],因为原本的data不是一个正常的数组结构
    myChart.setOption(option); // 重新设置一遍树图，不然不起效果
</script>
</body>
</html>

 

笑到世界都狼狈
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
UML建模之——时序图(待整理)
weixin_30314813的博客
03-06 1676
时序图作为常用的UML交互图，可以直观的传达系统内外之间的交互过程，经常用在详细设计文档中。下面本文综合参考了多篇时序图的教程，根据作者的思路将时序图做了更深入的讲解。 一、什么是时序图？ 时序图（Sequence Diagram），亦称为序列图、循序图或顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。 时序图是一个二维图，横轴表示对...
drawio流程图工具
11-26
这个是我从git上找到的那个流程图工具的最新版（截至2020/11/26）.分享给大家。不用客气，如果想自己搜的话，一定要搜桌面版才能找到。或者进入他的git找它的上级目录也可以找到这个软件。不想费劲的，就下载我的吧
Draw.io绘制UML图教程
踏雨歌青春，诗酒趁年华
02-22 2272
本文是使用在线流程图设计网站draw.io绘制UML图的教程。draw.io 是一款强大的免费在线图表绘制工具，支持创建流程图、组织结构图、时序图等多种图表类型。它提供丰富的形状库、强大的文本编辑和样式设置功能，使用户能够轻松创建专业级图表。draw.io 具有用户友好的界面，支持实时协作，可以存储到云端服务，并提供多种导出选项。
根据文本自动生成UML时序图(draw.io格式)
热门推荐
adrninistrat0r的博客
10-02 1万+
1. 前言 已有一些工具可以根据文本自动生成UML时序图，如PlantUML（https://plantuml.com/zh/）、Mermaid（https://mermaid-js.github.io/mermaid/）等。但存在一些使用不便之处，例如激活需要手工指定、语法较复杂，不便于记忆、部分功能使用频率较低、不便于人工继续编辑、展示的样式与常见的UML时序图不同等。 因此使用Java开发了以下根据文本自动生成UML时序图的工具，激活能够自动生成、语法简单便于记忆，支持大部分UML时序图的功能、生成d
知识点滴 - UML类关系图及描画工具drawio
guoqx的专栏
02-27 5886
UML Class Diagram Relationships / UML类图中的各种关系 这篇文章解释了如何正确确定和实现适用于面向对象建模的不同类图关系。 This article explains how to correctly determine and implement the different class diagram relationships that are applicable in object-oriented modeling. ...
单点登录系统Cas时序图.drawio
07-30
单点登录系统时序图
程序员必备绘图工具，流程图、时序图、类图手到擒来！
二进制君
02-05 1893
Drawio是一款开源\强大的绘图工具，拥有大量的免费素材和模板，可以绘制流程图，类图，时序图，组织架构图等。有了Drawio，什么visio、亿图都可以完全抛弃。我愿称之为程序员神之绘图工具！
免费画图软件推荐 - draw.io
明明如月的技术博客
12-19 4868
一、背景 很早之前在 windows 系统上使用 viso 画图很爽。 自从用了 mac 之后没找到特别趁手的画图软件。 之前尝试过 https://www.processon.com/ ，挺不错可以在线画图， 二、使用 https://app.diagrams.net/ 三、总结 ...
绘图设计：用Draw.io绘制图形技巧大全（含统一建模语言UML模板）
最新发布
m0_67412019的博客
03-05 1067
第一步，打开网址：第二步，新建或打开文件：第三步，绘制流程图：
画时序图你用什么软件？
嵌入式软件实战派
09-13 9701
软件设计时序图制作工具 在软件设计过程中，经常会使用到时序图来表达模块之间的交互、信息传递的动态行为或者其他软件逻辑。时序图可以清晰第表达软件层面的设计，甚至毫不夸张说是“一图顶千言”。 那么，抛出个直截了当的问题：画时序图的工具有哪些？哪个最好用？ 以下以EA（Enterprise Architect）、DrawIO、PlantUML和Markdown里的mermaid来对比讲解。 首先看看他们的效果对比： 效果对比 以下是EA（Enterprise Architect）、DrawIO、PlantUML和
UML在概念模型中的运用分析
02-03
火龙果软件工程技术中心  摘要：UML的目标是以面向对象图的方式来描述任何类型的系统，其中最常用的是建立软件系统的模型。本文运用UML，对软件开发过程中的概念模型进行了分析，研究了开发模型的整个过程以及其间涉及到的相关知识，对软件开发建模具有较大的指导意义。关键词：UML建模技术概念模型一.UML简介UML是一种面向对象的建模语言，而不是一种面向对象的建模方法，它只是给出一套用于建模的元素及表示符号并定义了它们的语义，而不涉及如何进行系统建模，它本身没有提供过程的概念，这意味着用户在使用UML进行建模时，可以选用任何适合的方法和过程。过程的选用与模型/软件开发过程的不同因素有关，诸如所开发软件
RAW图片，可用于测试
03-01
raw格式图片是相机直接拍摄出的一种格式，一般看到的图像是经过转换格式的， 在开发图像处理相关的产品时，需要测试图像转码，例如bayer转RGB，那么输入就是raw格式的。
UML—时序图
01-07
时序图 描述了对象之间传递消息的时间顺序，它用来表示用例中的行为顺序，是强调消息时间顺序的交互图 时序图包括了4个元素：对象(Object)，生命线（Lifeline），激活（Activation），消息（Message） 1.对象 对象代表时序图中的对象在交互中所扮演的角色 2.生命线 生命线是一条垂直的虚线，表示时序图中的对象在一段时间内的存在 3.激活 时序图可以描述对象的激活和去激活，激活代表时序图中的对象执行一项操作的时期。 4.消息 消息是定义交互和协作中交换信息的类，用于对实体间的通信内容建模 机房收费系统时序图 作者：孙正嗯大正
draw.rar时序图软件
07-07
改软件就是用来画时序图的，可以用这个软件来制作UML时序图。
数据结构学习笔记——使用draw.io绘制的树结构图
04-29
树结构 draw.io图 二叉树、顺序树、树的链式存储结构、树的数组存储结构、欧拉树 绘图软件为免费开源软件draw.io
UML中，如何绘制构件图
12-18
详细描述了任用Rational Rose2003工具绘制构件图的工程、步骤、方法
UML在嵌入式系统设计中的应用
03-05
摘要：介绍了ＵＭＬ及将ＵＭＬ应用于嵌入式系统设计中的作用和意义；分析了在嵌入式系统设计中应用ＵＭＬ的基本步骤和难点；结合车载ＧＰＳ终端系统的设计，描述了一个ＵＭＬ的具体应用过程。 关键词：ＵＭＬ（统一...
drawio：设计图
02-25
绘画 设计图
在pycharm中查看UML图
05-23
在 PyCharm 中查看 UML 图，需要安装一个插件叫做 PlantUML Integration。安装方法如下： 1. 打开 PyCharm，进入 Settings（Windows 或 Linux 下为 File -> Settings，Mac 下为 PyCharm -> Preferences）； 2. 在左侧菜单中选择 Plugins； 3. 在右侧搜索框中输入 PlantUML； 4. 找到 PlantUML Integration 插件，点击 Install 安装； 5. 安装完成后，重启 PyCharm。 在 PyCharm 中查看 UML 图的步骤如下： 1. 在项目中创建一个 .puml 文件，编写 UML 图代码； 2. 右键点击 .puml 文件，选择 Diagrams -> Show Diagram 或者 Diagrams -> Preview Diagram； 3. PyCharm 会自动根据代码生成对应的 UML 图，并显示在窗口中。 注意，如果在 .puml 文件中编写 UML 图代码时，需要使用 PlantUML 的语法。如果不熟悉 PlantUML 语法，可以在官网上查看相关文档和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值