Echarts根据数据长度变换柱状图柱状的颜色
//查询图表数据
function getdata() {
var qs = $("#qs").val();
var js = $("#js").val();
$.ajax({
url: '/ycgl_ycysjlhis/geterroroperate',
type: 'get',
data: {
qs: qs,
js:js
},
async: false,
success: function (data) {
var person=[], operatec=[];
for (var i = 0; i < data.length; i++) {
person.push(data[i].person);
operatec.push(data[i].operatec);
};
person.push();
initechart(person, operatec);
},
error: function () {
alert("获取图表数据失败!");
}
});
};
//初始化图表
function initechart(person, operatec) {
var mychart = echarts.init(document.getelementbyid('middle'));
// 显示标题,图例和空的坐标轴
mychart.setoption({
title: {
text: '异常操作情况统计分析'
},
tooltip: {},
legend: {
data: ['操作次数']
},
xaxis: {
name: '操作人',
data: person
},
yaxis: {
name: '操作次数'
},
series: [{
name: '操作次数',
type: 'bar',
barwidth: 30,
//label: {
// normal: {
// show: true,
// position: 'inside'
// }
//},
itemstyle: {
//通常情况下:
normal: {
//每个柱子的颜色即为colorlist数组里的每一项,如果柱子数目多于colorlist的长度,则柱子颜色循环使用该数组
color: function (params) {
var index_num = params.value;
for (var i = 0; i < operatec.length; i++) {
//判断数据是否大于1
if (index_num > 1) {
//var colorlist = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
//return colorlist[params.dataindex];
return '#ff7f50';
}
else {
//var colorlist = ['blue'];
//return colorlist[params.dataindex];
return '#87cefa';
}
}
}
},
//鼠标悬停时:
emphasis: {
shadowblur: 10,
shadowoffsetx: 0,
shadowcolor: 'rgba(0, 0, 0, 0.5)'
}
},
data: operatec
}
]
});
};
上一篇: Linux 进程终止后自动重启