本來好好的柱子,今天要求柱條顏色要用系統名稱對應的顏色,如下圖。(花裏胡哨的,但是我不發表任何意見,讓我改我就改-------一個莫得感情的代碼搬運工)
實現代碼
var provideNumber = 4;
if($(document.body).width() > 1800){
provideNumber = 6;
}
var myCharts = echarts.init(document.getElementById('usersChart'));
var option = {
tooltip : {
trigger: 'axis',
},
grid: {
left: '22%',
},
xAxis: {
type: 'value',
splitLine:{show: false},//去除網格線
position:'top',//座標軸位置
axisLine:{
lineStyle:{
color:'#fff',
width:1,//這裏是爲了突出顯示加上的
}
}
},
yAxis: {
type: 'category',
// name:'系統名稱',
data: [],
splitLine:{show: false},//去除網格線
axisLine:{
lineStyle:{
color:'#fff',
width:1,//這裏是爲了突出顯示加上的
}
},
axisLabel : {//座標軸刻度標籤的相關設置。
formatter : function(params){
var newParamsName = "";
var paramsNameNumber = params.length;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;// 開始截取的位置
var end = start + provideNumber;// 結束截取的位置
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最終拼成的字符串
}
} else {
newParamsName = params;
}
return newParamsName
},
fontSize: 16,//字體大小
}
},
series: [
{
name: '個數',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [],
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 1, color: '#00adff'},
{offset: 0.5, color: '#007dfe'},
{offset: 0, color: '#0054fd'}, // 原本的柱圖漸變色
]
)
},
barMaxWidth:40
},
]
};
myCharts.setOption(option,true);
myCharts.showLoading(); //顯示加載動畫
var sysdata = [];
var countdata = [];
var selectnum = 0;
var colors = [];
$.ajax({
url: "/users/get_count_by_selected_sys",
type: 'GET',
data:{
"sys_name":chartparams
},
dataType: "json",
success: function (data) {
var code = data['code']; //狀態標示<0處理異常,>=0正常處理
var msg = data['msg']; //狀態消息,如:成功,失敗,等信息
var datalist = data['data'];
if (code < 0) {
} else {
for(var i = 0; i < datalist.length; i ++){
sysdata.push(datalist[i].short_name);
countdata.push(datalist[i].user_count);
selectnum += datalist[i].user_count;
colors.push(datalist[i].icon_colour);
}
}
$("#selectednum").html(selectnum);
myCharts.hideLoading(); //隱藏加載效果
myCharts.setOption({
yAxis: {
type: 'category',
data: sysdata
},
series: [
{
data: countdata,
itemStyle:{
normal:{
//每個柱子的顏色即爲colors數組裏的每一項,如果柱子數目多於colors的長度,則柱子顏色循環使用該數組
color: function (params){
return colors[params.dataIndex];
}
},
},
},
]
});
window.addEventListener("resize", function () {
myCharts.resize();
});
},
error:function (errorlog) {
}
});
其實實現這個功能的代碼就下圖的一點,上面的代碼是貼上了完整的代碼