hac/src/components/echarts/BorderRadius.vue

<template>
    <div class="hac-echarts-box">
        <div ref="echart" class="hac-echarts" :style="`width : ${chart?.clientWidth}px`"/>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {useAppStore} from "~src/store";
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
const props = defineProps({
    ratio: {
        type: [Number,String],
        default: 0
    }
})

//初始变量
let chart = null;
const echart = ref(null)
const useAppState = useAppStore()
const AppColor = ref(useAppState.getColor);

watch(() => [
    props.ratio
], ([ratio]) => {
    setOptions(ratio, 100 - ratio)
})

//初始化图表
const initChart = () => {
    chart = echarts.init(echart.value)
    setOptions(props.ratio, 100 - props.ratio)
}

//监听浏览器窗口变化
const windowResize = () => {
    window.addEventListener("resize", resizeEvent);
}

const resizeEvent = () => {
    window.requestAnimationFrame(() => {
        chart.resize();
    })
}

//设置图表
const setOptions = (val1,val2) => {
    nextTick(() => {
        chart.setOption({
            tooltip: {
                trigger: "item",
                formatter: "{d}%"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '-7',
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['80%', '50%'],
                    center: ["76%", "50%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 4,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '奉建路' },
                        { value: 735, name: '西环线' },
                        { value: 580, name: '陈油路' },
                        { value: 484, name: '宝北路' }
                    ]
                }
            ],
        })
    })
}

//渲染完成
onMounted(() => {
    nextTick(() => {
        initChart()
        windowResize()
    })
})

//被卸载
onUnmounted(() => {
    window.removeEventListener("resize",resizeEvent);
    chart.dispose()
    chart = null
})


const onResize = () => {
    nextTick(() => {
        chart.resize();
    })
}

// 暴露出去
defineExpose({
    onResize
})
</script>

<style lang="scss" scoped>
.hac-echarts-box {
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    .hac-echarts {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
    }
}
</style>