/**
* 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. artTemplate--模板使用自定义函数(1)

    案例 因为公司业务需要频繁调用接口,后端返回的都是json树对象,需要有些特殊的方法做大量判断和数据处理,显然目前简单语法已经不能满足业务需要了,需要自己定制一些 方法来处理业务逻辑. 例如后台返回的 ...

  2. Spring Boot 2.x基础教程:使用国产数据库连接池Druid

    上一节,我们介绍了Spring Boot在JDBC模块中自动化配置使用的默认数据源HikariCP.接下来这一节,我们将介绍另外一个被广泛应用的开源数据源:Druid. Druid是由阿里巴巴数据库事 ...

  3. Python小白入门题一——文件增删改

    题目描述:用python对文件进行增(创建一个文件).删(删除一个文件).改(重命名)操作. 说明:新建了一个文件夹files存放新增的两个文件,随后这两个文件被批量重命名成“数字.txt”,之后这两 ...

  4. web前端sprite,精灵图,雪碧图

    css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...

  5. php扩展模块的安装

    PHP的扩展模块安装 模块安装总则: 进入到ext/目录下对应的模块 执行/usr/local/php/bin/phpize 也就是执行一遍phpize生成编译文件 ./configure --wit ...

  6. PHP第三方登录——QQ登录

    主要内容 简单回顾OAuth协议基本原理 接入QQ登录的前置条件以及开放平台账号申请 引入官方SDK SDK参数配置 SDK核心方法解读 整合QQ登录SDK到Web应用中 SDK优化 调用API的开发 ...

  7. 《古剑奇谭3》千秋戏辅助工具(前端React制作)

    前言 一直身在武汉,基于众所周知的疫情原因,这个春节只能宅着. 不过其实这个春节是这些年来过得最爽的一个了. 没有鞭炮,不用四处跑,安安心心呆在家里玩玩游戏看看书写写代码,其实日子过得还是挺悠闲的. ...

  8. PYTHON 学习笔记1 PYTHON 入门 搭建环境与基本类型

    简介 Python,当然大家听到这个名词不再是有关于像JAVA 一样的关于后台,我们学习Python 的目的在于对于以后数据分析和机器学习AI 奠定基础,Python 在数据分析这一块,可谓是有较好的 ...

  9. 自定义属性的访问 - Customizing attribute access

    自定义属性的访问 - Customizing attribute access 在 python 中, 下列方法可以实现类实例属性 instance.attribute 的 使用,设置,删除. obj ...

  10. centos7 上为php-fpm安装gd扩展库

    转自:https://blog.csdn.net/liyyzz33/article/details/89166110 首先查看自己当前php的版本 php -v PHP 5.6.40 查看yum中是否 ...