/**
* 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. Linux vi & bash使用笔记

    f 1.vi入门级命令 打开或新建 vi filename 有三种模式,刚开始进去的是一般模式,在一般模式下按 I 之后进入编辑模式 ,按Esc进入命令模式 在命令模式下按 :wq 保存退出 多个窗口 ...

  2. 曹工说Spring Boot源码(13)-- AspectJ的运行时织入(Load-Time-Weaving),基本内容是讲清楚了(附源码)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  3. Python多重继承之菱形继承

    继承是面向对象编程的一个重要的方式,通过继承,子类就可以扩展父类的功能.在python中一个类能继承自不止一个父类,这叫做python的多重继承(Multiple Inheritance ). 语法 ...

  4. The Top 500 Worst Passwords (2008)

    Top 100 123456 password 12345678 1234 pussy 12345 dragon qwerty 696969 mustang letmein baseball mast ...

  5. Web框架之Gin介绍及使用

    Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...

  6. Linux密码策略--设置随机密码

    #!/bin/bash # @Author: HanWei # @Date: -- :: # @Last Modified by: HanWei # @Last Modified -- :: # @E ...

  7. learn about sqlserver partitition and partition table 1

    Dear all, Let get into business, the partitions on sql server is very different with that on oracle. ...

  8. PBFT算法java实现

    PBFT 算法的java实现(上) 在这篇博客中,我会通过Java 去实现PBFT中结点的加入,以及认证.其中使用socket实现网络信息传输. 关于PBFT算法的一些介绍,大家可以去看一看网上的博客 ...

  9. C++括号匹配检测(用栈)

    输入一串括号,包括圆括号和方括号,()[],判断是否匹配,即([]())或[([][])]为匹配的正确的格式,[(])或([())为不匹配的格式. #include<iostream> # ...

  10. Integer缓存机制-基本数据类型和包装类型-自动拆装箱

    Integer缓存机制 总结: 1.jdk1.5对Integer新增了缓存机制,范围在-128-127(这个范围的整数值使用频率最高)内的自动装箱返回的是缓存对象,不会new新的对象,所以只要在缓存范 ...