ECharts展示后台数据
/**
* 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展示后台数据的更多相关文章
- Echarts 获取后台数据 使用后台数据展示 柱形图
后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 <%@ page language="java" import=&q ...
- Echarts 获取后台数据 使用后台数据展示 饼装图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
- EasyUI——实现展示后台数据代码
下面是View显示代码: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml" ...
- Django+Xadmin+Echarts动态获取数据legend颜色显示灰色问题已解决
前段时间做的使用Django的Xadmin后台和百度Echarts进行后台数据可视化,功能虽然实现,展示出来的legend图例,都是灰色的,只有鼠标放上去才会显示彩色的.百度都快被我刨穿了,看到有类似 ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
- asp.net MVC项目开发之统计图echarts后台数据的处理(三)
前台显示的东西,有相应的文档很容易修改,后台传递数据方式才是我们最关心的 首先要记住,我们一步数据使用的是post,那么后台代码我们要给方法加上 [HttpPost]注解 不然异步没有效果 下面上代码 ...
- el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除
前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...
- Echarts 展示两条动态数据曲线
利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...
- 基于Vue开发的门户网站展示和后台数据管理系统
基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
随机推荐
- Go语言实现:【剑指offer】左旋转字符串
该题目来源于牛客网<剑指offer>专题. 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左 ...
- Go语言实现:【剑指offer】二叉树的下一个结点
该题目来源于牛客网<剑指offer>专题. 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回. 注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. Go语 ...
- SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作
SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作 1> 数据准备 -- 创建测试表 CREATE TABLE `tb_user` ( `id` ) NOT ...
- 给 iTerm 终端设置代理
本文介绍如何为自己的终端设置代理,从而实现在命令行中访问Google. 1. 背景 当你使用SS FQ时,大部分浏览器都可以成功访问Google,但是在命令行下执行curl https://www.g ...
- Maven项目pom文件的节点释意
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- OSPF配置实验(一)
单区域OSPF 命令: R1(config)#router ospf 1 //启动OSPF进程 R1(config-router)#router-id 1.1.1.1 // ...
- H5浏览器强制手机横屏
H5强制手机横屏 1. 通过screen.orientation可以定义手机屏幕的方向,但是lock()方法仅在浏览器已经通过requestFullscreen()切换到全屏模式时起作用,例:强制手机 ...
- Ts环境搭建
一.ts环境搭建 安装node.js,用dos命令npm全局安装typescripe包环境 进入vscode官网下载zip文件解压后使用code.exe
- JMeter函数助手中Random函数详解
1.__Random函数的生成 The minimum value allowed for a range of values:一个范围内允许的最小值 The maximum value allowe ...
- linux中权限管理命令(chmod/chown/chgrp/unmask)
目录 chmod chown chgrp umask chmod 解释 命令名称:chmod 命令英文原意:change the permissions mode of a file 命令所在路径:/ ...