Echarts实现进度条效果
Echarts实现进度条效果
实现效果如图：
option = {
grid: {
containLabel: true,
left: 0,
right: 0,
top: 0,
bottom: 0,
},
xAxis: {
type: 'value',
splitLine: {
show: false
}, //坐标轴在 grid 区域中的分隔线
axisLabel: {
show: false
}, //坐标轴刻度标签
axisTick: {
show: false
}, //坐标轴刻度
axisLine: {
show: false
}, //坐标轴轴线
},
yAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
},
series: [{
type: "bar",
barWidth: 16,
barMinHeight: 20,
zlevel: 1,
data: [40],
itemStyle: {
normal: {
barBorderRadius: [0, 10, 10, 0],
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0.2,
color: '#359eff'
},
{
offset: 1,
color: "#35dbff"
}
])
}
},
}, {
type: "bar",
barGap: '-100%',
barWidth: 16,
data: [100],
itemStyle: {
normal: {
barBorderRadius: [0, 16, 16, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: 'rgba(75, 197, 253, 0)'
},
{
offset: 1,
color: 'rgba(75, 197, 253, 1)'
}
]
),
label: {
show: true,
position: 'insideRight',
formatter: ' ',
backgroundColor: '#94f6ff',
distance: 0,
borderColor: 'rgba(255, 255, 255, 0.5)',
borderWidth: 3,
borderRadius: 10,
color: '#94f6ff'
}
}
},
}
],
};