echarts柱状图渐变色并且显示数据及柱状图的宽度调整

2023-02-12,,,,

series: [{
type: 'bar',
name: '起飞',
barWidth: '20px', //柱状图宽度
itemStyle: {
normal: { //显示渐变色颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#09c9c5' },
{ offset: 1, color: '#003791' }
]),
},
},
label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#09c9c5',
fontSize: 12,
}
}
}, {
type: 'bar',
name: '降落',
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#c9c209' },
{ offset: 1, color: '#4d3f00' }
]),
}
},
label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#c9c209',
fontSize: 12,
}
}
}]

一。柱状图的宽度调整: barWidth: '20px',

二。柱状图的渐变色设置:

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#09c9c5' },
{ offset: 1, color: '#003791' }
]),

三。柱状图上带数据

label: {
show: true,
position: 'top', //柱状图上带数值
textstyle: {
color: '#09c9c5',
fontSize: 12,
}
}

效果图如下:

1、春暖花会开!如果你曾经历过冬天,那么你就会有春色!如果你有着信念,那么春天一定会遥远;如果你正在付出,那么总有一天你会拥有花开满圆。

2、当悲伤的水流入稳重的山,水这可怜儿的悲伤也勾起了山的悲伤,于是他们的心一起碎了;水把头埋入地下,山却把心的碎片一块块收好。于是就有了迷乱复杂的溶洞,就有了千姿百态的石笋,就有了洞口突突的泉水。

echarts柱状图渐变色并且显示数据及柱状图的宽度调整的相关教程结束。

《echarts柱状图渐变色并且显示数据及柱状图的宽度调整.doc》

下载本文的Word格式文档,以方便收藏与打印。