比较简单直接看代码
let option = {
xAxis: {
type: "category",
data: ["客车", "货车", "危化品车", "未知车型"],
// X轴坐标颜色
axisLine: {
lineStyle: {
color: "#6483E5",
},
},
},
yAxis: {
type: "value",
// 分割线
splitLine: {
show: true,
lineStyle: {
// 使用深浅的间隔色
color: ["#1B2546"],
},
},
// Y轴坐标颜色
axisLine: {
lineStyle: {
color: "#6483E5",
},
},
},
tooltip: {},
// 标题
legend: {
bottom: 0,
textStyle: {
color: "#f1f1f1",
fontWeight: "bold",
fontSize: 14,
},
},
color: ["#25B5FF", "#FF5003"],
series: [{
name: `${this.firstRegion}`,
type: "bar",
data: firstRegionData,
barWidth: 20, // 柱状 宽度
itemStyle: {
barBorderRadius: 10, // 柱状倒角
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#6483E5'
},
{
offset: 1,
color: '#25B5FF'
}
]
)
},
},
{
name: `${this.secondRegion}`,
type: "bar",
data: secondRegionData,
barWidth: 20, // 柱状 宽度
itemStyle: {
barBorderRadius: 10, // 柱状倒角
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#F69517'
},
{
offset: 1,
color: '#E87526'
}
]
)
},
},
],
};
主要代码
itemStyle: {
barBorderRadius: 10, // 柱状倒角
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#F69517'
},
{
offset: 1,
color: '#E87526'
}
]
)
},