须达到的效果图:
1、左侧颜色渐变
2、各自柱体为不同颜色
3、右侧数字紧贴柱体
在data中添加如下代码:
{
//第一个柱体
value: 60,
itemStyle: {
barBorderRadius: 0,
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(0,0,0,0)" // 0% 处的颜色
},
{
offset: 1,
color: "yellow" // 100% 处的颜色
}
])
}
}
},
{
//第二个柱体
value: 45,
itemStyle: {
barBorderRadius: 0,
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(0,0,0,0)" // 0% 处的颜色
},
{
offset: 1,
color: "pink" // 100% 处的颜色
}
])
}
}
},
修改数字位置在series中加一个与data平齐的label:
label代码如下:
label: {
show: true, //开启显示
position: "right", //在上方显示
textStyle: {
//数值样式
color: "#fff",
fontSize: 12
}
},