Echarts3 關係圖-力導向佈局圖

時間 2019-11-13

標籤 echarts3 echarts 關係導向佈局简体版

原文原文鏈接

由於項目須要，要求實現相似力導圖效果的圖，我就瞄上了echarts。javascript

注意事項1：因爲個人項目要部署到內網，因此js文件要在本地，網上大多力導圖都是echarts2的，而其又依賴zrender基礎庫，下載的echarts2是2.2.7版本，可是去zrender官網下載的2.1版本，用起來講版本最低要求2.1.1,下載最新又提示缺乏文件，引用網頁js反而沒事兒，因而只能選擇echarts3了。html

注意事項2：echarts2到echarts3有許多改動的地方，首先echarts3沒有force了，而是把force歸類在graph(關係圖)下了,其次myChart.on()方法的事件簡化了，也有其餘方法改動等在此就不一一贅述了，文檔介紹的很清楚。java

注意事項3：由於我採用的是標籤式單文件引入(<script src="路徑/echarts.js></script>")，因此也不用require()方法去加載，echarts對象直接用就能夠了。node

注意事項4：echarts3的api網址：http://echarts.baidu.com/option.html#title，最經常使用的api在配置項手冊中，瞭解了配置項手冊的東西就能應付大部分應用了，而api選項是一些特殊的方法，也就是不經常使用的，如下是我啃了3天api的成果，我只把有關力導圖的代碼貼出來了，不知道能不能用，我幾乎是把整個API都寫在註釋裏了，但願對新人能有所幫助，在此附上效果圖、html和js的代碼，以供參考。jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!-- 使用IE8以上的渲染 -->
<!-- <meta name="renderer" content="webkit|ie-comp|ie-stand"> -->
<!-- 三個參數分別表明極速、兼容、標準模式，適用於360瀏覽器 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>監控管理系統</title>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/jquery.min.js">
</script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/include/echarts.js">
</script>  <!--導入的爲ECharts3的js -->


</head>
<body>

<div style="padding:20px;width:100%;height:100%;"> 

        <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
               <div id="main" style="width: 1104px;height:464px;">
                 
               </div>
           
      <div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">節點關係提示區</div>
          
 </div>
</body>
</html>

            // 基於準備好的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 結束*/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。