myPies.vue

<template>
  <div id="myPies" style="height: 100%"></div>
</template>

<script>
export default {
  name: 'myPies',
  data() {
    return {
      myPies: null
    }
  },

  mounted() {
    this.initPie()
  },

  methods: {
    initPie() {
      let myPie = document.getElementById('myPies')
      this.myPies = this.$echarts.init(myPie)
      const data = [
        { name: '冷', value: 150 },
        { name: '适中', value: 80 },
        { name: '热', value: 80 }
      ]
      const option = {
        tooltip: {
          trigger: 'item'
        },

        legend: {
          show: true,
          orient: 'horizontal',
          //   left: "center",
          bottom: '0',
          itemHeight: 13,
          itemWidth: 13,
          itemGap: 35,
          icon: 'circle',
          data: data,
          formatter: function (name) {
            var total = 0
            var target
            var value
            for (let i = 0, l = data.length; i < l; i++) {
              value = data[i].value
              total += data[i].value
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            return name + '     ' + ((target / total) * 100).toFixed(0) + '%'
          },
          textStyle: {
            rich: {
              a: {
                color: '#333333',
                // verticalAlign: "top",
                // align: "center",
                // fontSize: 12,
                // padding: [10, 0, 28, 0]
                padding: 20
              },
              b: {
                // align: "left",
                // fontSize: 18,
                padding: [10, 10, 10, 0],
                // // lineHeight: 25,
                color: '#333333'
              }
            }
          }
        },
        color: [
          'rgba(72,154,254,1)',
          'rgba(247,243,204,1)',
          'rgba(236,73,104,1)'
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'center',
                formatter: function () {
                  return `\r\n20000`
                },
                textStyle: {
                  fontSize: 30,
                  lineHeight: 20,
                  color: '#36CBCB'
                }
              }
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [...data]
          }
        ]
      }
      this.myPies.setOption(option)
    }
  }
}
</script>