需求

实现思路

代码

组件代码

<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}
    ]
  }
}