仪表盘
//调用入口
//生成仪表盘
gaugParams = {
"orgName":orgName,
"orgSafeIndex":org_safeIndex
};
gaugChartsInit(gaugDivId,orgId,gaugParams,"50%","32%","58%");
///////////////////////////////////////////////////////////
function gaugChartsInit(divId, orgId, params, x, y, r) {
//var counts = getGaugChartData(orgId, action);
var ybp = [ gaugSeriesItem(x, y, r, params["orgSafeIndex"], 0,
params["orgName"]) ];
require.config({
paths : {
echarts : './pub/chart/ECharts/echarts'
}
});
require([ 'echarts', 'echarts/chart/gauge' // 加载模块,按需加载
], function(ec) {
var myChart = ec.init(document.getElementById(divId));
var option = {
tooltip : {
formatter : "{c}"
},
/*
* legend: { show:false, orient : 'horizontal', x : 'left',
* y:'bottom', itemHeight:10, textStyle:{ color: 'blue' },
* data:['安全','较安全','较重','严重','特别严重'] },
*/toolbox : {
show : false,
feature : {
mark : {
show : true
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
series : ybp
// gaugSeriesItem('10%','50%'),gaugSeriesItem('35%','50%'),gaugSeriesItem('60%','50%'),gaugSeriesItem('85%','50%'),
// gaugSeriesItem('22.5%','80%'),gaugSeriesItem('47.5%','80%'),
// gaugSeriesItem('72.5%','80%')
};
myChart.setOption(option);
});
}
function gaugSeriesItem(x, y, r, value, max, orgName) {
var ybp = {
// name:orgName,
type : 'gauge',
center : [ x, y ],
radius : r,
min : 0,
max : 100,
precision : 0, // 小数精度,默认为0,无小数点
splitNumber : 5,
axisLine : { // 坐标轴线
lineStyle : { // 属性lineStyle控制线条样式
width : 10,
color : [ [ 0.2, '#3FA558' ], [ 0.4, '#1796E7' ],
[ 0.6, '#FFDD00' ], [ 0.8, '#FA8C35' ],
[ 1, '#FF1717' ] ]
}
},
axisTick : { // 坐标轴小标记
length : 15, // 属性length控制线长
lineStyle : { // 属性lineStyle控制线条样式
color : 'auto'
}
},
axisLabel : { // 坐标轴文本标签,详见axis.axisLabel
show : true,
/*
* formatter: function(v){ return v.toFixed(1); },
*/
textStyle : { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color : '#333'
}
},
splitLine : { // 分隔线\
length : 20, // 属性length控制线长
lineStyle : { // 属性lineStyle(详见lineStyle)控制线条样式
color : 'auto'
}
},
pointer : {
length : '80%',
width : 8,
color : 'auto'
},
title : {
show : false,
textStyle : { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
// fontWeight: 'bolder',
fontSize : 1,
// fontStyle: 'italic'
}
},
detail : {
formatter : '{value}',
textStyle : { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight : 'bolder',
fontSize : 5
}
},
data : [ {
value : value,
name : orgName
} ]
};
return ybp;
}
柱状图
//调用入口
barChartsInit("wlzx_rk_year","index/logistics/getInstorageYearStatusCountList.do",dataName,"");
/
function barChartsInit(divId, action, dataName, titleText) {
require.config({
paths : {
echarts : './pub/chart/ECharts/echarts'
}
});
require([ 'echarts', 'echarts/chart/bar' // 加载bar模块,按需加载
], function(ec) {
var myChart = ec.init(document.getElementById(divId));
var counts = getBarChartData(action);
var option = {
title : {
text : titleText,
// subtext: '纯属虚构'
textStyle : {
fontSize : 16,
fontWeight : 'bolder',
// color: '#000',
// fontFamily: '微软雅黑,宋体'
},
x : 'center',
y : 'bottom'
},
/*color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],*/
color:['green','#FF0000','#FA8C35','blue','#FFDD00',],
tooltip : {
trigger : 'axis'
},
toolbox : {
show : false,
feature : {
mark : {
show : false
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
legend : {
data : [ dataName[0], dataName[1], dataName[2], dataName[3],
dataName[4] ]
},
xAxis : [ {
type : 'category',
data : [ counts[0][0], counts[0][1], counts[0][2],
counts[0][3], counts[0][4], counts[0][5], counts[0][6],
counts[0][7], counts[0][8], counts[0][9],
counts[0][10], counts[0][11], counts[0][12] ]
} ],
yAxis : [ {
type : 'value',
min : 0,
max : 30,
name : '数量',
// boundaryGap:[0,0],
boundaryGap : false,
axisLabel : {
formatter : '{value}'
},
splitArea : {
show : true
}
}, {
type : 'value',
min : 0,
max : 30,
name : '数量',
boundaryGap : [ 0, 0 ],
axisLabel : {
formatter : '{value}'
},
splitArea : {
show : true
}
} ],
series : [
{
name : dataName[0],
type : 'bar',
data : [ counts[1][0][0], counts[1][1][0],
counts[1][2][0], counts[1][3][0],
counts[1][4][0], counts[1][5][0],
counts[1][6][0], counts[1][7][0],
counts[1][8][0], counts[1][9][0],
counts[1][10][0], counts[1][11][0],
counts[1][12][0] ]
},
{
name : dataName[1],
type : 'bar',
data : [ counts[1][0][1], counts[1][1][1],
counts[1][2][1], counts[1][3][1],
counts[1][4][1], counts[1][5][1],
counts[1][6][1], counts[1][7][1],
counts[1][8][1], counts[1][9][1],
counts[1][10][1], counts[1][11][1],
counts[1][12][1] ]
},
{
name : dataName[2],
type : 'bar',
yAxisIndex : 1,
data : [ counts[1][0][2], counts[1][1][2],
counts[1][2][2], counts[1][3][2],
counts[1][4][2], counts[1][5][2],
counts[1][6][2], counts[1][7][2],
counts[1][8][2], counts[1][9][2],
counts[1][10][2], counts[1][11][2],
counts[1][12][2] ]
},
{
name : dataName[3],
type : 'bar',
yAxisIndex : 1,
data : [ counts[1][0][3], counts[1][1][3],
counts[1][2][3], counts[1][3][3],
counts[1][4][3], counts[1][5][3],
counts[1][6][3], counts[1][7][3],
counts[1][8][3], counts[1][9][3],
counts[1][10][3], counts[1][11][3],
counts[1][12][3] ]
},
{
name : dataName[4],
type : 'bar',
yAxisIndex : 1,
data : [ counts[1][0][4], counts[1][1][4],
counts[1][2][4], counts[1][3][4],
counts[1][4][4], counts[1][5][4],
counts[1][6][4], counts[1][7][4],
counts[1][8][4], counts[1][9][4],
counts[1][10][4], counts[1][11][4],
counts[1][12][4] ]
} ]
};
myChart.setOption(option);
});
}
//获取数据
function getBarChartData(action) {
var months = [ '', '', '', '', '', '', '', '', '', '', '', '', '' ];
for ( var i in months) {
var myMon = new Date().getMonth() + 1;
var myYear = new Date().getFullYear() - 1;
myMon = myMon + parseInt(i);
if (myMon > 12) {
myMon = myMon - 12;
myYear++;
}
months[i] = new Date(myYear, myMon - 1).format("yyyy-MM");
}
var sts = [];
for (var i = 0; i < 13; i++) {
sts[i] = [ 0, 0, 0, 0, 0 ];
}
var counts = [ months, sts ]; // 存放月份和状态信息
$.ajax({
cache:false,
url : action,
type : "get",
async : false,// 同步
success : function(data) {
// counts = data.rows;
var flag = 0;
for ( var i in data.rows) {
for ( var j in months) {
if (data.rows[i].month == months[j]) {
flag = j;// 月份作为下标
}
}
// $.ligerDialog.error(data.rows[i].zc);
var k = 0;
sts[flag][k++] = data.rows[i].zc; // 月(下标1)-状态(下标2)-数量
sts[flag][k++] = data.rows[i].qs;
sts[flag][k++] = data.rows[i].gq;
sts[flag][k++] = data.rows[i].jgq;
sts[flag][k++] = data.rows[i].wsz;
}
},
error : function() {
$.ligerDialog.error("ajax请求失败!");
}
});
return counts;
}
饼状图
//调用入口
pieChartsInit("wlzx_rk_month","index/logistics/getInstorageMonthStatusCountList.do","","预警状态",dataName);
/
function pieChartsInit(divId, action, titleText, seriesName, dataName) {
require.config({
paths : {
echarts : './pub/chart/ECharts/echarts'
}
});
require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块,按需加载
], function(ec) {
var myChart = ec.init(document.getElementById(divId));
var counts = getPieChartData(action);
var option = {
title : {
text : titleText,
subtext : '',
x : 'left'
},
tooltip : {
},
legend : {
orient : 'vertical',
x : 'left',
selectedMode : false,
data : [ dataName[0], dataName[1], dataName[2], dataName[3],
dataName[4] ]
},
color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],
toolbox : {
show : false,
feature : {
mark : {
show : false
},
dataView : {
show : true,
readOnly : false
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : false,
series : [ {
name : seriesName,
type : 'pie',
radius : [ 0, '40%' ],
center : [ '70%', '30%' ],
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true,
fontSize : 5
},
labelLine : {
show : true,
length : 5
}
}
},
data : [ {
value : counts[0],
name : dataName[0]
}, {
value : counts[1],
name : dataName[1]
}, {
value : counts[2],
name : dataName[2]
}, {
value : counts[3],
name : dataName[3]
}, {
value : counts[4],
name : dataName[4]
} ]
} ]
};
myChart.setOption(option);
});
}
//获取数据
function getPieChartData(action) { // action
var counts = [];
$.ajax({
cache: false,
url : action,
type : "get",
async : false,// 同步
success : function(data) {
$.each(data.rows, function(i) {
counts[data.rows[i].status] = data.rows[i].count;
});
},
error : function() {
$.ligerDialog.error("ajax请求失败!" + action);
}
});
return counts;
}
function pieChartsInit(divId, action, titleText, seriesName, dataName) {
require.config({
paths : {
echarts : './pub/chart/ECharts/echarts'
}
});
require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块,按需加载
], function(ec) {
var myChart = ec.init(document.getElementById(divId));
var counts = getPieChartData(action);
var option = {
title : {
text : titleText,
subtext : '',
x : 'left'
},
tooltip : {
},
legend : {
orient : 'vertical',
x : 'left',
selectedMode : false,
data : [ dataName[0], dataName[1], dataName[2], dataName[3],
dataName[4] ]
},
color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],
toolbox : {
show : false,
feature : {
mark : {
show : false
},
dataView : {
show : true,
readOnly : false
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : false,
series : [ {
name : seriesName,
type : 'pie',
radius : [ 0, '40%' ],
center : [ '70%', '30%' ],
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true,
fontSize : 5
},
labelLine : {
show : true,
length : 5
}
}
},
data : [ {
value : counts[0],
name : dataName[0]
}, {
value : counts[1],
name : dataName[1]
}, {
value : counts[2],
name : dataName[2]
}, {
value : counts[3],
name : dataName[3]
}, {
value : counts[4],
name : dataName[4]
} ]
} ]
};
myChart.setOption(option);
});
}