用Echarts实现进度条效果
需求
实现思路
代码
组件代码
<template>
<div ref="dom"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'screen-bar',
props: {
value: Array,
},
data() {
return {
dom: null
}
},
mounted() {
this.$nextTick(() => {
let colors = ['#faaf11', '#2b64fd', '#36b77f', '#fc4e50', '#13c7fa', '#fcec41']
let yAxisData = this.value.map(_ => _.name)
let seriesData = this.value.map(_ => _.value)
let data = []
let spanData = []
let y = []
for(let i = 0; i<seriesData.length;i++){
let j = seriesData.length-i-1 // 将排序颠倒回来
spanData.push([100,i,seriesData[j]]) // 灰色进度条
y.push(yAxisData[j])
data.push({ // 定义进度条颜色
value:seriesData[j],
itemStyle:{
color:colors[j]
}
})
}
let option = {
title: {
show: false
},
grid: {
left: '20%',
right: '10%',
bottom: 0,
top: '5%',
containLabel: false
},
xAxis: {
type: 'value',
show: false,
position:'top',
min:0,
max:100
},
yAxis: {
data: y,
show:true,
axisLabel: {
color: '#b3d6fe'
},
axisLine:{ // 坐标轴轴线
show:false
},
axisTick:{ // 刻度线
show:false
},
splitLine:{ // 网格线
show:false
}
},
series: [
{
data: data,
stack: 'main',
type: 'bar',
barWidth:14,
},
{ // 灰色部分进度条
type: 'bar',
stack: 'main',
name:'span',
data: spanData,
color:'#e2e7ee50',
silent:true,
label: {
show: true,
position: 'right',
formatter:'{@[2]}%', // 进度条值
color:'#b3d6fe'
},
}
]
}
this.dom = echarts.init(this.$refs.dom)
this.dom.setOption(option)
})
}
}
</script>
使用组件
...
<screen-bar :value="list" style="flex:1;" :colors="['#faaf11', '#2b64fd', '#36b77f', '#fc4e50', '#13c7fa', '#fcec41']"></screen-bar>
...
data () {
return {
list:[
{name:'单塔循环水',value: 78},
{name:'循环水',value: 89},
{name:'阀门',value: 40},
{name:'电机',value: 60},
{name:'风感',value: 80},
{name:'气象站',value: 100}
]
}
}