vue.js echrts饼图实现百分比

显示效果

组件调用

<template>
  <div>
 	总数1<el-input-number v-model="total1"></el-input-number>
    数量1<el-input-number v-model="num1"></el-input-number>
    <div><p></p></div>
    <div :style="{'width':'200px','height':'70px','border':'1px solid #ccc','margin':'20px'}">
      <progress-bar-plugin title='测试百分比图标1' :total='total1' :number='num1' height='70'></progress-bar-plugin>
    </div>
    总数2<el-input-number v-model="total2"></el-input-number>
    数量2<el-input-number v-model="num2"></el-input-number>
    <div><p></p></div>
    <div :style="{'width':'200px','height':'90px','border':'1px solid #ccc','margin':'20px'}">
      <progress-bar-plugin title='测试百分比图标2' :total='total2' :number='num2'  height='90'></progress-bar-plugin>
    </div>
  </div>  
</template>    

组件代码

<template>
  <div class="progress-bar-plugin">
      <div class="left">
        <div :id="chartId" :style="{'height':height+'px','width':height+'px'}"></div>
      </div>
      <div class="right" :style="{'padding-top':paddingTop+'px',}">
        <div class="title">{{title}}</div>
        <div class="number">{{number}}</div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'ProgressBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    total: {
      type: Number,
      default: 0
    },
    number: {
      type: Number,
      default: 0
    },
    height: {
      type: [Number, String],
      default: 40
    }
  },
  data() {
    return {
      paddingTop: 0,
      chartId: 'chart_',
      option: null,
    }
  },
  watch: {
    number() { // number的值是动态的，每次更改都需要重新渲染图标
      this.initEchart()
    }
  },
  methods: {
    initEchart() {
      let percentage = parseInt(this.number / this.total * 100) + '%'
      let num1 = this.total - this.number
      let chart = echarts.init(document.getElementById(this.chartId))
      if (!chart) { return }
      chart.setOption({
        color: ['#209DEF', '#ebf7ff'],
        tooltip: {
          show:false, //取消 鼠标滑过的提示框
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        title: {
          text: percentage,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: 10
          }
        },
        series: [
          {
            clickable:false,
            type: 'pie',
            radius: ['80%', '100%'],
            labelLine: {
              show: false
            },
            hoverAnimation: false,
            legendHoverLink: false,
            data: [
              { value: this.number },
              { value: num1 }
            ]
          }
        ]
      })
    },
    // 让组件在调用的父元标签中垂直居中
    loadPaddingTop() {
      if (this.height > 40) {
        this.paddingTop = this.height / 2 - 22
      }
    },
    init() {
    //动态创建chartId，组件在同一个页面可以回被调用多次 
      this.chartId = 'chart_' + Math.floor(Math.random() * 1000)
    }
  },
  mounted() {
    this.init()
    this.loadPaddingTop()
    this.$nextTick(function () {
      this.initEchart()
    })
  }
}
</script>
<style lang='less'>
.progress-bar-plugin {
  .left {
    float: left;
  }
  .right {
    float: right;
    padding-left: 1rem;
    .title {
      font-size: 85%;
      font-weight: 400;
    }
    .number {
      text-align: center;
      font-size: 150%;
    }
  }
}
</style>