在更换背景之后,原图中的xy轴的颜色不明显或是想改变XY轴的颜色以及轴上的文字颜色。
原先的图
改变颜色之后的图
重点代码
axisLine:{
lineStyle:{
//改变xy轴线条的颜色
color:"#FFF",
width:1//这里是为了突出显示加上的
}
},
axisLabel:{
textStyle:{
//改变xy轴上文字的颜色
color:"#FFF"
}
}
全代码
/*横着的柱状图*/
var x_zhucharts = echarts.init(document.getElementById("x_zhucharts"));
var x_zhudata = [
['product', '奖励', '惩罚'],
['2018年', 85, 93],
['2017年', 73, 55],
['2016年', 65, 82],
['2015年', 53, 39],
['2014年', 53, 39]
]
x_zhucharts.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
dataset: {
source: x_zhudata
},
barWidth: 6,
legend: {
x: 'center',
y: 'bottom'
},
grid: {
left: '3%',
right: '3%',
bottom: '10%',
top: "0",
containLabel: true
},
xAxis: [{
type: 'value',
axisLine:{
lineStyle:{
color:"#FFF"
}
},
axisLabel:{
textStyle:{
color:"#FFF"
}
}
}],
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:"#FFF"
}
},
axisLabel:{
textStyle:{
color:"#FFF"
}
}
},
series: [{
name: '奖励',
type: 'bar',
itemStyle: {
normal: {
color: "#0dd671"
}
},
},
{
name: '惩罚',
type: 'bar',
itemStyle: {
normal: {
color: "#0364fc"
}
},
}
]
})