echarts中的x轴y轴颜色,文字颜色改变

echarts中的x轴y轴颜色,文字颜色改变


在更换背景之后,原图中的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"
					}
				},
			}
		]
	})

猜你喜欢

转载自blog.csdn.net/weixin_43390321/article/details/113506306
今日推荐