finance/components/RingEcharts.vue

<template>
  <!-- <div id="yield-chart"></div> -->
  <div :id="props.id" style="width:400px;height:260px"></div>
</template>


<script setup>
import { onMounted} from 'vue';
const props = defineProps({ id: { type: String, default: () => {} } });

onMounted(()=>{
  if(props.id){
      var myChart = echarts.init(document.getElementById(props.id));
  }

  const data = [
        {
            name: '办公费',
            value: 36,
        },
        {
            name: '车辆费用',
            value: 20,
        },
        {
            name: '差旅费',
            value: 15,
        },
        {
            name: '租赁费',
            value: 10,
        },
        {
            name: '其他',
            value: 9,
        },
    ];
  const option = {
    title: {
        text: 100,
        textStyle:{
            fontSize:17,
            color:"black"
        },
        textAlign:"center",
        x: '24%',
        y: '35%',
    },
    legend: {
        type: 'plain',
        icon: 'circle',
        orient: 'vertical',
        left: '55%',
        top: '15%',
        align: 'left',
        itemGap: 15,
        itemWidth: 10, // 设置宽度
        itemHeight: 10, // 设置高度
        symbolKeepAspect: false,
        textStyle: {
            color: '#000',
            rich: {
                name: {
                    verticalAlign: 'right',
                    align: 'left',
                    width: 50,
                    fontSize: 12
                },
                value: {
                    align: 'left',
                    width: 40,
                    fontSize: 12
                },
                count: {
                    align: 'left',
                    width: 80,
                    fontSize: 12
                },
            }
        },
        data: data.map(item => item.name),
        formatter: function(name) {
            if (data && data.length) {
                for (var i = 0; i < data.length; i++) {
                    if (name === data[i].name) {
                        return (
                            '{name| ' +
                            name +
                            '}  | ' +
                            '{value| ' +
                            data[i].value +
                            '%}' +
                            '{count| ' +
                            data[i].value +
                            '} '
                        )
                    }
                }
            }
        }
    },
    series: [{
        name: '数量',
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['25%', '40%'],
        data: data,
        label: {
            normal: {
                show: false,
                position: 'center',
                formatter: '{text|{c}}\n{b}',
                rich: {
                    text: {
                        align: 'center',
                        verticalAlign: 'middle',
                        padding: 8,
                        fontSize: 30
                    },
                    value: {
                        align: 'center',
                        verticalAlign: 'middle',
                        fontSize: 20
                    }
                }
            },
        },
        labelLine: {
            normal: {
                show: true
            }
        }
    }]
};
myChart.setOption(option);

})
</script>

<style scoped>

</style>