网站首页 > 技术文章 正文
百度echarts,将数据以图表方式展示：
var startDate;
var endDate;
$(document).ready(function() {
startDate = $("#txtStartDate").val(); //开始时间
endDate = $("#txtEndDate").val(); //结束时间
initFormatDate(); //初始化时间格式
initData(); //初始化数据
});
/**
* 初始化数据
* @returns
*/
function initData() {
$("#loaddataview").show(); //显示加载中动画
getChartsLine(startDate, endDate, '报价', '查询数据条件', 'jsp_view_line');//异步请求后台对应数据_折线
getChartsPie(startDate, endDate, '报价', '查询数据条件', 'jsp_view_pie');//异步请求后台对应数据_饼图
$("#loaddataview").hide(); //隐藏加载中动画
}
/**
* 请求后台对应数据_折线
* @param startDate 开始时间
* @param endDate 结束时间
* @param chaTitle 图表名称
* @param taskType 请求类型
* @param viewId 存放位置
* @returns
*/
function getChartsLine(startDate, endDate, chaTitle, taskType, viewId) {
var postData = {
startDate: startDate,
endDate: endDate,
taskType: taskType
};
$.ajax({
type: "post",
url: "xxxxxxxxxxx.do",
data: postData,
success: function(res) {
if(res == "") {
alert("当前无数据！");
return false;
}
initCharline(res, chaTitle, viewId); //装载折线图数据
}
})
}
/**
* 请求后台对应数据_饼图
* @param startDate 开始时间
* @param endDate 结束时间
* @param chaTitle 图表名称
* @param taskType 请求类型
* @param viewId 存放位置
* @returns
*/
function getChartsPie(startDate, endDate, chaTitle, taskType, viewId) {
var postData = {
startDate: startDate,
endDate: endDate,
taskType: taskType
};
$.ajax({
type: "post",
url: "xxxxxxxxx.do?actionType=search",
data: postData,
success: function(res) {
if(res == "") {
alert("当前无数据！");
return false;
}
initCharPie(startDate, endDate, res, chaTitle, viewId, taskType); //装载饼图数据
}
})
}
/**
* 装载折线图数据
* @param dataList 图表中数据集
* @param chaTitle 图表标题内容
* @param viewId 图表显示位置
* @returns
*/
function initCharline(dataList, chaTitle, viewId) {
var monitorLineInfoCharts;
var countMonitor = []; //监控总数
var countNormal = []; //正常
var countError = []; //异常
var monitorDate = []; //时间线
if(dataList != null && dataList != "") {
$(dataList).each(function(index, domEle) {
countMonitor.push(domEle.totalNumber);
countNormal.push(parseInt(domEle.totalNumber) - parseInt(domEle.abnormalNumber));
countError.push(domEle.abnormalNumber);
monitorDate.push(domEle.createdDate.substring(0, 10));
});
}
option = {
title: {
text: chaTitle + '数据汇总'
},
tooltip: {
trigger: 'axis'
},
color: ["#61a0a8", "#2f4554", "#c23531"],
legend: {
data: ['总数', '正常', '异常']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
magicType: {
type: ['line', 'bar'] //图表切换方式
},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: monitorDate
/*,axisLabel: { //时间线倾斜
interval:0,
rotate:40
}*/
},
yAxis: {
type: 'value'
},
series: [{
name: '总数',
type: 'line',
lineStyle: {
normal: {
color: '#61a0a8',
//width:1// 线宽度
}
},
data: countMonitor,
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '正常',
type: 'line',
lineStyle: {
normal: {
color: '#2f4554',
//width:1// 线宽度
}
},
data: countNormal,
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '异常',
type: 'line',
lineStyle: {
normal: {
color: '#c23531',
//width:1// 线宽度
}
},
data: countError,
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}
]
};
monitorLineInfoCharts = echarts.init(document.getElementById(viewId)); //指定图表显示位置
monitorLineInfoCharts.showLoading(); //显示echarts自带加载动画
monitorLineInfoCharts.hideLoading(); //隐藏echarts自带加载动画
monitorLineInfoCharts.clear(); //清除之前的图表数据
monitorLineInfoCharts.setOption(option); //装载新数据
window.onresize = function() {
monitorLineInfoCharts.resize(); //调整屏幕大小展示
};
}
/**
* 初始化饼图
* @param startDate TIME-开始时间
* @param endDate TIME-结束时间
* @param dataList 图表中数据集
* @param chaTitle 图表标题内容
* @param viewId 图表显示位置
* @returns
*/
function initCharPie(startDate, endDate, dataList, chaTitle, viewId, taskType) {
var monitorPieInfoCharts;
var msgInfo = []; //异常信息
var msgCount = []; //异常条数
if(dataList != null && dataList != "") {
$(dataList).each(function(index, domEle) {
console.log("errTitle:" + chaTitle + ",errInfo:" + domEle.msgInfo + ",errCount:" + domEle.msgCount);
var varmsgInfo = domEle.msgInfo;
//if(varmsgInfo.length>7){
// varmsgInfo=varmsgInfo.substring(0,7)+'...';
//}
msgInfo.push(varmsgInfo);
msgCount.push({value: domEle.msgCount,name: varmsgInfo}); //{value: 335, name: '空指针'},//饼图数据结构
});
} else {
//后台返回数据为空时展示
msgInfo.push("当前数据无异常信息");
msgCount.push({value: 0,name: "当前数据无异常信息"}); //{value: 335, name: '空指针'},
}
option = {
title: {
text: chaTitle + '异常',
subtext: ' TIME ' + startDate.substring(5, 10) + ' ' + endDate.substring(5, 10),
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
//bottom : -5,
//left: 'left',
//padding:[0,300,0,0],//[（距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）]
data: msgInfo
},
//自定义扇形颜色
color: [ /*'rgb(203,155,255)',*/ 'rgb(149,162,255)', 'rgb(58,186,255)', 'rgb(119,168,249)', 'rgb(235,161,159)'], //五个数据，五个颜色
series: [{
name: taskType, //精准定位
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: msgCount,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
monitorPieInfoCharts = echarts.init(document.getElementById(viewId)); //指定图表显示位置
monitorPieInfoCharts.showLoading(); //显示echarts自带加载动画
monitorPieInfoCharts.hideLoading(); //隐藏echarts自带加载动画
monitorPieInfoCharts.clear(); //清除之前的图表数据
monitorPieInfoCharts.setOption(option); //装载新数据
window.onresize = function() {
monitorPieInfoCharts.resize(); //调整屏幕大小展示
};
monitorPieInfoCharts.on("click", downloadErrMsg);
}
/**
* 下载异常信息-csv （点击异常信息时）
* @param param
* @returns
*/
function downloadErrMsg(param) {
var startDate = $("#txtStartDate").val(); //开始时间
var endDate = $("#txtEndDate").val(); //结束时间
var errName = param.data.name;
var taskType = param.seriesName;
if(errName == "") {
return false;//无数据直接返回
}
if(errName == "" || errName == null || errName == undefined) {
return false;
}
// window.open这种方式传输中文会乱码 不可取要采用encodeURI(encodeURI(errName)方式 后台也要做相应处理
// String errName = URLDecoder.decode(request.getParameter("errName").trim(), "utf-8");//异常信息//处理window.open中文方式乱码
// var url='downErrMsgByTaskType.do?startDate='+startDate+"&endDate="+endDate+"&taskType="+taskType+"&errName="+errName;//通过类型+异常信息下载
var url = 'downErrMsgByTaskType.do?startDate=' + startDate + "&endDate=" + endDate + "&taskType=" + taskType + "&errName=" + encodeURI(encodeURI(errName)); //通过类型+异常信息下载
window.open(url, 'newWin', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,draggable=false,width=500,height=150');
// window.open(url,'_blank');//下载文件
}
/**
* 下载异常信息方法all or type（右上角下载按钮）
* @param dwtype
* @returns
*/
function downloadAllErrMsg(dwtype) {
var startDate = $("#txtStartDate").val(); //开始时间
var endDate = $("#txtEndDate").val(); //结束时间
var taskType = dwtype;
var url = ''; //下载请求地址
if(taskType == "") {
url = 'xxxdownAllErrMsg.do?startDate=' + startDate + "&endDate=" + endDate; //下载所有
} else {
url = 'xxxdownErrMsgByTaskType.do?startDate=' + startDate + "&endDate=" + endDate + "&taskType=" + taskType; //通过类型下载
}
window.open(url, 'newWin', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,draggable=false,width=500,height=150');
// window.open(url,'_blank');//下载文件
}
/**
* 日期格式初始化方法 YYYY-MM-DD
* @returns
*/
function initFormatDate() {
//设置时间格式
$("#txtStartDate").datetimepicker({
format: 'YYYY-MM-DD',
});
$("#txtEndDate").datetimepicker({
format: 'YYYY-MM-DD',
});
}
/**
* 搜索按钮绑定方法
* @returns
*/
$("#btnSearch").click(function() {
var startDateStr = $("#txtStartDate").val();
var endDateStr = $("#txtEndDate").val();
if(startDateStr == null || startDateStr == "" ||
endDateStr == null || endDateStr == "") {
alert("创建时间不能为空！");
return;
}
var startDate = new Date(startDateStr);
var endDate = new Date(endDateStr);
if(startDate > endDate) {
alert("创建起始时间不能大于截止时间！");
return;
}
var maxDate = new Date();
if(maxDate < endDate) {
alert("创建结束时间不能大于今天！");
return;
}
if(WeeksBetw($("#txtStartDate").val(), $("#txtEndDate").val()) > 30) {
alert("报价时间查询范围限制在30天以内，请检查！");
return false;
}
initData(); //加载echarts数据
});
/**
* 返回两个日期相差的天数
* @param date1 开始时间
* @param date2 结束时间
* @returns
*/
function WeeksBetw(date1, date2) {
date1 = date1.replace(/-/g, "/");
date2 = date2.replace(/-/g, "/");
//这里的date1、date2为日期的字符串
//将date1,date2转换为Date对象
var _dt1 = new Date(date1);
var _dt2 = new Date(date2);
var dt1 = _dt1.getTime();
var dt2 = _dt2.getTime();
return parseInt(Math.abs(dt1 - dt2) / 1000 / 60 / 60 / 24);
}
/**
* 动态校验开始时间
* @returns
*/
function onblurStartDate() {
var startDateStr = $("#txtStartDate").val();
var nowDate = new Date().toISOString().substring(0, 10); //当前时间截取操作
var endDateStr = addDate(startDateStr, 29);
if(startDateStr >= nowDate) {
alert("开始时间不能大于等于今天！");
var endDate = addDate(nowDate, -29);
$("#txtStartDate").val(endDate);
return;
}
if(endDateStr >= nowDate) {
$("#txtEndDate").val(nowDate);
return false;
}
$("#txtEndDate").val(endDateStr);
}
/**
* 动态校验结束时间
* @returns
*/
function onblurEndDate() {
var endDateStr = $("#txtEndDate").val();
var nowDate = new Date().toISOString().substring(0, 10); //当前时间截取操作
if(endDateStr > nowDate) {
alert("结束时间不能大于今天！");
$("#txtEndDate").val(nowDate);
var startDate = addDate(nowDate, -29);
$("#txtStartDate").val(startDate);
return false;
}
var startDateStr = addDate(endDateStr, -29);
$("#txtStartDate").val(startDateStr);
}
/**
* 日期加减法 格式:addDate('2017-01-11',20)
* @param date计算开始的日期
* @param days需要加的天数 （正数加，负数减）
* @returns 计算后的时间
*/
function addDate(date, days) {
var d = new Date(date);
d.setDate(d.getDate() + parseInt(days));
var m = d.getMonth() + 1;
m = parseInt(m) < 10 ? ('0' + m) : m;
var day = parseInt(d.getDate()) < 10 ? ('0' + d.getDate()) : d.getDate();
return d.getFullYear() + '-' + m + '-' + day;
}猜你喜欢
- 2024-10-12 安详解在vue中使用echarts图表实例代码
- 2024-10-12 echarts两点连线，中间没有数值情况下实现连线，x轴标题超长解决
- 2024-10-12 ECharts—百度可视化图表插件（echarts数据可视化网站）
- 2024-10-12 vue之将echart封装为组件（vue echart 组件）
- 2024-10-12 「ECharts 术语速查手册」简介（echarts emphasis）
- 2024-10-12 分享7个常用的echarts示例（echarts介绍）
- 2024-10-12 Vue实战090:Vue使用ECharts图表详解
- 2024-10-12 9、echarts 在 vue 中怎么引用?(必会)
- 2024-10-12 Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
- 2024-10-12 Echart可视化学习笔记（echarts数据可视化 html模板）
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)