gas-injection/src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

<template>
    <div class="echartBar">
        <div class="bar" ref="bar"></div>
    </div>
</template>

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

let props = defineProps({

    echartData: {
        type: Object,
        default: () => {
            return {}
        }
    }
});
//获取dom元素节点
let bar = ref<any>();
let echartDatas = ref<any[]>([])
watch(
    () => props.echartData,
    (newV, oldV) => {
        let data:any[]=[]
        Object.keys(newV).forEach(el => {
            if (el == 'dust') {
                data.push({ name: '粉尘', value: newV[el] })
            } else if (el == 'fire') {
                data.push({ name: '火灾', value: newV[el] })
            } else if (el == 'gas') {
                data.push({ name: '瓦斯', value: newV[el] })
            } else if (el == 'vent') {
               data.push({ name: '通风', value: newV[el] })
            }
        })
        echartDatas.value=data
        getOption();
    },
    { deep : true, }
);

function getOption() {
    nextTick(() => {
        let myChart = echarts.init(bar.value);
        let option = {
            title: {
                text: '风险比例分析',
                left: '20%',
                top: 0,
                textStyle: {
                    color: '#fff',
                    fontSize: 14,
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)",
                backgroundColor: 'rgba(0, 0, 0, .6)',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
            },
            series: [{
                name: '',
                type: 'pie',
                radius: '50%',
                center: ['30%', '54%'],
                color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                data: echartDatas.value.sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'radius',

                label: {
                    normal: {
                        formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                        rich: {
                            c: {
                                color: '#00d8ff',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 5
                            },
                            b: {
                                color: '#fff',
                                fontSize: 12,
                                height: 40
                            },
                        },
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 10,

                    }
                },
                itemStyle: {
                    normal: {
                        shadowColor: 'rgba(0, 0, 0, 0.8)',
                        shadowBlur: 50,
                    }
                }
            }]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}
</script>

<style scoped lang="less">
.echartBar {
    width: 100%;
    height: 100%;

    .bar {
        width: 100%;
        height: 100%;
    }
}
</style>