echarts动图表示关系
来源：互联网 发布：网站手机号码提取软件 编辑：程序博客网 时间：2024/04/29 11:05
lines：[{ coords: [目录坐标, 应用坐标1]}, { coords: [目录坐标, 应用坐标2]}, { coords: [目录坐标, 应用坐标3]}, { coords: [目录坐标, 应用坐标n]}]effectScatter:[{ name: '应用1', value: geoCoordMap['应用1'].concat(data.应用1), symbol: 'image:'+weixin}, { name: '应用2', value: geoCoordMap['应用2'].concat(data.应用2), symbol: 'image:'+weixin}, { name: '消费者1',
value: geoCoordMap['消费者1'].concat(data.消费者1),
symbol: 'image://'+weibo
}, { name: '消费者2', value: geoCoordMap['消费者2'].concat(data.消费者2), symbol: 'image://'+weibo}, { name: '目录',
value:[目录坐标].concat([目录统计结果成功失败数]),
itemStyle: {
normal: {
color: '#ffffff',
borderColor: '#000'
}
},
symbol: 'path://M42.677,26.583l15.466-0.022l-2.798,4.447l-9.855-0.027 L42.677,26.583L42.677,26.583z M45.562,31.912h9.769c-0.023,2.716,0.075,5.745-3.027,7.152c-1.931,0.875-3.87,0.294-4.639-0.339 C45.447,36.907,45.579,34.432,45.562,31.912L45.562,31.912z M35.709,46.547l0.152,26.248c0,0-0.305,2.039,1.091-0.605l4.001-7.576 c0.297-0.561-0.01-10.404,0.137-9.811c0.229,0.949,0.881,6.957,1.055,6.957l1.744,0.002L57.34,41.876L39.852,41.92 C36.746,41.928,35.543,44.057,35.709,46.547L35.709,46.547z M59.908,41.899c0.068-0.102,5.194-0.532,5.137,3.662 C65.01,48.129,65.29,73.16,65.29,73.16s0.033,0.725-0.579-0.25c-0.61-0.979-4.638-8.297-4.638-8.297l-0.138-9.928 c0,0-0.264,0.959-0.684,3.332c-0.418,2.373-0.688,3.744-0.688,3.744l-12.322-0.014L59.908,41.899L59.908,41.899z M42.545,64.125 h15.896l5.54,9.967l-26.003,0.004c-0.279,0-0.333-0.486,0.008-1.145L42.545,64.125z'
}]
后台数据封装：
/**
* 关系图数据
*
* @param dirId
* @param service
* @param request
* @param response
* @param model
* @return
*/
@ResponseBody
@RequestMapping(value = "businessData")
public String businessData(String dirId, HttpServletRequest request, HttpServletResponse response, Model model) {
JSONObject result = new JSONObject();
JSONArray linesArry = new JSONArray();// 坐标连接数组
double dirX = 113.2;// 目录X坐标
double appX = 114.2;// 应用X坐标
double applyX = 115.2;// 消费者X坐标,最上面一个消费者
double applyY = 30;// 消费者Y坐标,最上面一个消费者
double addY = 0.15;// Y坐标增量
String provideImg = "image://"+request.getContextPath()+"/static/echarts-3/asset/images/provide.png";
String receiveImg = "image://"+request.getContextPath()+"/static/echarts-3/asset/images/receive.png";
String serviceImg = "image://"+request.getContextPath()+"/static/echarts-3/asset/images/service.png";
JSONArray effectScatter = new JSONArray();//
// [{
// coords: [目录坐标, 应用坐标1]
// }, {
// coords: [目录坐标, 应用坐标2]
// }, {
// coords: [应用坐标1, 消费者坐标1]
// }, {
// coords: [应用坐标2, 消费者坐标2]
// }]
try {
if (StringUtils.isNotBlank(dirId)) {
DataSourceHolder.setDataSources(Global.getConfig("dirDataSource"));
DirDirectoryStructure dir = directoryService.get(dirId);
DataSourceHolder.reSet();
if (dir != null) {
// 顶级名称
String organizationName = "";
if (null != dir.getOrganization()) {
DataSourceHolder.setDataSources(Global.getConfig("dirDataSource"));
organizationName = dir.getOrganization().getName();
DataSourceHolder.reSet();
result.put("pName", organizationName);
}
Integer dirSuccess = 0;
Integer dirFailure = 0;
// 所有应用
List<Service> appList = appData(dirId);
JSONArray appSumArray = new JSONArray(); // 当前目录下所有应用坐标数组
JSONArray allApplyArray = new JSONArray(); // 当前目录下所有消费者坐标数组
for (int j = 0; j < appList.size(); j++) {
Service app = appList.get(j);
Integer appSuccess = 0;
Integer appFailure = 0;
Apply apply = new Apply();
apply.setService(app);
DataSourceHolder.setDataSources(Global.getConfig("centerDataSource"));
List<Apply> applyList = applyService.findList(apply); // 当前应用下所有消费者
DataSourceHolder.reSet();
Set<Office> companyList = new HashSet<Office>();// 当前应用下所有消费者部门(不重复)
// List<Apply> applyList = new ArrayList<Apply>(new HashSet<Apply>(applys));
JSONArray applySumArray = new JSONArray(); // 当前应用下所有消费部门坐标数组
JSONArray array = new JSONArray(); // 当前应用下新添加的消费部门坐标数组
for(Apply com : applyList) {
companyList.add(com.getCreateBy().getOffice());
}
for(Office o : companyList) {
// 当前应用下当前部门的调用次数
Integer success = 0;
Integer failure = 0;
for (int i = 0; i < applyList.size(); i++) {
Apply a = applyList.get(i);
if(o.getId().equals(a.getCreateBy().getOffice().getId())) {//同一部门
// 当前应用下当前部门当前消费者的调用次数
Api api = new Api();
api.setService(app);
DataSourceHolder.setDataSources(Global.getConfig("centerDataSource"));
List<Api> apiList = apiService.findList(api);
DataSourceHolder.reSet();
for (Api ap : apiList) {
Statistics sta = new Statistics();
sta.setApi(ap);
if (StringUtils.isNotBlank(a.getIp())) {
String[] ips = a.getIp().split(",");
for(String ip : ips) {
if(StringUtils.isNotBlank(ip)) {
sta.setConsumer(ip);
DataSourceHolder.setDataSources(Global.getConfig("monitorDataSource"));
List<Statistics> statisticsList = statisticsService.findList(sta);
DataSourceHolder.reSet();
for(Statistics s : statisticsList) {
success += Integer.valueOf(s.getSuccess());
failure += Integer.valueOf(s.getFailure());
}
}
}
}
}
}
}
// 当前部门坐标数组
JSONArray applyArray = new JSONArray();
// 当前部门坐标json
JSONObject applyCoord = new JSONObject();
// 当前部门调用次数数组
JSONArray applyValueArray = new JSONArray();
Boolean flag = false;
JSONArray exist = new JSONArray(); //已包含的坐标
for(int m=0;m<allApplyArray.size();m++) {
if(allApplyArray.getJSONObject(m).containsKey(o.getName())) { //该消费部门坐标已包含
flag = true;
exist = allApplyArray.getJSONObject(m).getJSONArray(o.getName());
break;
}
}
if(flag) { //该消费部门坐标已包含
applySumArray.add(exist);
applyValueArray.add(exist.getDoubleValue(0));
applyValueArray.add(exist.getDoubleValue(1));
}else { //该消费部门坐标不包含
applyArray.add(applyX);
applyY = applyY + addY;
applyArray.add(applyY);
applyCoord.put(o.getName(), applyArray); //新消费部门坐标
allApplyArray.add(applyCoord);//将新消费部门坐标加入该应用下所有消费部门坐标数组
array.add(applyArray); //将新消费部门坐标存入数组，方便计算应用坐标
applyValueArray.add(applyX);
applyValueArray.add(applyY);
applySumArray.add(applyArray);
}
JSONObject applyJson = new JSONObject();
applyJson.put("name", o.getName());
applyValueArray.add(success);
applyValueArray.add(failure);
applyJson.put("value", applyValueArray); // {value:[当前消费者坐标数组].concat([当前消费者调用次数数组)]}
applyJson.put("symbol", receiveImg);
effectScatter.add(applyJson);
// 当前应用下所有消费部门的调用次数
appSuccess += success;
appFailure += failure;
}
// 当前应用坐标
JSONArray appArray = new JSONArray();
// 当前消费者调用次数
JSONArray appValueArray = new JSONArray();
appArray.add(appX); // 当前应用x坐标
appValueArray.add(appX);
if (array.size() > 0) { // 该应用有新消费部门
// 当前应用y坐标
if (array.size() == 1) {
appArray.add(array.getJSONArray(0).getDoubleValue(1));
appValueArray.add(array.getJSONArray(0).getDoubleValue(1));
} else {
appArray.add((array.getJSONArray(array.size() - 1).getDoubleValue(1)
+ array.getJSONArray(0).getDoubleValue(1)) / 2);
appValueArray.add((array.getJSONArray(array.size() - 1).getDoubleValue(1)
+ array.getJSONArray(0).getDoubleValue(1)) / 2);
}
appSumArray.add(appArray);
// 应用关联消费者
for (int i = 0; i < applySumArray.size(); i++) {
JSONObject coordsJson = new JSONObject();
JSONArray coordsArray = new JSONArray();
coordsArray.add(appArray);
coordsArray.add(applySumArray.getJSONArray(i));
coordsJson.put("coords", coordsArray);
linesArry.add(coordsJson);
}
} else { // 该应用无新消费部门
applyY = applyY + addY;
appArray.add(applyY);
appValueArray.add(applyY);
appSumArray.add(appArray);
}
// 应用调用次数
JSONObject appJson = new JSONObject();
appJson.put("name", app.getName());
appValueArray.add(appSuccess);
appValueArray.add(appFailure);
appJson.put("value", appValueArray);
appJson.put("symbol", serviceImg);
effectScatter.add(appJson);
dirSuccess += appSuccess;
dirFailure += appFailure;
}
// 目录坐标
JSONArray dirArray = new JSONArray();
JSONArray dirValueArray = new JSONArray();
// 目录关联应用
if (appSumArray.size() > 0) {
dirArray.add(dirX);
dirValueArray.add(dirX);
if (appSumArray.size() == 1) {
dirArray.add(appSumArray.getJSONArray(0).getDoubleValue(1));
dirValueArray.add(appSumArray.getJSONArray(0).getDoubleValue(1));
} else {
dirArray.add((appSumArray.getJSONArray(appSumArray.size() - 1).getDoubleValue(1)
+ appSumArray.getJSONArray(0).getDoubleValue(1)) / 2);
dirValueArray.add((appSumArray.getJSONArray(appSumArray.size() - 1).getDoubleValue(1)
+ appSumArray.getJSONArray(0).getDoubleValue(1)) / 2);
}
for (int i = 0; i < appSumArray.size(); i++) {
JSONObject coordsJson = new JSONObject();
JSONArray coordsArray = new JSONArray();
coordsArray.add(dirArray);
coordsArray.add(appSumArray.getJSONArray(i));
coordsJson.put("coords", coordsArray);
linesArry.add(coordsJson);
}
}
// 目录调用次数
JSONObject dirJson = new JSONObject();
dirJson.put("name", organizationName);
dirValueArray.add(dirSuccess);
dirValueArray.add(dirFailure);
dirJson.put("value", dirValueArray);
dirJson.put("symbol", provideImg);
effectScatter.add(dirJson);
}
}
} catch (Exception e) {
e.printStackTrace();
}
result.put("lines", linesArry);
// JSON.toJSONString(linesArry,
// SerializerFeature.DisableCircularReferenceDetect)
result.put("effectScatter", effectScatter);
return JSON.toJSONString(result, SerializerFeature.DisableCircularReferenceDetect);
}
前台页面：
<%@ page contentType="text/html;charset=UTF-8"%><%@ include file="/webpage/include/taglib.jsp"%><html><head><title>服务监控</title><meta name="decorator" content="default" /><style>.widget-head-color-box{ background-color: #1b1b1b;}</style> <script type="text/javascript" src="${ctxStatic}/echarts-3/echarts.js"></script></head><body class="gray-bg"><div class="wrapper wrapper-content"><div class="row"> <div class="col-sm-12"> <div class="widget-head-color-box" style="padding:5px; color:#fff; border:solid 1px #999;"> <div id="serviceChart1" style="height: 1000px;"></div> </div> </div></div> </div><script type="text/javascript" > var data = null;var serviceChart1 = null;//var tabURL = "${ctx}/monitor/businessMonitor/tabData?dirId=${directory.id}";$(document).ready(function() { var serviceChart1 = echarts.init(document.getElementById('serviceChart1'));var uploadedDataURL = "${ctxStatic}/echarts-3/asset/data-1479697763933-ByhDrJlGx.json";var businessDataURL = "${ctx}/monitor/businessMonitor/businessData?dirId=${directory.id}"$.get(uploadedDataURL, function(data1) { echarts.registerMap('wuhan', data1); var result = $.ajax({url:businessDataURL,async:false}); var datas = {}; var lines = []; var effectScatter = []; var pName = ""; if(result.status == 200){ datas = JSON.parse(result.responseText); if(datas != null && typeof datas != 'undefined'){ lines = datas.lines; effectScatter = datas.effectScatter; pName = datas.pName; } } var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; option = { backgroundColor: '#1b1b1b', title: { text: pName+"适配器消费关系图", left: '-2', top: '10px', textStyle: { color: '#ffffff', fontFamily: '微软雅黑', fontWeight: 'lighter', fontSize: 18 } }, tooltip: { trigger: 'item', formatter: function(o) { return o.name + "</br>成功：" + o.value[2]+"; 失败："+ o.value[3]; }, textStyle: { color: '#0D6690' } }, geo: { map: 'wuhan', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { color:'rgba(22,22,2,0)', areaColor:'rgba(22,22,2,0)',borderColor:'rgba(22,22,2,0)' }, emphasis: { color:'rgba(22,22,2,0)', areaColor:'rgba(22,22,2,0)',borderColor:'rgba(22,22,2,0)' } } }, series: [{ type: 'lines', zlevel: 1, scaleLimit:{min:0.8,max:1.1}, effect: { show: true, period: 3, trailLength: 0.1, color: '#A6C84C', symbolSize: 8 }, lineStyle: { normal: { color: '#a6c84c', width: 0,/* curveness: 0.2 */ } }, data: lines }, { type: 'lines', zlevel: 2, scaleLimit:{min:0.8,max:1.1}, effect: { show: true, period: 3, trailLength: 0, symbol: planePath, symbolSize: 15 }, lineStyle: { normal: { color: '#a6c84c', width: 1, opacity: 0.4,/* curveness: 0.2 */ } }, data: lines }, { type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, scaleLimit:{min:0.8,max:1.1}, rippleEffect: { period: 4, scale: 2.5, brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: '22', itemStyle: { normal: { color: '#fff', } }, data: effectScatter }] }; serviceChart1.setOption(option); window.onresize=serviceChart1.resize; var currentIndex = -1;var timeTicket = setInterval(function() {var dataLen = option.series[2].data.length;currentIndex = (currentIndex + 1) % dataLen;// 显示 tooltipserviceChart1.dispatchAction({type: 'showTip',seriesIndex: 2,dataIndex: currentIndex});}, 3000);});/* var recordArry = getData(tabURL);$("#records").empty(); var html = ''; for (i in recordArry) { html += '<tr>'; html += '<td>' + recordArry[i].appName + '</td>'; html += '<td>' + recordArry[i].applyName + '</td>'; html += '<td>' + recordArry[i].success + '</td>'; html += '<td>' + recordArry[i].failure + '</td>'; html += '</tr>'; } $("#records").html(html); */});</script><script type="text/javascript"> /* function getData(tabUrl) { var result = $.ajax({url:tabUrl,async:false}); var datas = {}; var dataArry = []; if(result.status == 200){ datas = JSON.parse(result.responseText); if(datas != null && typeof datas != 'undefined'){ dataArry = datas.data; return dataArry; } } } */</script></body> </html>
界面
0 0
- echarts动图表示关系
- echarts统计图表与工具关系可视化
- 【python web】Flask+Echarts 实现动图图表
- Echarts图表
- echarts-图表
- echarts图表
- echarts图表
- Echarts 图表
- Echarts图表
- echarts图表
- ECharts-图表
- echarts 图表制作(饼图、柱状图(包含关系)、时间轴)
- echarts-springmvc+echarts实现图表
- echarts-springmvc+echarts实现图表
- echarts-springmvc+echarts实现图表
- echarts实现统计图表
- Echarts图表统计学习
- 统计Echarts图表
- Dlib机器学习笔记1 -- Windows下的编译安装调试（超详细，菜鸟也成功）
- Retinex图像增强算法(针对彩色图像)
- HDU2018母牛的故事
- apache多站点配置
- leetcode 538. Convert BST to Greater Tree
- echarts动图表示关系
- Linux安装字体
- ONVIF中调用soap_send___wsdd__Probe返回-1问题排查
- The external network bridge 'br-ex' does not exist问题解决
- iOS——UITabBarItem
- 随笔- int 、uint区别及数据长度
- Vmware虚拟机NAT配置静态IP详解
- 放苹果
- Since your iTunes Connect status is Metadata Rejected, we do NOT require a new binar被拒原因总结
