数据嵌入js的关系图
时间:2019-12-03
本文章向大家介绍数据嵌入js的关系图,主要包括数据嵌入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>
原文地址:https://www.cnblogs.com/mm20/p/11978938.html
- silverlight如何在运行时用代码动态控制(或创建)动画
- 小程序深夜连发4大功能!你们要的直播来了!
- 机器学习在现实生活中到底有哪些应用?
- 千锋郑州告诉你未来十年Python市场前景如何
- 读书笔记:基于web的工作流引擎设计
- 地图知识-坐标网
- silverlight/xap如何接收参数?
- Silverlight中多个Xaml("场景"? or "窗口"? )之间的切换/调用/弹出/传参数问题小结
- Keepalived使用梳理
- mysql操作命令梳理(4)-中文乱码问题
- 今日头条李磊:机器写作与 AI 辅助创作
- 【1】CommonCode快速代码集
- mysql操作命令梳理(3)-pager
- 前后端协调处理checkbox
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [前端] 设定为disabled的表单域值不能被提交
- 工厂方法模式
- 原创 | 这道题codeforces的简单题差点做了我一下午,你能解出来吗?
- OpenCV4 部署DeepLabv3+模型
- 使用OpenCV实现哈哈镜效果
- 如何使用OpenCV在Python中访问IP摄像头
- 分享我学习Pandas使用的资料,可能是新手入门Pandas最好的教程!
- 原创 | Git入门教程,详解Git文件的四大状态
- 原创 | ACMer不得不会的线段树,究竟是种怎样的数据结构?
- dplyr包summarize的使用
- Mysql的binlog和relay-log到底长啥样?
- 原创 | matplotlib绘图教程,设置标签与图例
- 原创 | 从抽象类开始,详解责任链模式
- 开发一个渐进式Web应用程序(PWA)前都需要了解什么?
- 知识图谱入门(二)