baozhida-building-system/src/views/system/receptiondesk/conference.vue

<template>
    <div class="person_box">
        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
defineProps({
    title: {
        type: String,
        default: '暂无数据'
    }
})
const chartDistrict = ref(null);
let chartDom = null;
const initAccess = () => {
    let MaxTemArray = [10, 3, 13, 11, 12, 12, 9];
    const dotColorsDic = ['blue', 'red']; // 点的颜色字典
    chartDom = echarts.init(chartDistrict.value);
    let option = {
        title: {
            text: '未来一周气温变化',
            subtarget: 'blank',
            x: 'center',
            top: '2%',
            textStyle: {
                fontSize: 15,
                color: "rgba(254, 254, 254, 1)"
            },
        },
        legend: {
            top: '2%',
            right: '0%',
            textStyle: {
                color: "rgba(254, 254, 254, 1)"
            },
        },
        grid: {
            top: '12%',
            bottom: '12%',
            left: '14%',
            right: '2%'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#C0C4CC',
                    width: 2
                }
            },
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            },
            axisLine: {
                lineStyle: {
                    color: '#C0C4CC',
                    width: 2
                }
            },
        },
        series: [{
            name: '最高气温',
            type: 'line',
            color: '#ff6b93', // 定义legend图例中线颜色
            symbol: "circle",
            lineStyle: {
                // 线的颜色
                color: "rgba(28, 193, 91, 1)",
                cap: "round"
            },
            itemStyle: {
                normal: {
                    color: (params) => {
                        if (params.data > 10) {
                            return dotColorsDic[1]
                        } else {
                            return dotColorsDic[0]
                        }
                    }
                }
            },
            symbolSize: 6,
            label: {
                show: false
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '最高气温平均值',
                    lineStyle: {
                        color: '#0ED638'
                    },
                    label: {
                        formatter: "{b}{c}°C",
                        color: '#0ED638'
                    }
                },
                {
                    name: '阈值',
                    yAxis: 12,
                    lineStyle: {
                        color: '#FF6464'
                    },
                    label: {
                        formatter: "{b}{c}°C",
                        color: '#FF6464'
                    }
                }
                ]
            },
            data: MaxTemArray
        },]
    };
    chartDom.setOption(option)
};
// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>