<%@ page language="java" contentType="text/html; charset=utf-8"
|
pageEncoding="utf-8"%>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<script src="/gfsc/pms/pub/echarts.min.js"></script>
|
<script type="text/javascript" src="/gfsc/pms/pub/jquery.min.js"></script>
|
</head>
|
<body>
|
<div style="height: 300px;width: 3000px; " id="mainBar_edit_1"></div>
|
<script type="text/javascript">
|
|
$(function (){
|
//--- 折柱 ---
|
//基于准备好的dom,初始化echart图表
|
var myChart2 = echarts.init(document.getElementById('mainBar_edit_1'));
|
//定义图表option
|
var option = {
|
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
|
|
//提示框，鼠标悬浮交互时的信息提示
|
tooltip : {
|
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
|
trigger : 'axis'
|
},
|
|
//图例，每个图表最多仅有一个图例
|
//legend : {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
// show : true,
|
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
// x : 'center',
|
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
|
// y : 'top',
|
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
|
// data : [ '蒸发量', '降水量' ]
|
//},
|
//工具箱，每个图表最多仅有一个工具箱
|
toolbox : {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
|
show : true,
|
//启用功能，目前支持feature，工具箱自定义功能回调处理
|
feature : {
|
//辅助线标志
|
mark : {
|
show : true
|
},
|
//dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退
|
dataZoom : {
|
show : true,
|
title : {
|
dataZoom : '区域缩放',
|
dataZoomReset : '区域缩放后退'
|
}
|
},
|
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
|
dataView : {
|
show : true,
|
readOnly : true
|
},
|
//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换
|
magicType : {
|
show : true,
|
type : [ 'line', 'bar' ]
|
},
|
//restore，还原，复位原始图表
|
restore : {
|
show : true
|
},
|
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
|
saveAsImage : {
|
show : true
|
}
|
}
|
},
|
//是否启用拖拽重计算特性，默认关闭(即值为false)
|
calculable : true,
|
//直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值
|
//横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
|
xAxis : [ {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
show : true,
|
//坐标轴类型，横轴默认为类目型'category'
|
type : 'category',
|
//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行
|
data : [],
|
axisLabel:{
|
//X轴刻度配置
|
interval:0,//0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
|
formatter:function(val){
|
return val?val.split("").join("\n"):"";
|
}
|
}
|
|
} ],
|
grid: { // 控制图的大小，调整下面这些值就可以，
|
x: 40,
|
x2: 100,
|
y2: 100,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
|
},
|
//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值
|
//纵轴通常为数值型，但条形图时则纵轴为类目型
|
yAxis : [ {
|
//显示策略，可选为：true（显示） | false（隐藏），默认值为true
|
show : true,
|
//坐标轴类型，纵轴默认为数值型'value'
|
type : 'value',
|
//分隔区域，默认不显示
|
splitArea : {
|
show : true
|
}
|
} ],
|
|
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象
|
series : [
|
{
|
//系列名称，如果启用legend，该值将被legend.data索引相关
|
name : '停机时长',
|
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
|
type : 'bar',
|
barWidth : 30,
|
itemStyle : { normal: {label : {show: true, position:'top'}}},//图形顶部数据
|
//系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值
|
data :[]
|
}]
|
};
|
|
var myChart2Name=[];
|
var myChart2Time=[];
|
$.ajax( {
|
url:"${pageContext.request.contextPath}/pms/faultWk/goFaultWkStatis.do?param=time",
|
type:'post',
|
async : true,
|
dataType:'JSON',
|
success:function(data) {
|
var result = data
|
var width = result.length;
|
if(result != null && result.length>0){
|
for(var i=0;i<result.length;i++){
|
myChart2Name.push(result[i].fault_name);
|
myChart2Time.push(result[i].time);
|
}
|
myChart2.setOption({ //载入数据
|
xAxis: {
|
data: myChart2Name //填入X轴数据
|
},
|
series: [ //填入系列（内容）数据
|
{
|
// 根据名字对应到相应的系列
|
name: '停机时长',
|
data: myChart2Time
|
}
|
]
|
});
|
}
|
},
|
error : function() {
|
// view("异常！");
|
alert("异常！");
|
}
|
});
|
//为echarts对象加载数据
|
myChart2.setOption(option);
|
});
|
|
</script>
|
</body>
|
</html>
|
