echarts 结合ajax完成上下级关系图的绘制

最新推荐文章于 2024-06-15 16:25:55 发布

置顶

慵懒的绿箭

最新推荐文章于 2024-06-15 16:25:55 发布

阅读量4.7k

点赞数 1

文章标签： echarts ajax 关系图上下级关系图

本文链接：https://blog.csdn.net/qq_27971625/article/details/76147582

版权

这10天一直在做一个关于企业关系图的模块，一开始的时候用公司的框架，但是做出来的效果很low，当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做，于是经过这1个星期把这个模块算是做的跟需求文档上要求的差不多了。在这里把过程记录一下。

代码中有更改，背景以及通过categories对节点分类，新代码放在github上了https://github.com/lvjan/work-question/

另在使用categories时发现在这里配置的配置项都能正常显示，但是就是symbolSize无法正确显示。只好在外面重新定义了。

因为我是直接在公司的项目上做的，而公司框架用的是xfire+spring,对于xfire我还不太了解，所以就先用最基础的jsp+servlet进行简单的实现。配置过程跳过，我就直接把代码粘贴出来好了。

JSP：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="pt/component/jQuery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="echarts/echarts/dist/echarts3.0.js"></script>
<script type="text/javascript">
window.οnlοad=function(){

var mycharts=echarts.init(document.getElementById("jieguo"));//获取需要进行应用echarts的对象
var Infodata=${Infodata};//获取初始查询出的数据

option = {//关系图的配置
title: {//标题组件，包含主标题和副标题
text: '高危企业关系图'
},
tooltip: {//提示框组件

},
animationDurationUpdate: 3,//动画时常
animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果
series : [
{
type: 'graph',//系列类型：关系图
layout:'force',//采用力引导布局
roam: true,//开启鼠标缩放和平移
focusNodeAdjacency:true,//在鼠标移动到节点上时显示邻接节点和连线
force:{
initLayout:'circular',//初始化布局
repulsion:8000,//节点之间的斥力
edgeLength:[100,300],//边两边的节点的距离
gravity:0.1//引力因子
},
edgeSymbol: ['none', 'arrow'],//连线的类型
symbolSize:100,//节点大小
itemStyle:{//图形样式

最低0.47元/天解锁文章

慵懒的绿箭

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
echarts 结合ajax完成上下级关系图的绘制

这10天一直在做一个关于企业关系图的模块，一开始的时候用公司的框架，但是做出来的效果很low，当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做，于是经过这1个星期把这个模块算是做的跟需求文档上要求的差不多了。在这里把过程记录一下。因为我是直接在公司的项目上做的，而公司框架用的是xfire+spring,对于xfire我还不太了解，所以就先用最基础的js
复制链接

扫一扫