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

最新推荐文章于 2024-04-01 18:05:28 发布
最新推荐文章于 2024-04-01 18:05:28 发布
阅读量966 收藏 3
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63006013/article/details/126681696
版权

最终实现样式：

鼠标移入任意子节点展示：

 

 实现代码如下：

<!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">
    <!-- 引入 jquery.js -->
    <script src="http://code.jquery.com/jquery-2.1.4.min.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);
    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>

前端没路走了，改干销售中
关注
在ECharts树图中实现搜索高亮和自动展开
阿符的百宝箱
11-25 2440
目录
echarts 树图样式美化_echarts树图tree改为流程图
weixin_36465108的博客
02-23 1682
Titlevar _data =[];var _flows =[[{"name": "步骤1", "id": 87, "count": 2,},{"name": "步骤2", "id": 88, "count": 2,},{"name": "步骤3", "id": 89, "count": 2,},{"name": "步骤4", "id": 90, "count": 2,},{"name": "步...
echarts折线图更改折线点类型
rqgxy的博客
12-12 4477
Echarts折线图中点类型是默认生成，实际中有可能要对其进行修改，如图中要生成多条折线，其中有的线可以做为基准线，类似于警戒线，这样就要求在图中只展示一条线，而不需要描出相应的点，如下图所示： 该条线为空值标准，图中直接展示一条横线即可，其他线对应展示相应的点即可。 解决办法：在echarts脚本中，找到对series控制处，写上如下脚本： 判断系列名称是否包含标准，如包含
echarts树图设置高亮
笑到世界都狼狈的博客
05-15 2653
首先说明一下，我最初用的echarts.js应该至少是两年前下载的吧，所以导致高亮写了半天一点效果都没有，最后实在找不到原因，就换了demo中的js。高亮的效果一下子就实现了 实现效果如下： 实现代码： emphasis: { // 高亮 focus: 'descendant' }, 代码结构： 关于高亮的属性，在官方api中有看到以下属性，要么高亮本身，要么高亮祖先，要么高亮子孙，没看到一个可以同时高亮祖先和子孙的方法。 文档地址 完整代码： <!DOC...
echarts 树图案例
逆风优雅的博客
02-16 2722
【代码】echarts 树图案例。
echarts实现树图-tree
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
09-18 3427
echarts实现图谱树
echarts使用tree悬浮高亮树枝
一个前端工作者的博客
05-04 395
监听悬浮事件，echarts中dataIndex是可以作为标识的，如果使用id配合层级，则可能出现不同组件控制相同的页面，此时悬浮就会有问题。
echart树图：曲线换成直角线版本.zip
11-09
在本文中，我们将深入探讨如何使用ECharts库创建一个组织结构图，并着重讲解如何将原本曲线的连接线修改为直角线。ECharts是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型和强大的交互功能，...
echarts树图实现点击收缩子节点
05-02
ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及我们这里讨论的树图。ECharts基于SVG和Canvas技术，支持跨浏览器和跨平台使用，并且遵循MIT开源协议，允许自由...
echarts 树图样式美化_echarts2 tree树图自定义显示缩放大小、位置
weixin_42299396的博客
01-13 3005
<>看到网上关于echarts tree的资料有点少，做项目恰巧遇到这个，把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置，并不能指定树图整体的大小以及其整体在dom显示的位置，在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart = echarts.init(dom); chart.getZ...
echarts自定义树状图，且每个系列柱子数不一
04-11
echarts自定义柱状图的形式，根据数据格式，横轴为多个系列项，每个系列项拥有的柱子数量不等，可自动计算柱子数量等分宽度显示。
echarts树形思维导图
10-09
echarts树形实例，使用echarts2.x版本（高版本将树形实例已移除），内容包括html，和echarts.js文件
echarts 树图样式美化_Echarts中状态树的使用，以及symbol节点用图片替代展示
weixin_34551660的博客
12-31 1725
需求：使用状态树，以及节点换作图片实际操作html部分：js部分：drawChart() { // 此处将方法封装了函数(需调用)var pieId = document.getElementById("tree");if (!pieId) {return false;}let myChart = this.$echarts.in...
Echarts实现高亮某一个点
最新发布
xxuxioxx的博客
04-01 2165
Echarts通过样式实现高亮某一个点
vue实现点击高亮效果_vue结合Echarts实现点击高亮效果的示例
weixin_39550937的博客
12-20 356
本文主要介绍如何在vue中使用Echarts实现点击高亮效果。1、首先看一下官方网站上的介绍：2、在初始化的时候绑定这两个事件。需要绑定的事件是鼠标的点击事件和右键点击事件。mounted: function () {let that = this;let myChart = this.$echarts.init(document.getElementById('myChart'));myChar...
echarts树形图样式_echarts的树形结构图及参数
weixin_39688856的博客
12-24 2717
官网代码：myChart.showLoading(); //显示Loading标志；var myChart = echarts.init(document.getElementById('页面中div的id'));$.get('data/asset/data/flare.json', function (data) {myChart.hideLoading(); //得到数据后隐藏Lo...
echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红 写的很详细，建议收藏！
耶稣与梦的博客
01-26 3万+
echarts tree(树图)类型 实现自定义节点图标、自定义展示样式、点击节点后线条变色、自适应高度、搜索后节点关键字标红，有关资源免费提供给大家哈 前言 网上找了好久资料，没有一个完整实例，所以研究出来立马发布，共享下，希望能帮助到大家。 一、实现效果 提供视频方式大家看下符不符合要求 echart tree 自定义演示 Demo地址 点击此处，可查看演示地址https://it__distant_branch.gitee.io/echarts-tree/ 二、源码...
echarts树图模板
07-11 710
echarts树图模板 tree.js(自己写的js) //1.准备树的数据 var data = [ {name:"广东",value:"01",sj:"-"}, {name:"广州",value:"0101",sj:"01"}, {name:"潮州",value:"0102",sj:"01"}, {name:"深圳",value:"0103",sj:"01"},...
echarts中的树形结构图（参数分析）
热门推荐
van的博客
05-10 9万+
先上echarts官网示例图，可以点开链接查看，这里先上一张截图，以及官网代码 官网代码： myChart.showLoading(); //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id')); $.get('data/asset/data/flare.json', funct...
echarts树图缩进树
09-12
要实现 echarts 树图的缩进树效果，可以通过设置节点的 `itemStyle` 属性中的 `padding` 来实现。例如： ``` series: [{ type: 'tree', data: [...], top: '10%', left: '10%', bottom: '10%', right: '10%', symbolSize: 7, label: { position: 'left', verticalAlign: 'middle', align: 'right' }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left' } }, itemStyle: { padding: [5, 10, 5, 10] // 上、右、下、左的内边距 }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 }] ``` 其中 `padding` 数组中的四个参数分别表示上、右、下、左的内边距大小。可以根据需要调整这些参数的值，以达到合适的缩进树效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值