echarts的具体使用

最新推荐文章于 2023-03-30 19:55:38 发布

子心之泪

最新推荐文章于 2023-03-30 19:55:38 发布

阅读量163

点赞数

分类专栏： echarts的简单使用

本文链接：https://blog.csdn.net/qq_39775396/article/details/89357801

版权

echarts的简单使用专栏收录该内容

0 篇文章 0 订阅

订阅专栏

我写的这些直接放到jsp页面上效果显示出来，显示出来就是中间一个园，牵引着四周的几个园，展示的就是这样的效果，需要的朋友可以拿走。不谢！

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="charts/echarts.js"></script>
</head>

<body>
   <div id="chart-panel" style="height:100%;width:100%;"></div>
   <script>
var parList = echarts.init(document.getElementById('chart-panel'));
var shan;//节点name
var xiaa;//source
$(function() {
   var data = [
          {"jgmc":"邮政","lt_status":"002"},
          {"jgmc":"韵达 ","lt_status":"001"},
          {"jgmc":"申通","lt_status":"001"},
          {"jgmc":"圆通","lt_status":"001"}
       ];
       var dataArr = [];
var linkArr = [];
   var formatData = function(data) {
var temp = "本平台";
/* for(var i=0;i<data.length;i++){
if(data[i].lt_status=="002"){
temp = data[i].jgmc;
}
} */
var cen = {
name : temp,
itemStyle : {
normal : {
color : '#f90', //圆点的颜色
label : {
position : 'bottom',
textStyle : {
color : '#f90'
}
}
}
}};
dataArr.push(cen);
for(var j = 0;j<data.length;j++){
//if(data[j].lt_status=="001"){
var obj = {
name : data[j].jgmc,
category : 0,
draggable : true
};
var link = {
source : temp,
target : data[j].jgmc,
value : "合作"
};
dataArr.push(obj);
linkArr.push(link);
// }
}
   }

/* $.ajax({
url : '${pageContext.request.contextPath}/jkgl/yxjk/djxtjk/queryJkjgJSON.action',
data : {},
type : 'post',
async : true,
dataType : 'json',
success : function(da) {
shan = da.shang;
xiaa = da.xia;
alert(shan);}
}); */
//初始化echarts
var initEcharts = function(){
   option = {
tooltip : {
show : false
},
legend : {
x : "center",
data : [ "合作"]
},
animation : false,
series : [ {
categories : [ {
name : '合作',
itemStyle : {
normal : {
color : "#009800",
}
}
} ],
type : 'graph',
layout : 'force',
symbol : "circle",
symbolSize : 50,
roam : true, //禁止用鼠标滚轮缩小放大效果
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize : [ 0, 10 ],
// 连接线上的文字
focusNodeAdjacency : true, //划过只显示对应关系
edgeLabel : {
normal : {
show : true,
textStyle : {
fontSize : 20
},
formatter : "{c}"
}
},
categories : [ {
name : '合作',
itemStyle : {
normal : {
color : "#009800",
}
}
} ],
lineStyle : {
normal : {
opacity : 1,
width : 2,
curveness : 0
}
},
// 圆圈内的文字
label : {
normal : {
show : true,
formatter: '{b}'
}
},
force : {
repulsion : 5000
},
data : dataArr,
links : linkArr
} ]
};
parList.setOption(option);

}
           //下面这两个放到ajax中就可以了。
           //格式化返回数据
formatData(data);
           //加载关系图
initEcharts();
});
</script>
</body>
</html>

子心之泪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts的具体使用

我写的这些直接放到jsp页面上效果显示出来，显示出来就是中间一个园，牵引着四周的几个园，展示的就是这样的效果，需要的朋友可以拿走。不谢！<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% String path = request.getContextPath();...
复制链接

扫一扫