dyf-vue-ui/src/views/homeIndex/components/DeviceCategory.vue

<template>
    <div class="vchartPage">
        <div ref="chartRef" class="chartRef"></div>
    </div>
</template>
<script setup lang="ts">
import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
import * as echarts from 'echarts';
const chartRef = ref<HTMLDivElement | null>(null);
onMounted(() => {
    if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
    
        getDeviceCommunicationModeStatistics().then((res) => {
            console.log(res, '接口数据');
            const dataList = res.data || [];
            // 1.（通信方式名称）
            const xAxisData = dataList.map(item => item.communicationModeName);
            // 2. 总数数据
            const totalData = dataList.map(item => item.totalDevices);
            // 3. 异常数数据
            const abnormalData = dataList.map(item => item.abnormalDevices);
            // 图表配置）
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: {
                    data: ['总数', '异常'],
                    right: '20px',
                    textStyle: { color: '#DEEFFF' },
                    itemWidth: 12,
                    itemHeight: 12
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData, 
                    axisLine: {
                        lineStyle: { color: 'rgba(255,255,255,0.1)' }
                    },
                    axisLabel: {
                        color: '#DEEFFF' 
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { show: false }, 
                    axisLabel: { color: '#fff' },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '总数',
                        type: 'bar',
                        data: totalData,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(0,166,255,1)' },
                                    { offset: 1, color: 'rgba(0,125,221, 0.6)' }
                                ]
                            ),
                            borderRadius: 4
                        },
                        barWidth: '20px'
                    },
                    {
                        name: '异常',
                        type: 'bar',
                        data: abnormalData,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: 'rgba(232,69,37,1)' },
                                    { offset: 1, color: 'rgba(240,12,12, 0.6)' }
                                ]
                            ),
                            borderRadius: 4
                        },
                        barWidth: '20px'
                    }
                ]
            };

            myChart.setOption(option);
        }).catch(err => {
            console.log('获取数据失败', err);
        });
        // 窗口 resize 时自适应
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
});
</script>
<style scoped lang="scss">
.vchartPage {
    margin-top: 7.8vh;
}

.chartRef {
    width: 100%;
    height: 22vh;
}
</style>