eachrts 极坐标图计算百分比

<template>
  <!--  各区县项目数量占比-->
  <div class="charts-box">
    <div class="charts-instance" ref="chartRef">

    </div>
    <div class="charts-note">
      <span v-for="(items, index) in data.list" class="charts-legend">
        <span class="legend" :style="{background:colorList[index]}"></span>
        <span>{{items.name}}</span>
        <span style="color: #999999;margin-left: 5px;">{{((items.value / props.total)*100).toFixed(2)}}%</span>
      </span>
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted, onUnmounted, reactive, watch} from 'vue'
import * as echarts from 'echarts'
import useEmitter from "@/hooks/useEmitter";
import {findRightTopPie} from "@/views/BangFuData/service";

let props = defineProps(['timeRange', 'dictItem', 'total'])
const emitter = useEmitter()
const chartRef = ref()
const colorList = ['#F0685E', '#F9A43A', '#7ACDFE', '#5085FF', '#44CEA4', '#A18EEA', '#FCEB5D', '#299A99', '#80C269', '#556FB5']
const data = reactive({
  name: [],
  value: [],
  list:  [
        {
            "name": "**市",
            "value": "30",
            "count": null,
            "type": null
        },
        {
            "name": "***区",
            "value": "58",
            "count": null,
            "type": null
        },
        {
            "name": "**县",
            "value": "80",
            "count": null,
            "type": null
        },
        {
            "name": "**市",
            "value": "27",
            "count": null,
            "type": null
        },
        {
            "name": "**县",
            "value": "52",
            "count": null,
            "type": null
        },
        {
            "name": "**县",
            "value": "17",
            "count": null,
            "type": null
        },
        {
            "name": "**县",
            "value": "17",
            "count": null,
            "type": null
        },
        {
            "name": "***县",
            "value": "22",
            "count": null,
            "type": null
        },
        {
            "name": "**县",
            "value": "56",
            "count": null,
            "type": null
        },
        {
            "name": "百**委",
            "value": "8",
            "count": null,
            "type": null
        }
    ],
})

const findData = (callback) => {
  let rightTopPieRes = findRightTopPie(props.timeRange === 'previous' ? 2 : 1)
  rightTopPieRes.then(res => {
    let name = []
    let value = []
    res.find(item => {
      name.push(item.name)
      // value.push(item.value)
      value.push(((item.value / props.total)*100).toFixed(2))
    })
    data.name = name;
    data.value = value;
    data.list = res;
    callback()
  })
}

let myChart = null
const option = ref(null)
const buildOption = () => {
  option.value = {
    polar: {
      radius: [30, '80%'],
    },
    radiusAxis: {
      max: (parseInt((Math.max(...data.value)+'').slice(0,1))+1)+'0',
      axisLabel: {
        show: true, // 取消刻度
        formatter: function (value) {
          return (value)+'%';
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#dddddd',
        },
      },
    },
    angleAxis: {
      type: 'category',
      data: data.name,
      startAngle: 90,
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: 'transparent'
        }
      },
      axisLine:{
        lineStyle:{
          color:'#dddddd'
        }
      }
    },
    tooltip: {
      show: false
    },
    series: {
      type: 'bar',
      data: data.value,
      coordinateSystem: 'polar',
      itemStyle: {
        normal: {
          // 定制显示（按顺序）
          color: function (params) {
            var colorLists = colorList
            return colorLists[params.dataIndex]
          }
        }
      },
      // label: {
      //   show: true,
      //   position: 'middle',
      //   formatter: '{b}: {c}'
      // }
    },
    animation: false
  }
}

watch(() => props.timeRange, (nv, ov) => {
  findData(()=>buildOption())
})
watch(()=>option.value,(newOption,oldOption)=>{
  if(myChart == null) {
    myChart = echarts.init(chartRef.value);
  }
  option.value && myChart && myChart.setOption(newOption)
})
onMounted(()=>{
  myChart = echarts.init(chartRef.value);
  findData(()=>buildOption());
  emitter.on('echartsTimeRangeChange',()=>setTimeout(() => myChart && myChart.resize({width:chartRef.value.clientWidth,height:chartRef.value.clientHeight}), 50))
  emitter.on('echartsUpdate',()=>myChart && myChart.resize({width:chartRef.value.clientWidth,height:chartRef.value.clientHeight}))
})
onUnmounted(()=>{
  emitter.off('echartsTimeRangeChange')
  emitter.off('echartsUpdate')
  myChart.dispose()
})
</script>
<style scoped>
.charts-box{
  height: calc(100% - 48px);
}
.charts-instance{
  height: 60%;
  width: 100%;
  overflow: hidden;
}
.charts-note{
  margin-left: 15%;
  height: 40%;
  overflow: hidden;
}
.charts-legend {
  display: inline-block;
  vertical-align: middle;
  margin-top: 15px;
  width: 50%;
  font-size: 12px;
}
.legend {
  display: inline-block;
  vertical-align: middle;
  margin-right:5px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
</style>