我设置了axisLabel,但是没有用,这些字体颜色,及背景色都加不上去,x轴的数据,就是全部,直连账户这些,给这些添加个背景色,鼠标滑过的时候背景色变成蓝色的,请问怎么设置,研究了好久,api也看了,想不出来,谢谢了!!!
配置项如下
var colorList = ['black','black','black','black'];
var option = {
title: {
right: 0,
top: -2,
textStyle: {
fontWeight: 'normal', //标题颜色
color: '#000'
},
text:'单位:个'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['总账户', '直联账户'],
right: 100
},
color:["#80bada","#feb74a"],
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
calculable: true,
xAxis: [{
type: 'category',
//触发X轴事件 默认false
triggerEvent:true,
data: ['全部', '直连账户', '保证金账户', '其他账户'],
axisLabel:{
rich:{
width:300,
},
//backgroundColor不支持function,怎么破,不知道嘞
backgroundColor:'red',
color:function(param,index){
return colorList[index]
},
verticalAlign:'top',
padding: [10, 40, 10, 40],
}
}],
yAxis: [{
name: "金额:万",
splitLine: {
show: false
}, //去除网格线
type: 'value'
}],
series: [{
name: '总账户',
type: 'bar',
barWidth: '50',
data: [257, 274, 289, 159, 287],
itemStyle: {
normal: {
label:{
textStyle:{
color:"#333"
}
}
}
},
label: {
normal: {
show: true, //显示数量
position:'top',
}
},
markLine: {
data: [
// {type : 'average', name: '平均值'}
]
}
},
{
name: '直联账户',
type: 'bar',
barWidth: '50',
data: [248, 66, 32, 79, 102],
itemStyle: {
normal: {
label:{
textStyle:{
color:"#333"
}
}
}
},
label: {
normal: {
show: true, //显示数量
position:'top'
}
},
markLine: {
data: [
// {type : 'average', name : '平均值'}
]
}
}
]
};
//悬停事件
myChart.on('mouseover', function (params) {
//取出颜色的下角标存成数组,嫌麻烦没弄= =
var numList=[0,1,2,3];
//悬停的是XAxis的值
if(params.componentType=='xAxis'){
for(var i=0;i<numList.length;i++){
if(option.xAxis[0].data[i]==params.value){
colorList[i]='red';
//背景色我是琢磨了下,感觉费劲啊,你去官网看看属性参数吧
option.xAxis[0].axisLabel.backgroundColor='yellow';
}
else{
colorList[numList[i]]='black';
// option.xAxis[0].axisLabel.backgroundColor='red';
}
}
// params.event.target.style.rich.textBackgroundColor='yellow';
// params.event.target.style.rich.textFill='red';
// console.log(params.event.target.style.rich.textBackgroundColor)
myChart.setOption(option);
}
});