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的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...
随机推荐
- 【学习笔记】Git的日常使用
Note:本笔记是我学习廖雪峰老师的Git教程整理得到,在此向廖老师的无私付出表示衷心的感谢! 0.Git的历史 Git是一个分布式的版本控制系统(C语言编写,一开始为Linux社区服务,替代BitK ...
- 给定区间[-2的31次方, 2的31次方]内的3个整数A、B和C,请判断A+B是否大于C
题目描述给定区间[-2的31次方, 2的31次方]内的3个整数A.B和C,请判断A+B是否大于C. 输入描述:输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一 ...
- 关于puremvc的几点思考
软件框架 框架要解决的问题是什么?这个问题感觉不能一概而论,就目前我遇到的项目实际来说主要是要解决以下几个问题 复用 并行开发 跨平台 项目背景:视频监控领域下,C/S & B/S模式的PC客 ...
- python 函数(实参与形参、传递参数)
函数 什么是函数?函数是带名字的代码块,用于完成具体的工作.写出一个函数后,就可以一直调用. 定义函数,函数的基本组成: 1.1 向函数传递参数 向函数中传递任意参数,这样打印出的结果就可以根据自己的 ...
- 【WPF学习】第四十章 画刷
画刷填充区域,不管是元素的背景色.前景色以及边框,还是形状的内部填充和笔画(Stroke).最简单的画刷类型是SolidColorBrush,这种画刷填充一种固定.连续的颜色.在XAML中设置形状的S ...
- 2019牛客多校2 H Second Large Rectangle(悬线法)
题意: 求第二大子矩形 思路: 设最大子矩形x*y,第二大子矩形一定在一下情况中 (x-1)*y x*(y-1) 其他最大子矩形候选者 注意去重手法 代码: #include<iostream& ...
- Go语言实现:【剑指offer】链表中环的入口结点
该题目来源于牛客网<剑指offer>专题. 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. Go语言实现: /** * Definition for sing ...
- 深入理解ASP.NET Core依赖注入
概述 ASP.NET Core可以说是处处皆注入,本文从基础角度理解一下原生DI容器,及介绍下怎么使用并且如何替换官方提供的默认依赖注入容器. 什么是依赖注入 百度百科中对 ...
- k8s系列---pod介绍
# yaml格式的pod定义文件完整内容: apiVersion: v1 #必选,版本号,例如v1 kind: Pod #必选,Pod metadata: #必选,元数据 name: string # ...
- HBASE手动触发major_compact
1.定时执行脚本#!/bin/bash source /etc/profile sh ./hbase shell <<EOF major_compact 'table_name' EOF ...