mky-vent-base/src/views/vent/home/fireHome/components/workJc.vue

<template>
    <div class="workJc">
        <div class="echart-workJc">
            <div class="workJc-l">
                <div class="echart-yh"></div>
                <div class="echart-line"></div>
                <div class="echart-boxs" ref="ring"></div>
            </div>
            <div class="workJc-r"></div>

        </div>
        <div class="card-workJc"></div>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts';
//获取dom节点
let ring=ref()

function getOption() {
    nextTick(() => {

  let  color = [
    '#0CD2E6',
    '#3751E6',
    '#FFC722',
    '#886EFF',
    '#008DEC',
    '#114C90',
    '#00BFA5',
];

let title = '自定义legend、默认选中';
let legend = [
    'A需求类型',
    'B需求类型',
    'C需求类型',
    'D需求类型',
    'E需求类型',
    '其他'
];

let seriesData = [
    { "name": "A需求类型", "value": 30 },
    { "name": "B需求类型", "value": 10 },
    { "name": "C需求类型", "value": 15 },
    { "name": "D需求类型", "value": 23 },
    { "name": "E需求类型", "value": 10 },
    { "name": "其他", "value": 12 }
]


      let myChart = echarts.init(ring.value);
      let option = {
    backgroundColor:'#050e31',
    color: color,
    title: {
        top: 20,
        text: title,
        textStyle: {
            fontSize: 20,
            color: '#DDEEFF',
        },
    },
    grid: {
        top: '15%',
        left: 0,
        right: '1%',
        bottom: 5,
        containLabel: true,
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        right: 50,
        textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
                name: {
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 10,
                },
                value: {
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 10,
                },
                rate: {
                    color: 'rgba(255,255,255,0.9)',
                    fontSize: 10,
                },
            },
        },
        data: legend,
        formatter: (name) => {
            if (seriesData.length) {
                const item = seriesData.filter((item) => item.name === name)[0];
                return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
            }
        },
    },
    series: [{
        name: '需求类型占比',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['45%', '65%'],
        label: {
            normal: {
                show: false,
                position: 'center',
                formatter: '{value|{c}}\n{label|{b}}',
                rich: {
                    value: {
                        padding: 5,
                        align: 'center',
                        verticalAlign: 'middle',
                        fontSize: 32,
                    },
                    label: {
                        align: 'center',
                        verticalAlign: 'middle',
                        fontSize: 16,
                    },
                },
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '12',
                },
            },
        },
        labelLine: {
            show: false,
            length: 0,
            length2: 0,
        },
        data: seriesData,
    }],
};
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  onMounted(()=>{
    getOption()
  })

</script>

<style lang="less" scoped>
.workJc {
    width: 100%;
    height: 100%;
    .echart-workJc {
                    width: 100%;
                    height: 45%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .workJc-l {
                        position: relative;
                        width: 180px;
                        height: 100%;
                        .echart-yh {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 100px;
                            height: 100px;
                            background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
                            background-size: 100% 100%;
                        }
                        .echart-line {
                            position: absolute;
                            top: 8%;
                            left: 15%;
                            width: 125px;
                            height: 125px;
                            background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
                            background-size: 100% 100%;
                            animation: rotationLine 10s linear infinite;
                        }

                        @keyframes rotationLine {
                            0% {
                                transform: rotate(0deg);
                            }

                            100% {
                                transform: rotate(360deg);
                            }
                        }

                        .echart-boxs {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%,-50%);
                            width: 90px;
                            height: 90px;
                        }
                    }
                    .workJc-r{
                        
                    }


                }

                .card-workJc {
                    height: 55%;
                    border: 1px solid #ccc;
                }
}
</style>