一、柱状图的基本配置

1.1柱状图的X轴、Y轴的配置

在无配置的情况下的坐标轴图，要求改变(显示Y轴的线，x、y轴坐标轴的线的颜色，xy轴字体label颜色均为白色，网格线更换颜色并设置为dashed、x轴取消刻度线。)

最终结果图。

首先先设置Y轴

yAxis:{ //设置Y轴的网格线 splitLine:{ //显示网格线 show:true //网格线的样式 lineStyle:{ color: "#4DF7FA", opacity: 0.2, type: "dashed", } } //y轴lable的字体为白色 axisLabel:{ color:"#fff" } //设置Y轴的刻度线 axisLine:{ //让刻度线显示 show:true, lineStyle:{ //设置刻度线的颜色等 color: "#4DF7FA", } } }

其次设置X轴的配置

xAxis:{ //将x轴的Label设置为白色 axisLabel:{ color:"#fff" } //隐藏刻度线 axisTick:{ show:false } //设置x轴的刻度线 axisLine:{ //让刻度线显示 show:true, lineStyle:{ //设置刻度线的颜色等 color: "#4DF7FA", } } }

配置展示

又有小伙伴问了为啥这三个柱子的颜色都是不一样的，这其实是三种不同的数据堆在一起的

跟上图的原理差不多，只不过在设置series的时候将 stack: "total",这样就可以使得柱子推起来了，至于颜色的话在option定义颜色列表就好了 color:["xxx","aaa"] 。

设置柱状图的柱子为渐变色