zoukankan html css js c++ java

数据嵌入js的关系图

参照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>

查看全文

相关阅读:
array with objects sort
Vue组件之区域滚动
 ajax跨域请求问题总结
 常见contentType
Sublime Text 3实用快捷键大全
 具有层级关系的扁平化数组转化成树形结构数组
 阿里云地图选择器
 前端解析二进制文件流并下载
 tool.js日常工具方法
 git操作

原文地址：https://www.cnblogs.com/mm20/p/11978938.html