mky-vent-base/src/views/vent/home/configurable/green/components/dz-risk.vue

<template>
    <div class="dz-risk">
        <div class="risk-container">
            <div class="risk-center"></div>
            <div ref="riskPie" class="risk-pie"></div>
        </div>
    </div>
</template>

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

let props = defineProps({
    riskData: {
        type: Array,
        default: () => {
            return []
        }
    }
})

let riskPie = ref(null)
let echartData = ref<any[]>([])

function getOption() {
    nextTick(() => {
        const colorList = [
            {
                type: 'radial',
                r: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(182, 242, 255,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(95, 228, 255,1)' // 100% 处的颜色
                }],

            },
            {
                type: 'radial',
                r: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(176, 255, 236,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(86, 255, 171,1)' // 100% 处的颜色
                }],

            },
            {
                type: 'radial',
                r: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(255, 253, 176,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(255, 255, 86,1)' // 100% 处的颜色
                }],

            },
            {
                type: 'radial',
                r: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(215, 179, 255,1)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(134, 88, 255,1)' // 100% 处的颜色
                }],

            },
        ]
        let myChart = echarts.init(riskPie.value);
        let option = {
            color: colorList,
            // tooltip: {
            //     trigger: 'item'
            // },
            series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['48%', '70%'],
                // clockwise: false,
                // avoidLabelOverlap: true,
                emphasis: {
                    label: {
                        show: true
                    },
                    itemStyle: {
                        color: function (params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                // hoverOffset: 0,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex]
                        }
                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    },
                    formatter: '{a|{b}：{d}%}\n{hr|}',
                    rich: {
                        hr: {
                            backgroundColor: 't',
                            borderRadius: 3,
                            width: 3,
                            height: 3,
                            padding: [3, 3, 0, -12]
                        },
                        a: {
                            padding: [-10, 5, -15, 5]
                        }
                    }
                },


                labelLine: {
                    normal: {
                        length: 20,
                        length2: 20,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: echartData.value,
            }]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}

watch(() => props.riskData, (newV, oldV) => {
    echartData.value = newV
    getOption()
}, { immediate: true })

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';
@{theme-deepblue} {
    .dz-risk {
        --image-model_risk-container: url('@/assets/images/themify/deepblue/home-container/configurable/1400.png');
        --image-model_risk-center: url('@/assets/images/themify/deepblue/home-container/configurable/1500.png');
    }
}

.dz-risk {
    --image-model_risk-container: url('@/assets/images/home-green/1400.png');
    --image-model_risk-center: url('@/assets/images/home-green/1500.png');
    height: 100%;
    .risk-container {
        position: relative;
        height: 100%;
        width: 100%;
        height: 210px;
        background: var(--image-model_risk-container) no-repeat center;
        background-size: auto 100%;

        .risk-center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 80px;
            background: var( --image-model_risk-center) no-repeat center;
            background-size: auto 100%;
        }

        .risk-pie {
            width: 100%;
            height: 100%;
        }
    }
}
</style>