Echarts3 关系图-力导向布局图 使用参数

// 基于准备好的dom,初始化ECharts实例            var myChart = echarts.init(document.getElementById('main'), 'macarons');            // 指定图表的配置项和数据
            var option = {
                tooltip : {
                    show : true,   //默认显示
                    showContent:true, //是否显示提示框浮层
                    trigger:'item',//触发类型,默认数据项触发
                    triggerOn:'click',//提示触发条件,mousemove鼠标移至触发,还有click点击触发
                    alwaysShowContent:false, //默认离开提示框区域隐藏,true为一直显示
                    showDelay:0,//浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                    hideDelay:200,//浮层隐藏的延迟,单位为 ms,在 alwaysShowContent 为 true 的时候无效。
                    enterable:false,//鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。
                    position:'right',//提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
                    confine:false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。
                    transitionDuration:0.4,//提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。
                    formatter: function (params, ticket, callback) {
                        //判断数据,提供相应的url。
                        var path="";
                        var node=params.data; //当前选中节点数据
                        var category=params.data.category;  //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名 
                        if(category==2){ //为jvm 虚拟机各类参数的路径
                            path = "${ctx}/weblogic.do?host=" + node.host + "&port="
                            + node.port + "&username=" + node.username
                            + "&pwd=" + node.pwd; //准备访问路径
                        }else if(category==4){ //为jdbc 数据库的路径
                            path = "${ctx}/oracle.do?host=" + node.host + "&port="
                            + node.port + "&username=" + node.username
                            + "&pwd=" + node.pwd + "&instance="
                            + node.instance; //准备访问路径
                        }
                        
                        console.log(params);
                        $.ajax({
                            async : true,//设置异、同步加载
                            cache : false,//false就不会从浏览器缓存中加载请求信息了
                            type : 'post',
                            dataType : "json",
                            url : path,//请求的action路径  
                            success : function(data) { //请求成功后处理函数。    
                                //加工返回后的数据
                                debugger;
                                if(category==2){ //当选择端口号时
                                    var res = 'jvm最大内存值:' + data.memoryMaxSize+'<br/>';
                                    res+='jvm空闲内存值:'+data.memoryFreeSize+'<br/>';
                                    res+='jvm内存使用率:'+data.memoryPer+'<br/>';
                                    res+='空闲线程:'+data.ideThread+'<br/>';
                                    res+='总线程:'+data.totalThread+'<br/>';
                                    res+='每秒处理的线程数比率:'+data.throuhput+'<br/>';
                                    callback(ticket,res);
                                }else if(category==4){//当选择用户名时
                                    var res = '当前链接数:'+data.processCount+'<br/>';
                                    res+='最大链接数:'+data.maxProcessCount+'<br/>';
                                    callback(ticket,res);
                                }
                                
                            },
                            error : function() {//请求失败处理函数  
                            $.messager.alert('警告', '请求失败!', 'warning');
                            }
                        });
                        if(category==2||category==4){ //当选择端口号与用户名时提示加载
                            return "loading";
                        }else{                   //其他情况显示所属图例以及名称
                            return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
                        }
                        
                    }
                },

                legend : { //=========圖表控件
                    show : true,
                    data : [ {
                        name : '负载',
                        
                        icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            
                    },
                    {
                        name : '中间件',
                        
                        icon : 'roundRect'
                    }, {
                        name : '端口号',
                        
                        icon : 'circle'
                    }, {
                        name : '数据库',
                        
                        icon : 'circle'
                    },{
                        name : '用户名',
                        icon : 'roundRect'
                    } ]
                },
                series : [ {
                    type : 'graph', //关系图
                    name : "监控管理系统", //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
                    layout : 'force', //图的布局,类型为力导图,'circular' 采用环形布局,见示例 Les Miserables
                    legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
                    hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
                    coordinateSystem : null,//坐标系可选
                    xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
                    yAxisIndex : 0, //y轴坐标 
                    force : { //力引导图基本配置
                        //initLayout: ,//力引导的初始化布局,默认使用xy轴的标点
                        repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
                        gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        edgeLength :80,//边的两个节点之间的距离,这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                        layoutAnimation : true
                    //因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。                        
                    },
                    roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例,当设为0时节点不随着鼠标的缩放而缩放
                    draggable : true,//节点是否可拖拽,只在使用力引导布局的时候有用。
                    focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                    //symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'(矩形), 'roundRect'(圆角矩形), 'triangle'(三角形), 'diamond'(菱形), 'pin'(大头针), 'arrow'(箭头)  也可以通过 'image://url' 设置为图片,其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
                    //symbolSize:10 ,//也可以用数组分开表示宽和高,例如 [20, 10] 如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:(value: Array|number, params: Object) => number|Array
                    //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
                    //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
                    edgeSymbol : [ 'none', 'none' ],//边两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。默认不显示标记,常见的可以设置为箭头,如下:edgeSymbol: ['circle', 'arrow']
                    edgeSymbolSize : 10,//边两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
                    itemStyle : {//===============图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
                        normal : { //默认样式
                            label : {
                                show : true
                            },
                            borderType : 'solid', //图形描边类型,默认为实线,支持 'solid'(实线), 'dashed'(虚线), 'dotted'(点线)。
                            borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
                            borderWidth : 2, //图形的描边线宽。为 0 时无描边。
                            opacity : 1
                        // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5

                        },
                        emphasis : {//高亮状态

                        }
                    },
                    lineStyle : { //==========关系边的公用线条样式。
                        normal : {
                            color : 'rgba(255,0,255,0.4)',
                            width : '3',
                            type : 'dotted', //线的类型 'solid'(实线)'dashed'(虚线)'dotted'(点线)
                            curveness : 0.3, //线条的曲线程度,从0到1
                            opacity : 1
                        // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。默认0.5
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    label : { //=============图形上的文本标签
                        normal : {
                            show : true,//是否显示标签。
                            position : 'inside',//标签的位置。['50%', '50%'] [x,y]
                            textStyle : { //标签的字体样式
                                color : '#cde6c7', //字体颜色
                                fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                                fontFamily : 'sans-serif', //文字的字体系列
                                fontSize : 12, //字体大小
                            }
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    edgeLabel : {//==============线条的边缘标签 
                        normal : {
                            show : false
                        },
                        emphasis : {//高亮状态

                        }
                    },
                    //别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
                    //label:标签样式。
                    data : [ {
                        id : 0,
                        category : 0,
                        name : '101.133.8.88',
                        symbol : 'roundRect',
                        value : 20,
                        symbolSize : 80
                    }, {
                        id : 1,
                        category : 1,
                        name : '192.168.8.88',
                        symbol : 'rect',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 2,
                        category : 2,
                        name : '7001',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60,
                        yId:"jvm",
                        host:"192.168.6.37",
                        port:"7001",
                        username:"weblogic",
                        pwd:"weblogic1"
                    }, {
                        id : 3,
                        category : 2,
                        name : '7100',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 4,
                        category : 1,
                        name : '102.12.33.23',
                        symbol : 'rect',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 5,
                        category : 2,
                        name : '7001',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 6,
                        category : 2,
                        name : '7100',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 7,
                        category : 2,
                        name : '7001',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 8,
                        category : 1,
                        name : '101.11.66.6',
                        symbol : 'rect',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 9,
                        category : 2,
                        name : '7101',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 10,
                        category : 2,
                        name : '7101',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 11,
                        category : 2,
                        name : '7001',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 12,
                        category : 2,
                        name : '7100',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 60
                    }, {
                        id : 13,
                        category : 3,
                        name : '192.168.44.44',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 14,
                        category : 3,
                        name : '192.168.33.33',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 15,
                        category : 3,
                        name : '192.168.22.22',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 70
                    }, {
                        id : 16,
                        category : 4,
                        name : '55555555555',
                        symbol : 'circle',
                        value : 20,
                        symbolSize : 70,
                        yId:"jdbc",
                        port:"1521",
                        host:"192.168.11.11",
                        username:"222222222",
                        pwd:"11111111",
                        instance:"orcl"
                    }],
                    categories : [ //symbol name:用于和 legend 对应以及格式化 tooltip 的内容。 label有效
                    {
                        name : '负载',
                        symbol : 'rect',
                        label : { //标签样式
                        }
                    }, {
                        name : '中间件',
                        symbol : 'rect'
                    }, {
                        name : '端口号',
                        symbol : 'roundRect'
                    }, {
                        name : '数据库',
                        symbol : 'roundRect'
                    }, {
                        name : '用户名',
                        symbol : 'roundRect'
                    } ],
                    links : [ //edges是其别名代表节点间的关系数据。
                    {
                        source : 1,
                        target : 0
                    }, {
                        source : 4,
                        target : 0
                    }, {
                        source : 8,
                        target : 0
                    }, {
                        source : 2,
                        target : 1
                    }, {
                        source : 3,
                        target : 1
                    }, {
                        source : 5,
                        target : 4
                    }, {
                        source : 6,
                        target : 4
                    }, {
                        source : 7,
                        target : 4
                    }, {
                        source : 9,
                        target : 8
                    }, {
                        source : 10,
                        target : 8
                    }, {
                        source : 11,
                        target : 8
                    }, {
                        source : 12,
                        target : 8
                    }, {
                        source : 13,
                        target : 6
                    }, {
                        source : 14,
                        target : 6
                    }, {
                        source : 15,
                        target : 2
                    }, {
                        source : 16,
                        target : 15
                    } ]
                } ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            
            /*ECharts3 方法部分 开始*/
            function appendPath(params){    //拼接节点关系并显示在左下角,
                var option = myChart.getOption();
                var series = option.series[params.seriesIndex]; //获取图表
                var nodesOption = series.data;//获取所有数据
                var links= series.links;//获取所有连线
                if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
                    var id=params.data.id;
                    var categoryName = series.categories[params.data.category].name;//获取当前节点的图例名称
                    var str=categoryName+":"+nodesOption[id].name;
                    var i = 0;
                    var map = {};
                    for( i = 0 ; i < links.length; i++){
                        map[links[i].source] = links[i].target;
                    }
                   
                    while(true){           
                        if(map[id] == undefined){
                            break;
                        }
                        //获取父节点的图例名称并连接
                        str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str; 
                        id = map[id] ;
                    }
                    return str;
                }else if(params.dataType=="edge"){ //当鼠标停留在连线上时,暂不处理
                    return "";
                }
            }
            
            function openOrFold(params) {  //该事件会提示节点间关系
                var str = appendPath(params);
                document.getElementById("main_1").innerHTML = str;
                return str;
            }
            //var ecConfig = echarts.config; echarts2的获取事件方法,当前为echarts3
            myChart.on('mouseover', openOrFold);
            //'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 
            /*ECharts3 方法部分 结束*/
            
            /*ECharts3 结束*/

 

热门文章

暂无图片
编程学习 ·

python学习记录

变量和简单数据类型 message="Hello Python world!" print(message)message就是一个变量,绿色部分用双引号括起来的(也可以用单引号)就是一个字符串。变量的命名和使用: 1.变量名只能包含字母、数字和下划线。字母下划线可以打头数字不可以。 2.变量名不能包含空…
暂无图片
编程学习 ·

实战系列-Spring Cloud微服务中三把利器Feign、Hystrix、Ribbon

导语在之前的分享中分享过关于Fegin的底层实现原理,以及Spring Cloud OpenFegin的启动原理。在这次的分享中主要总结一下Spring Cloud 微服务架构的三把利器。对于Fegin、Hystrix、Ribbon三个组件来说它们之间是什么样的关系。怎么样综合使用等这些问题就是这次分享的内容文章…
暂无图片
编程学习 ·

坚强奋斗的后浪们,后浪们的逆风翻盘之路。

逆风5.4日B站播出了后浪,视频伴随着激情澎湃的音乐、华丽无比的台词、精英人士的代言,可以说很振奋人心。但是观看后,网上却有着两种不同的声音,分别是乐观与悲观。当然伴随着疫情肆虐,悲观的声音反而是最响亮。90后们更是看的焦躁不安、时逢逆风,如何翻盘? 逆风论点:通…
暂无图片
编程学习 ·

牧牛链,牧牛帮排线

牧牛链医疗鉴证区块链 截至到目前为止,国家大数据局尚未完成对所有医疗机构内生成的医疗数据收集整理,也未完成对居民个人健康档案或病历的电子化进程。医疗机构上传数据和居民主动上传意愿不强烈。越来越多的医疗纠纷报道已经严重影响到医生群体的工作热情。许多医生对于基于…
暂无图片
编程学习 ·

写代码不得不看系列

在电脑上发现以前保存的一段脚本#!/bin/bashfor sysdevpath in $(find /sys/bus/usb/devices/usb*/ -name dev); do(syspath="${sysdevpath%/dev}"devname="$(udevadm info -q name -p $syspath)"[[ "$devname" == "bus/"* ]] &&a…
暂无图片
编程学习 ·

前端项目如何管理

前端项目的管理分为两个维度:项目内的管理与多项目之间的管理。1. 项目内的管理在一个项目内,当有多个开发者一起协作开发时,或者功能越来越多、项目越来越庞大时,保证项目井然有序的进行是相当重要的。一般会从下面几点来考证一个项目是否管理得很好:可扩展性:能够很方便…
暂无图片
编程学习 ·

收藏量4w+的Web开发框架,你还没学?点击收藏!

Python的Web开发,也是工作岗位比较多的领域。如果你对Python的Web开发有兴趣,正打算开始学习使用Python做Web开发等,那么学习一门基于Python的Web开发框架是必修课。Python作为当前最热门,也是最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Djan…
暂无图片
编程学习 ·

带你全面了解蓝牙定位原理,蓝牙定位方案种类-新导智能

蓝牙定位服务是蓝牙技能领域增加最快的解决方案,现在已经被越来越多的运用于寻物、室内定位、室内导航以及财物追寻等领域。蓝牙联盟也在不断的迭代蓝牙技能,使得定位技能的精度越来越高,从最早的朴实基于信号强度的Beacon定位,到蓝牙5.1支撑的多天线视点定位等。从方案视点…
暂无图片
编程学习 ·

单调栈解决Next Greater Number一类题

单调栈是什么? 单调栈使得每次新元素入栈后,栈内元素都保持有序(单调递增或者单调递减)。 单调递增栈:栈中数据出栈的序列为单调递增序列。 单调递减栈:栈中数据出栈的序列为单调递减序列。 注意:这里所说的递增递减是出栈的顺序,不是栈中数据的顺序。 单调栈的应用 通…
暂无图片
编程学习 ·

Web前端页面制作流程以及注意事项,满满的干货!

每天我们打开电脑,看到各种各样的web前端页面。你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程。在这里就为大家详细介绍一下制作一个Web前端页面的设计流程及注意事项。一:确定网站主题 每个网站都有自身以及…
暂无图片
编程学习 ·

ubuntu python 升级 和pip匹配问题

ubuntu16.04,卸载系统自带的python3.5引发了一宗惨案,好在最终完美解决https://blog.csdn.net/qq_29935433/article/details/105568942?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribut…
暂无图片
编程学习 ·

直播带货系统开发机遇与挑战并存

如今,直播带货正逐渐取代以往传统的营销方式,各大电商也因此纷纷踏入直播带货系统开发热门,开发出多个功能为一体的直播带货系统。2020年,面临着直播带货的空前盛况,不仅是直播带货系统开发的机遇,同时也是一个挑战。所谓的直播带货,顾名思义,就是商家以及直播通过直播…
暂无图片
编程学习 ·

iOS开发之多线程(2)—— Thread

目录版本简介方法属性示例 版本 Xcode 11.5 Swift 5.2.2 简介 一个Thread即为一个线程. 方法属性 OC中的属性方法(Swift方法名类似): #pragma mark - 属性 // 可以使用返回的字典来保存线程的特定数据. (这只是一个普通的字典, 用来保存所有开发者感兴趣的数据.) @property (r…
暂无图片
编程学习 ·

机器视觉打光技巧

光源专家的8个打光技巧 机器视觉系统中的照明系统是极其重要的一部分,它的好坏直接影响着后面的图像处理。在听了一位日本光源专家的讲座之前,我其实对照明并不太了解,不就是将图像照亮以至于相机能够拍到图像吗?但事实并非如此,照明远非增强图像亮度这样简单,好的照明系…
暂无图片
编程学习 ·

JavaOOP---异常

异常 简单来说异常就是程序中的一些错误或者说是不正常的存在。 首先异常分为两大类:Error:这种异常更该说是错误,是比较严重的一类错误。说严重,其实是因为这些错误是JVM监管范围外的,可以捕获它,但是JVM无法解决掉。比如,网线断了,或者计算机硬件之类的问题。 Except…
暂无图片
编程学习 ·

组合数学4-全排列与算法

文章目录全排列与算法一 钟声里的全排列**思考**:生成算法二 字典序法1.递归2.字典序法例1:生成字母abc的全排列例2:生成123的全排列例3:生成839647521的全排列3.**思考**:局部连续变化三 SJT算法(Steinhaus–Johnson–Trotter algorithm)1. 引出思路2. 可移动数(mobil…
暂无图片
编程学习 ·

MySQL创建新连接时,不能成功连接的问题

创建新连接后,用户名和密码都是对的,地址和端口也都是本地但还是会出现错误。比如:1、2003错误:2003 cannot connect to mysql一般是没有启动MySQL服务,在服务中找到MySQL80,启动之。2、1045错误:ERROR 1045 (28000): Access denied for user root@localhost (using pas…