/**
* Created by Administrator on 2015/11/10 010.
*/

var home = function () {

//项目预警分析
var getProAlarmData = function (type) {
var postData = {"dictKey":"statistics_type"};
$.ajax({
"url":basicPath + "/admin/sys/report/getChartData",
"type":"post",
"contentType": "application/json",
"data" : JSON.stringify(postData),
"success":function(json){
if(json.status = "SUCCESS") {

var legend = [] ,
xAxis = [] ,
series = [] ;

$(json.responseData).each(function(i ,e){
if($.inArray(this.xAxis, xAxis) < 0 ) xAxis.push(this.xAxis);
if($.inArray(this.series, legend) < 0 ) {
legend.push(this.series);
var indexs = series.length;
series[indexs] = {};
series[indexs].name = this.series;
series[indexs].type = type;
series[indexs].data = [];
series[indexs].data.push(this.value);

} else {
var indexs = $.inArray(this.series, legend);
if($.isEmptyObject(series[indexs])) {
series[indexs] = {};
series[indexs].data = [];
}
series[indexs].name = this.series;
series[indexs].type = type;
series[indexs].data.push(this.value);
}
});
handleProAlarm(legend, xAxis, series);
} else {}

}
});
};

//模块报警
var getModuleAlarmData = function (type) {
var postData = {"dictKey":"statistics_type"};
$.ajax({
"url":basicPath + "/admin/sys/report/getChartDataSeries",
"type":"post",
"contentType": "application/json",
"data" : JSON.stringify(postData),
"success":function(json){
if(json.status = "SUCCESS") {

var xAxis = [] ,
series = [] ;

$(json.responseData).each(function(i ,e){
if($.inArray(this.xAxis, xAxis) < 0 ) xAxis.push(this.series);
if($.inArray(this.series, series) < 0 ) series.push(this.value);

});
handleModuleAlarm(xAxis, series);
} else {}

}
});
};

//项目报警
var getAlarmData = function (type) {
var postData = {"dictKey":"statistics_type"};
$.ajax({
"url":basicPath + "/admin/sys/report/getChartDataXaxisTop5",
"type":"post",
"contentType": "application/json",
"data" : JSON.stringify(postData),
"success":function(json){
if(json.status = "SUCCESS") {

var legend = [] ,
series = [] ;

$(json.responseData).each(function(i ,e){
if($.inArray(this.xAxis, legend) < 0 ) legend.push(this.xAxis);
series.push({"name":this.xAxis, "value": this.value});

});
handleAlarm(legend, series);
} else {}

}
});
};

//地图数据
var getMapData = function (type) {
var postData = {"dictKey":"statistics_type"};
$.ajax({
"url":basicPath + "/admin/sys/report/getChartDataXaxis",
"type":"post",
"contentType": "application/json",
"data" : JSON.stringify(postData),
"success":function(json){
if(json.status = "SUCCESS") {

var geoCoord = {} ,
series = [] ;

$(json.responseData).each(function(i ,e){
//geoCoord.push(this.xAxis+":"+this.value);
var xy = String(this.xy).split(','),
location = [];
location[0] = xy[0];
location[1] = xy[1];
geoCoord[this.xAxis] = location;
series.push({"name":this.xAxis, "value": this.value});

});
//console.log(geoCoord);
//console.log(series);
handleMap(geoCoord, series);
} else {}

}
});
};

//初始化地图数据
var handleMap = function (geoCoord, series) {

var option = {
title : {
text: '全国项目分布图',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c}"
},

dataRange: {
min : 0,
max : 100,
calculable : true,
color: ['maroon','purple','red','orange','yellow','lightgreen']
},

series : [
{
name: '项目',
type: 'map',
mapType: 'china',
hoverable: false,
roam:true,
data : [],
markPoint : {
symbolSize: 5, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
borderColor: '#87cefa',
borderWidth: 1, // 标注边线线宽,单位px,默认为1
label: {
show: false
}
},
emphasis: {
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: false
}
}
},
data : series
},
geoCoord: geoCoord
}
]
};

myChart = echarts.init($("#site_project")[0]);
window.onresize = myChart.resize;
myChart.setOption(option, true)

};

//初始化
var handleAlarm = function (legend, series) {

var option = {
title : {
text: '项目设备报警分析TOP5',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} : {c}"
},
legend: {
//orient : 'horizontal',
orient : 'vertical',
x : 'right',
//y : 'bottom',
data:legend
},

series : [
{
name:'报警数',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:series
}
]
};

myChart = echarts.init($("#site_alarm")[0]);
window.onresize = myChart.resize;
myChart.setOption(option, true)
};

//初始化模块报警分析
var handleModuleAlarm = function (xAxis, series) {
var option = {
title : {
text: '模块报警分析',
x:'center'
},
tooltip : {
trigger: 'axis'
},
xAxis : [
{
type : 'category',
data : xAxis
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'报警量',
type:'bar',
data:series

}
]
};

myChart = echarts.init($("#site_modalalarm")[0]);
window.onresize = myChart.resize;
myChart.setOption(option, true)

};

//初始化项目报警分析
var handleProAlarm = function (legend, xAxis, series) {
var option = {
title : {
text: '项目报警分析',
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
y: 'bottom',
data:legend
},

xAxis : [
{
type : 'category',
boundaryGap : false,
data : xAxis
}
],
yAxis : [
{
type : 'value'
}
],
series : series
};

myChart = echarts.init($("#site_proalarm")[0]);
window.onresize = myChart.resize;
myChart.setOption(option, true)

};

return {
init:function(){
//handleMap();
getMapData();
//handleAlarm();
getAlarmData();
//handleModuleAlarm();
getModuleAlarmData('bar');
//handleProAlarm();
getProAlarmData('line');
}
}
}();

ECharts展示后台数据的更多相关文章

  1. Echarts 获取后台数据 使用后台数据展示 柱形图

    后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 <%@ page language="java" import=&q ...

  2. Echarts 获取后台数据 使用后台数据展示 饼装图

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...

  3. EasyUI——实现展示后台数据代码

    下面是View显示代码: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml" ...

  4. Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决

    前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...

  5. Echarts动态加载后台数据

    注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...

  6. asp.net MVC项目开发之统计图echarts后台数据的处理(三)

    前台显示的东西,有相应的文档很容易修改,后台传递数据方式才是我们最关心的 首先要记住,我们一步数据使用的是post,那么后台代码我们要给方法加上 [HttpPost]注解 不然异步没有效果 下面上代码 ...

  7. el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除

    前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...

  8. Echarts 展示两条动态数据曲线

    利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...

  9. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

随机推荐

  1. 【Java并发基础】利用面向对象的思想写好并发程序

    前言 下面简单总结学习Java并发的笔记,关于如何利用面向对象思想写好并发程序的建议.面向对象的思想和并发编程属于两个领域,但是在Java中这两个领域却可以融合到一起.在Java语言中,面向对象编程的 ...

  2. 虚拟机 ubuntu系统忘记密码如何进入

    重启 虚拟机 按住shift键 会出现下面的界面 按住‘e’进入下面的界面往下翻 更改红框勾到的字符串为:  rw init=/bin/bash 然后按F10进行引导 然后输入 :”passwd”  ...

  3. 理解和运用Java中的Lambda

    前提 回想一下,JDK8是2014年发布正式版的,到现在为(2020-02-08)止已经过去了5年多.JDK8引入的两个比较强大的新特性是Lambda表达式(下文的Lambda特指JDK提供的Lamb ...

  4. 第四次作业:使用Packet Tracer理解RIP路由协议及ICMP协议

    0 个人信息 张樱姿 201821121038 计算1812 1 实验目的 理解RIP路由表的建立与更新 感受RIP坏消息传得慢 2 实验内容 使用Packet Tracer,正确配置网络参数,使用命 ...

  5. sougn开源,自己写的一个项目

    源代码:http://yun.baidu.com/share/link?shareid=1504480803&uk=2739888323 联系方式:1034465036@qq.com

  6. JSP&Servlet学习笔记----第3章

    Web容器是JSP/Servlet唯一认识的HTTP服务器. HTTP是基于请求/响应的无状态通信协议. 流程: 1.请求来到HTTP服务器 2.HTTP服务器将请求转交给Web容器 3.Web容器创 ...

  7. 关于求最长子串,使得最大减最小小于k的问题-以POJ4003为例

    问题 给出一个长度为\(n\)的序列\(a[i]\),有\(m\)次询问, 每次给你一个\(k\),让你求一个最长子串\([l,r]\),使得\(max_l^r\{a_i\}-min_l^r\{a_i ...

  8. HDU 6274 Master of Sequence (暴力+下整除)

    题意 两个1e5的数组a,b,定义\(S(t)=\left \lfloor \frac{t-b_i}{a_i} \right \rfloor\),有三个操作 1 x y:将\(a[x]\)变为\(y\ ...

  9. ugligy 转

    3.配置gulpfile.js 3.1.基本使用 JavaScript 1 2 3 4 5 6 7 8 var gulp = require('gulp'),     uglify = require ...

  10. 罗德里格斯旋转公式(Rodrigues' rotation formula)推导

    本文综合了几个相关的维基百科,加了点自己的理解,从比较基础的向量投影和叉积讲起,推导出罗德里格斯旋转公式.公式比较繁杂,如有错误,欢迎评论区指出. 对于向量的三维旋转问题,给定旋转轴和旋转角度,用罗德 ...