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
}
]
});
};