數據嵌入js的關系圖

本文轉載自查看原文 2019-12-03 19:42 395

參照echarts官網，改了一下效果圖：

數據放在了js里。

代碼：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
          <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script src="echarts.min.js"></script>
        <script src="dataTool.js"></script>      
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.hideLoading();
        categories=[
            {
                "name": "人物",
                "keyword": {},
                "base": "HTMLElement"
            },
            {
                "name": "機構",
                "keyword": {},
                "base": "WebGLRenderingContext"
            },
            {
                "name": "行為",
                "keyword": {},
                "base": "SVGElement"
            },
            {
                "name": "地點",
                "keyword": {},
                "base": "CSSRule"
            },
            {
                "name": "主題",
                "keyword": {}
            }
        ],
        nodes=[
            <%for(int i=0;i<100;i++){%>
            {
                name: "馬<%=i%>",
                value: 100,
                category: 0,
                symbolSize:20,
            },
            {
                name: "劉<%=i%>",
               value: 1,
                category: 1
            },
            {
                name: "是<%=i%>",
                value: 1,
                category: 2,
            },
            {
                name: "我<%=i%>",
                value: 1,
                category:3
            },
            <%}%>
        ],
links=[
    <%for(int i=1;i<200;i++){%>
    {
        source: <%=i%>,
        target: <%=i+1%>
    },
    {
        source:<%=i%>,
        target: <%=i*2%>
    },
    {
        source:<%=i+1%>,
        target: <%=i-1%>
    },
    <%}%>
],
    option = {
            /*     color: ['#fc853e','#28cad8','#9564bf','#bd407e','#e5a214'], 用來改點的顏色*/        
        legend: {
            data: ['人物', '機構', '行為', '地點', '主題']
        },
        series: [{
            type: 'graph',
            layout: 'force',
            roam: true,    //實現縮放
            animation: false,
            label: {
                normal: {
                    position: 'right',
                    formatter: '{b}'
                }
            },
            draggable: true,
            data: nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: categories,
            force: {
                // initLayout: 'circular'
                // repulsion: 20,
                edgeLength: 5,
                repulsion: 20,
                gravity: 0.2
            },
            edges: links
        }]
    };

    myChart.setOption(option);
    myChart.on('click', function (params) {
        var data=params.value
        //點沒有source屬性
        if(data.source==undefined){
            nodeName=params.name
            window.open("NewFile1.jsp?a=mjh")
        }

});
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

       </script>
   </body>
</html>

免責聲明！

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

猜您在找 python數據可視化案例——力導向圖，網絡圖，關系圖（使用pyecharts，networkx，echarts，js） python數據可視化案例——力導向圖，網絡圖，關系圖（使用pyecharts，networkx，echarts，js）... 5 .5 數據庫關系圖 java+數據庫+D3.js 實時查詢人物關系圖 HTML5 （canvase）拓撲圖、關系圖及vis.js關系圖的使用在線數據庫關系圖工具學會sql數據庫關系圖 D3.js+Es6+webpack構建人物關系圖(力導向圖)，動態更新數據，點擊增加節點，拖拽增加連線... gojs|好用的js繪圖工具|前端流程圖|樹形圖|關系圖用cytoscape.js展示neo4j網絡關系圖