python數據可視化案例——力導向圖,網絡圖,關系圖(使用pyecharts,networkx,echarts,js)...


pyecharts無向關系圖,網絡圖,力導向圖,數據來源於2020美賽D題

 

import json
import os

from pyecharts import options as opts
from pyecharts.charts import Graph, Page
import numpy as np
import pandas as pd

dataset = pd.read_csv('passingevents.csv')  #讀取數據
data = dataset.values[:, :]

nodes=[]
links=[]
           
for line in data:
    if int(line[0])==1 and line[2][0]=="H":     
        palyer={}
        palyer["name"]=line[2]
        palyer["symbolSize"]=10
        if line[2][8]=='D':
            color="#FF0000"
            cat=0
        elif line[2][8]=='F':
            color="#3CB371"
            cat=1
        elif line[2][8]=='M':
            color="#9400D3"
            cat=2
        else:
            color="#00BFFF"  
            cat=3
#        palyer["itemStyle"]={"normal": {"color": color}}  
        palyer["category"] = cat
        if palyer not in nodes:
            nodes.append(palyer)   
            
        palyer2={}
        palyer2["name"]=line[3]
        palyer2["symbolSize"]=10
        if line[3][8]=='D':
            color="#FF0000"
            cat=0
        elif line[3][8]=='F':
            color="#3CB371"
            cat=1
        elif line[3][8]=='M':
            color="#9400D3"
            cat=2
        else:
            color="#00BFFF"  
            cat=3
#        palyer2["itemStyle"]={"normal": {"color": color}}
        palyer2["category"] = cat
        if palyer2 not in nodes:
            nodes.append(palyer2)   
     
        links.append({"source": line[2], "target": line[3]})
  
categories=[
        {
            "name": "防守"
        },
        {
            "name": "前鋒"
        },
        {
            "name": "中場"
        },
        {
            "name": "守門員"
        }]
 
graph= (
        Graph(init_opts=opts.InitOpts(width="1000px", height="800px"))
        .add("", 
             nodes, 
             links,
             categories=categories,
             layout="force"
             )
        .set_global_opts(title_opts=opts.TitleOpts(title="傳球網絡圖"))
    )
graph.render("力導向傳球網絡圖.html")

 

 

 python使用networkx

參考博客https://blog.csdn.net/Big_SHOe/article/details/104347916

 

# -*- coding: utf-8 -*-

from matplotlib.colors import ListedColormap
import networkx as nx
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
from collections import Counter


matchID=1 #第幾場比賽

pass_nodes=[]
#經典三色'#4D85BD','#F7903D', '#59A95A'
#color_map=["#61A0A8","#D48265","#C23531","#2F4554"]
cmap=ListedColormap([ '#87CEEB','#FFD700', '#808000'])
#cmap=ListedColormap(color_map) #結點顏色
pass_ways_part=[]
path=r"passingevents.csv"
data=pd.read_csv(path)
time=0
begin_number=0
data["pass_ways_total"]=data["OriginPlayerID"]+","+data["DestinationPlayerID"]


#得到這場比賽是從[begin_number,number),共number次傳球
for row in range(1,len(data.index)-1): #遍歷每一行
    if (data.loc[row][0]==matchID): #看比賽的matchID對不對
        if(time==0):
            time=1
            begin_number=row
            number=begin_number+1
        else:
            number=number+1 
            
#遍歷每一次傳球     
#for row in range(len(data.index)):
for row in range(begin_number,number):
    if ((data.loc[row][0]==matchID)and(data.loc[row][1]=="Huskies")):
       pass_nodes.append(data.loc[row][2]) #傳球是從[row][2]傳到[row][3]
       pass_nodes.append(data.loc[row][3])
       pass_ways_part.append(data.loc[row][11])  
       
#計算每一種傳球組合出現的次數
pass_ways_part=sorted(pass_ways_part)
pass_ways_part_dict=Counter(pass_ways_part) #Counter用的好!!!返回字典形式

#開始畫圖
pass_relation=[i.split(",") for i in pass_ways_part_dict.keys()]#列表里面是列表
pass_relation=[tuple(i) for i in pass_relation]#列表里面變為元組
#里面的數據長這樣:
# pass_relation=[('Huskies_M5', 'Huskies_F2'),('Huskies_M5', 'Huskies_M4')]

pass_node=set(pass_nodes)   
node_number=[]
for i in pass_node:
    node_number.append(pass_nodes.count(i))#計算包含的點出現的次數node_number
nodes_numbers=dict(zip(pass_node,node_number))#點和次數打包成字典
#里面的數據長這樣:
#nodes_numbers={'Huskies_M5': 7, 'Huskies_G1': 24}

edgeWidth=[]#根據權重保存顯得粗細
for i in pass_ways_part_dict.values():
    edgeWidth.append(i)
      
plt.figure(figsize=(12, 8) , dpi=50)  
G=nx.MultiGraph()

G.add_nodes_from(pass_node)#畫點
G.add_edges_from(pass_relation)#畫線G.edges()
D=dict(G.degree)
print("節點的度",D)
print("中心性",nx.degree_centrality(G))#中心性

pos = nx.spring_layout(G)
plt.subplot()

#node_colors=[]
##color_map=["#37a2da","#32c5e9","#67e0e3","#9fe6b8","#ffdb5c","#ff9f7f"]
#for n in G.nodes():
#    if n[8]=="D":
#        node_colors.append(color_map[0])
#    elif n[8]=="F":
#        node_colors.append(color_map[1])
#    elif n[8]=="F":
#        node_colors.append(color_map[2])
#    else:
#        node_colors.append(color_map[3])

nx.draw(G,pos,nodelist=D.keys(),node_size=[v*100 for v in D.values()],node_color=range(len(G.nodes())),node_cmap=plt.cm.Paired,with_labels=True,
    edge_color= range(len(G.edges())),edge_cmap=cmap,width=edgeWidth,alpha=1,font_size=30)
plt.show()

 

 

 也可以直接使用js畫圖

參考博客https://blog.csdn.net/weixin_42402763/article/details/91977109

 

<!DOCTYPE html>
<html lang="en">
<head>
       <script type="text/javascript" src="./js/jquery.min.js"></script>
       <script type="text/javascript" src="./js/echarts.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="resourceShow" style="width:1200px; height: 1200px;"></div>
<script>
    // 基於准備好的dom,初始化echarts實例
    var myChart = echarts.init(document.getElementById('resourceShow'));// 指定圖表的配置項和數據

 var option = {
        //backgroundColor: '#000F1F',
        tooltip: {//彈窗
            /*trigger: 'item',
            formatter: function(params) {
                //根據值是否為空判斷是點還是線段
                if(!isEmpty(params.data.source)){//如果鼠標移動到線條

                }else{//如果鼠標移動到點
                    if(params.data.type == "zone"){
                        return params.data.name + ":<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態:啟用";
                    }else if(params.data.type == "cluster"){
                        return params.data.name + ":<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態:啟用";
                    }else if(params.data.type == "host"){
                        var msg = "";
                        msg += params.data.name + ":<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態:啟用" + "<br>";
                        if(!isEmpty(params.data.connectStatus)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "連接狀態:" + params.data.connectStatus + "<br>";
                        }
                        if(!isEmpty(params.data.roleName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "宿主角色:" + params.data.roleName + "<br>";
                        }
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "業務數量:" + params.data.businessCnt + "<br>";
                        if(!isEmpty(params.data.hostCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數:" + params.data.hostCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.hostRamSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存總容量:" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsedSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存已用量:" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamAvailableSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存可用量:" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存占用百分比:" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>";
                        }
                        if(!isEmpty(params.data.hostDiskTotalCapacityKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量:" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsedKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤已用量:" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskAvailableKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量:" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量:" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤占用百分比:" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>";
                        }
                        return msg;
                    }else if(params.data.type == "vm"){
                        var msg = "";
                        msg += params.data.name + ":<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態:啟用" + "<br>";
                        if(!isEmpty(params.data.instanceName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "實例名稱:" + params.data.instanceName + "<br>";
                        }
                        if(!isEmpty(params.data.comment)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "說明:" + params.data.comment + "<br>";
                        }
                        if(!isEmpty(params.data.applicationName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "歸屬應用:" + params.data.applicationName + "<br>";
                        }
                        if(!isEmpty(params.data.vmCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數:" + params.data.vmCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.vmRam)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存大小:" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.vmTotalDiskCapacity)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量:" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.systemType)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "系統:" + params.data.systemType + "<br>";
                        }
                        if(!isEmpty(params.data.state)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "電源狀態:"  + params.data.state + "<br>";
                        }
                        return msg;
                    }
                }
            }*/
        },
        color:['#09022C',
            '#040193',
            '#073CFE',
            '#0065C2'],
        legend: { //=========小圖標,圖表控件
            show:true,
            data: [{
                    name: '區域',
                    icon: 'diamond' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    //icon:'image://./images/icon1.png'  //如果用圖片img,格式為'image://+icon文件地址',其中image::后的//不能省略
                },
                {
                    name: '集群',
                    icon: 'rect'
                }, {
                    name: '宿主機',

                    icon: 'roundRect'
                }, {
                    name: '雲主機',
                    icon: 'circle'
                }
            ]
        },
        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: {
                repulsion: 450,//相距距離
                edgeLength: [150, 200],
                layoutAnimation: true
            },
            /*force : { //力引導圖基本配置
                //initLayout: ,//力引導的初始化布局,默認使用xy軸的標點
                repulsion : 200,//節點之間的斥力因子。支持數組表達斥力范圍,值越大斥力越大。
                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', 'arrow' ],//邊兩端的標記類型,可以是一個數組分別指定兩端,也可以是單個統一指定。默認不顯示標記,常見的可以設置為箭頭,如下:edgeSymbol: ['circle', 'arrow']
            symbolSize: 50,//圖形大小
            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 : '#31354B',
                    width : '1',
                    type : 'solid', //線的類型 'solid'(實線)'dashed'(虛線)'dotted'(點線)
                    curveness : 0, //線條的曲線程度,從0到1
                    opacity : 1
                    // 圖形透明度。支持從 0 到 1 的數字,為 0 時不繪制該圖形。默認0.5
                },
                emphasis : {//高亮狀態

                }
            },
            label : { //=============圖形上的文本標簽
                normal : {
                    show : true,//是否顯示標簽。
                    position : 'bottom',//標簽的位置。['50%', '50%'] [x,y]   'inside'
                    textStyle : { //標簽的字體樣式
                        color : '#2D2F3B', //字體顏色
                        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,
                    "name":"f0120",
                    "category":0,
                    "symbol":"diamond",
                    "symbolSize":80,
                    "type":"zone",
                    "itemStyle":
                         {"normal":
                             {
                                "color":"#09022C"
                            }
                         }
                },
                {
                    "id":1,
                    "name":"私有雲研發測試環境",
                    "category":1,
                    "symbol":"rect",
                    "symbolSize":50,
                    "type":"cluster",
                    "itemStyle":
                        {"normal":
                            {"color":"#040193"}
                        }
                },
                {"id":2,"name":"存儲01","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.34,"hostCpuLost":1.58,"hostRamSize":16417088,"hostRamUsedSize":6689704,"hostRamAvailableSize":9727384,"hostRamUsed":0.4075,"hostDiskTotalCapacityKB":2927493120,"hostDiskUsedKB":50399692,"hostDiskAvailableKB":2877093428,"hostDiskUsed":0.0172,"roleName":"存儲節點","businessCnt":0,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":3,"name":"存儲02","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.18,"hostCpuLost":3.57,"hostRamSize":16417088,"hostRamUsedSize":8065364,"hostRamAvailableSize":8351724,"hostRamUsed":0.4913,"hostDiskTotalCapacityKB":2927493120,"hostDiskUsedKB":6261212,"hostDiskAvailableKB":2921231908,"hostDiskUsed":0.0021,"roleName":"存儲節點","businessCnt":0,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":4,"name":"存儲03","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.38,"hostCpuLost":5.58,"hostRamSize":16417088,"hostRamUsedSize":6858004,"hostRamAvailableSize":9559084,"hostRamUsed":0.4177,"hostDiskTotalCapacityKB":3512991744,"hostDiskUsedKB":7236532,"hostDiskAvailableKB":3505755212,"hostDiskUsed":0.0021,"roleName":"存儲節點","businessCnt":0,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":5,"name":"計算01","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":24,"hostCpuUsed":0.01,"hostCpuLost":1.3,"hostRamSize":263398136,"hostRamUsedSize":46815664,"hostRamAvailableSize":216582472,"hostRamUsed":0.1777,"hostDiskTotalCapacityKB":292968750,"hostDiskUsedKB":223103180,"hostDiskAvailableKB":69865570,"hostDiskUsed":0.7615,"roleName":"計算節點","businessCnt":15,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":6,"name":"ceph測試","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":2,"vmRam":2097152,"vmTotalDiskCapacity":104857600,"instanceName":"KcwUVhhZJKF3","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":7,"name":"ceph測試","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":2,"vmRam":2097152,"vmTotalDiskCapacity":41943040,"instanceName":"KkNVVhS8p3Ft","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":8,"name":"測試多ceph兼容","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":2,"vmRam":2097152,"vmTotalDiskCapacity":41943040,"instanceName":"KsbWVhRHOXaV","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":9,"name":"混合存儲模式測試03","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":"系統盤和數據盤分別使用不同的存儲","systemType":"Linux","applicationName":"運維測試","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":104857600,"instanceName":"KCRnVhusAfcs","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":10,"name":"混合存儲模式測試03","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"運維測試","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"K2WnVheVQHIy","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":11,"name":"混合存儲模式測試03","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"運維測試","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"KkenVh2NN7pN","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":12,"name":"混合存儲兼容測試01","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"KQsnVhNgLa7Q","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":13,"name":"混合存儲兼容測試01","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"KKGoVhyqYmu7","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":14,"name":"混合存儲兼容測試03","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":null,"instanceName":"KScoVhXKFOax","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":15,"name":"混合存儲兼容測試03","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":146800640,"instanceName":"KieoVhCZfE7H","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":16,"name":"測試1111","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":null,"instanceName":"KmlpVhGB4I6k","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":17,"name":"測試申請111","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":null,"instanceName":"KD7sVhXoldal","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":18,"name":"混合存儲兼容測試05","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":null,"instanceName":"Kj4uVhpwoBt8","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":19,"name":"測試開通001","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":"測試開通001","systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":null,"instanceName":"KINvVhyg0jLa","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":20,"name":"asfas009","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":"asfasf009","systemType":"Windows","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":2097152,"instanceName":"K0LAZhCinIcn","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":21,"name":"計算02","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":24,"hostCpuUsed":0,"hostCpuLost":2.63,"hostRamSize":263578028,"hostRamUsedSize":61417000,"hostRamAvailableSize":202161028,"hostRamUsed":0.233,"hostDiskTotalCapacityKB":922114350,"hostDiskUsedKB":164727852,"hostDiskAvailableKB":715170642,"hostDiskUsed":0.1786,"roleName":"計算節點,存儲節點","businessCnt":8,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":22,"name":"多ceph存儲測試","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"運維測試","vmCpuCoreNum":2,"vmRam":2097152,"vmTotalDiskCapacity":null,"instanceName":null,"state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":23,"name":"混合存儲兼容測試05","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":83886080,"instanceName":"KnrvVhwZOPgg","state":"開機","itemStyle":{"normal":{"color":"#0065C2"}}},{"id":24,"name":"test0531yan123","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"KOJXWhWm2uDc","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":25,"name":"test0531yan12345","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":1,"vmRam":1048576,"vmTotalDiskCapacity":41943040,"instanceName":"KHlXWhxUSr2u","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":26,"name":"災備控制機","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"雲災備測試","vmCpuCoreNum":4,"vmRam":4194304,"vmTotalDiskCapacity":null,"instanceName":"KkzxXhFmeOqe","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":27,"name":"災備控制機","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"雲災備測試","vmCpuCoreNum":4,"vmRam":4194304,"vmTotalDiskCapacity":null,"instanceName":"Ko2yXhPSnlnU","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":28,"name":"災備控制機","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"雲災備測試","vmCpuCoreNum":4,"vmRam":4194304,"vmTotalDiskCapacity":null,"instanceName":"KwDyXhpn6NXU","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":29,"name":"災備控制機","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":null,"systemType":"Linux","applicationName":"雲災備測試","vmCpuCoreNum":4,"vmRam":4194304,"vmTotalDiskCapacity":null,"instanceName":"KVJyXh822qDK","state":"關機","itemStyle":{"normal":{"color":"#c22900"}}},{"id":30,"name":"f0120機櫃集群02","category":1,"symbol":"rect","symbolSize":50,"type":"cluster","itemStyle":{"normal":{"color":"#040193"}}},{"id":31,"name":"ceph_13_01","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.12,"hostCpuLost":2.76,"hostRamSize":16413752,"hostRamUsedSize":13411772,"hostRamAvailableSize":3001980,"hostRamUsed":0.8171,"hostDiskTotalCapacityKB":3515088896,"hostDiskUsedKB":30268576,"hostDiskAvailableKB":3484820320,"hostDiskUsed":0.0086,"roleName":"存儲節點","businessCnt":0,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":32,"name":"ceph_13_02","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.04,"hostCpuLost":0.16,"hostRamSize":16413752,"hostRamUsedSize":6855632,"hostRamAvailableSize":9558120,"hostRamUsed":0.4177,"hostDiskTotalCapacityKB":2927493120,"hostDiskUsedKB":6256616,"hostDiskAvailableKB":2921236504,"hostDiskUsed":0.0021,"roleName":"存儲節點","businessCnt":0,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":33,"name":"ceph_13_03","category":2,"symbol":"roundRect","symbolSize":40,"type":"host","hostCpuCoreNum":4,"hostCpuUsed":0.13,"hostCpuLost":0.63,"hostRamSize":32928816,"hostRamUsedSize":8822440,"hostRamAvailableSize":24106376,"hostRamUsed":0.2679,"hostDiskTotalCapacityKB":2927493120,"hostDiskUsedKB":13823104,"hostDiskAvailableKB":2913670016,"hostDiskUsed":0.0047,"roleName":"存儲節點","businessCnt":1,"connectStatus":"在線","itemStyle":{"normal":{"color":"#073CFE"}}},{"id":34,"name":"測試ceph","category":3,"symbol":"circle","symbolSize":30,"type":"vm","comment":"1","systemType":"Linux","applicationName":"測試應用名1","vmCpuCoreNum":2,"vmRam":2097152,"vmTotalDiskCapacity":null,"instanceName":null,"state":"關機","itemStyle":{"normal":{"color":"#c22900"}}}],
            links : [{"source":0,"target":1},{"source":1,"target":2},{"source":1,"target":3},{"source":1,"target":4},{"source":1,"target":5},{"source":5,"target":6},{"source":5,"target":7},{"source":5,"target":8},{"source":5,"target":9},{"source":5,"target":10},{"source":5,"target":11},{"source":5,"target":12},{"source":5,"target":13},{"source":5,"target":14},{"source":5,"target":15},{"source":5,"target":16},{"source":5,"target":17},{"source":5,"target":18},{"source":5,"target":19},{"source":5,"target":20},{"source":1,"target":21},{"source":21,"target":22},{"source":21,"target":23},{"source":21,"target":24},{"source":21,"target":25},{"source":21,"target":26},{"source":21,"target":27},{"source":21,"target":28},{"source":21,"target":29},{"source":0,"target":30},{"source":30,"target":31},{"source":30,"target":32},{"source":30,"target":33},{"source":4,"target":34}],//edges是其別名代表節點間的關系數據。
            categories: [ //symbol name:用於和 legend 對應以及格式化 tooltip 的內容。 label有效
                {
                    name: '區域',
                    symbol: 'diamond',
                    label: { //標簽樣式
                    }
                }, {
                    name: '集群',
                    symbol: 'rect'
                }, {
                    name: '宿主機',
                    symbol: 'roundRect'
                }, {
                    name: '雲主機',
                    symbol: 'circle'
                }
            ]
        } ]
    };
    // 使用剛指定的配置項和數據顯示圖表。
    //alert("到這啦")
    myChart.setOption(option);
</script>
</body>
</html>

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM