echarts进度条
echarts进度条## 标题
```function laborMan() {
const laborChart = echarts.init(hhh.value)
const maxData = 2000
const option = {
tooltip: {},
grid: {
// 让echarts图位置靠左
left: 6
},
xAxis: {
max: maxData,
///不展示每列的线
splitLine: { show: false },
offset: 10,
//不展示坐标轴刻度
axisTick: { show: false },
//不展示x轴的轴线
axisLine: {
show: false
},
//不展示每项数据
axisLabel: {
show: false
}
},
yAxis: {
data: ['2013'],
inverse: true,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
show: false
}
},
series: [{
// current data 当前颜色深的块
type: 'pictorialBar',
symbol: 'rect',
//指定图形元素是否重复
symbolRepeat: 'fixd',
symbolMargin: '5%',
//进度条展示的效果设置
symbolClip: true,
symbolSize: ['20%', '30%'],
symbolBoundingData: maxData,
data: [891],
z: 10,
itemStyle: {
normal: {
color: 'yellow'
}
}
},
{
// full data 当前所有颜色浅的块,被压在下面的部分
type: 'pictorialBar',
itemStyle: {
opacity: 0.2,
normal: {
color: 'blue'
}
},
label: {
show: true,
formatter: function (params) {
return ((params.value / maxData) * 100).toFixed(1) + ' %'
},
position: 'right',
offset: [10, 0],
color: '#439df7',
fontSize: 18
},
symbolSize: ['20%', '30%'],
animationDuration: 0,
symbolRepeat: 'fixed',
symbolMargin: '5%',
symbol: 'rect',
// symbolSize: 30,
symbolBoundingData: maxData,
data: [891],
z: 5
}]
}
laborChart.setOption(option)
}