vue3之echarts间隔圆环

原创于 2025-02-19 13:49:37 发布

· 178 阅读

0 ·

版权

文章标签：

#echarts #vue.js #javascript

vue3之echarts间隔圆环

效果：
在这里插入图片描述
版本
"echarts": "^5.1.2"

核心代码：

<template>
    <div class="chart" ref="hazardCharts"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { reactive, ref, onMounted,onBeforeUnmount } from 'vue';

const hazardCharts = ref(null);
let chartObj: any = null;
let timer: any = null;
const chartColor = ref(['#FF5151', '#F88518', '#E4C537', '#00FFFF' , '#3DB6FB']);
const state = reactive({
    chartData: [
        {
            "name": "已销号",
            "percentage": 20.5,
            "value": 1475
        },
        {
            "name": "待销号",
            "percentage": 30,
            "value": 145
        },
        {
            "name": "待验收",
            "percentage": 19.5,
            "value": 14
        },
        {
            "name": "待整改",
            "percentage": 10,
            "value": 14
        },
        {
            "name": "待下达",
            "percentage": 20,
            "value": 14
        }
    ],
});

const initChart = () =>{
    if (!chartObj) {
      chartObj = echarts.init(hazardCharts.value);
    }
    const option = getOption(state.chartData)

    // 设置配置项
    chartObj.setOption(option);
}

const getOption = (data: any) => {
    let peiData: any = [];

    data.forEach((ele: any, index: number)=>{
        peiData.push({
            value: ele.percentage,
            name: ele.name,
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: chartColor.value[index],
                }
            }
        },
            {
            value: 1,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        }
        )
    })
    let option = {
        legend: {
            show: false
        },
        tooltip: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: [
            {
                type: 'pie',
                clockWise: false,
                radius: [120, 135],
                hoverAnimation: false,
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                    }
                },
                data: peiData,
            }
        ]
    }
    return option;
}

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
    if (chartObj) {
        chartObj.clear();
        chartObj.dispose();
        chartObj = null;
    }
});
</script>

<style scoped lang="scss">
.chart {
    width: 345px;
    height: 345px;
}
</style>