關鍵程式碼如下：

pieChart.on('legendselectchanged', function(obj) {
        // var selected = obj.selected;
        var legend = obj.name;
        
        if(legend == '待下發'){
          that.$router.push('/modules/order/AlarmOrderListPlus')
        }
        else if(legend == '處置中'){
          that.$router.push('/modules/order/AlarmOrderOngoingList')
        }else{
          that.$router.push('/modules/order/AlarmOrderCompleteList')
        }
    })

完整元件示例程式碼如下：

<template>
  <div class="repair-order">
    <!-- 工單統計 -->
    <img src="~@/assets/datav/title-2.png" />
    <div id="pieChart" class="pie-chart" ></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { color } from 
 
'echarts'
import { getAction } from '@api/manage'
export default {
  name: 'repairOrder',
  components: {},
  computed: {},
  data() {
    return {
      url:{
        pieData:'介面url',
        monitor:'介面url'
      },
      pieData:[],
      totalCount:0,
    }
  },
  mounted() {
    this.handleGetPieData(); 
    setInterval(()
 
=>{
               this.handleGetPieData(); 
           },30000)
    
  },
  methods: {
    
    handleGetPieData() {
      this.pieData =[];
      this.totalCount =0;
      if (!this.url.pieData) {
        this.$message.error('請設定url.pieData 屬性!')
        return
      }
      getAction(this.url.pieData).then((res) => {

        for(let i=0;i<res.length;i++){
          this.pieData.push({'name': res[i].x, 'value': res[i].y});
          this.totalCount += +res[i].y;
        }
        
        this.initPieChart()
        console.log('總數：',this.totalCount)
      })
    },

    initPieChart() {
      // var data = [
      //   { value: 246, name: '待下發' },
      //   { value: 2, name: '處置中' },
      //   { value: 1, name: '已完成' },
      // ]
      var data=this.pieData;

      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        color: ['#3F98FD', '#0BE3F5', '#FD9D73'],
        legend: {
          orient: 'vertical', //圖例列表的佈局朝向（垂直排列）
          left: '50%',
          y: 'center',
          itemGap: 30,
          itemWidth: 8,
          padding: 10,
          textStyle: {
            fontSize: 12,
            color: '#FFFFFF',
          },
          align: 'left',
          data: [
            // '待下發','處置中','已完成'
            {
              name: '待下發',
              icon: 'circle',
            },
            {
              name: '處置中',
              icon: 'circle',
            },
            {
              name: '已完成',
              icon: 'circle',
            },
          ],
          formatter: function (name) {
            var total = 0
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              // total += data[i].value
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            var arr = ['{a|' + name + ' :}{b|' + target + '}{a|個}']
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 400,
                color: '#FFFFFF',
                align: 'left',
                padding: [0, 0, 0, 10],
              },
              b: {
                fontSize: 26,
                fontFamily: 'DIN',
                fontWeight: 'bold',
                color: '#3F98FD',
                align: 'right',
                padding: [0, 0, 0, 10],
                lineHeight: 25,
              },
              c: {
                fontSize: 26,
                fontFamily: 'DIN',
                fontWeight: 'bold',
                color: '#7BDBFF',
              },
              d: {
                fontSize: 16,
                fontFamily: 'Microsoft YaHei',
                fontWeight: '400',
                color: '#7BDBFF',
              },
            },
          },
        },
        series: [
          {
            name: '訪問來源',
            type: 'pie',
            radius: ['35%', '50%'],
            center: ['27%', '51%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: '{c|'+this.totalCount+'} \n {d|工單總數}',
              textStyle: {
                rich: {
                  c: {
                    fontSize: 26,
                    fontFamily: 'DIN',
                    fontWeight: 'bold',
                    color: '#7BDBFF',
                  },
                  d: {
                    fontSize: 16,
                    fontFamily: 'Microsoft YaHei',
                    fontWeight: '400',
                    color: '#7BDBFF',
                  },
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieData
            //
            // data: [
            //   { value: 1048, name: '待下發' },
            //   { value: 735, name: '處置中' },
            //   { value: 580, name: '已完成' },
            // ],
          },
        ],
      }
      var pieChart = echarts.init(document.getElementById('pieChart'))
      pieChart.setOption(option)
      let listener= function () {
        pieChart.resize()
       }
      window.addEventListener('resize', listener)



    var that = this;
    pieChart.on('legendselectchanged', function(obj) {
        // var selected = obj.selected;
        var legend = obj.name;
        
        if(legend == '待下發'){
          that.$router.push('/modules/order/AlarmOrderListPlus')
        }
        else if(legend == '處置中'){
          that.$router.push('/modules/order/AlarmOrderOngoingList')
        }else{
          that.$router.push('/modules/order/AlarmOrderCompleteList')
        }
    })

    pieChart.on('click', 'series.pie.label', function () {
        that.$router.push('/dashboard/analysis')
    });
    },
  },
}
</script>
<style lang='less' scoped>
.repair-order {
  .pie-chart {
    height: 100%;
    width: 100%;
  }
}
img{
  display: inline-block;
  height: auto;
  max-width: 100%;
}
</style>