screenFront/src/views/generalEnvironmentMechanical/components/humidityBar.vue

<template>
    <div class="content-big" ref="humiture"></div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const { proxy } = getCurrentInstance() as any;
const props = defineProps<{
    title: any;
    data: any;
    bottom: any;
    top: any;
}>();
let humiture = ref();
let chart = null
watch(() => props, (val) => {
    init()
}, { deep: true })

function init() {
    if (!chart) {
        chart = proxy.$echarts.init(humiture.value, "dark");
    }
    let option = {
        title: {
            text: props.title,
            top: '2%'
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },

        },
        legend: {
            // bottom: "3%",
            top: '6%'
        },
        grid: {
            top: "15%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        color: ["#4992FF", "#7CFFB2", "#FF6E76"],
        xAxis: {
            type: "category",
            data: props.data.list,
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            axisLabel: {
                formatter: "{value} (°C/%RH)",
            },
        },
        series: [
            {
                name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${props.bottom.temp}°C - ${props.top.temp}°C)`,
                type: "bar",
                data: props.data.temp,
                barWidth: '30%',
                itemStyle: {
                    color: function (params) {
                        var index_color = params.value;
                        if (
                            index_color <= props.bottom.temp ||
                            index_color >= props.top.temp
                        ) {
                            return "#FF6E76";
                        } else {
                            return "#4992FF";
                        }
                    },
                },
                label: {
                    formatter: "{c} °C",
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "rgb(255,255,255,0.9)",
                    },
                },
                markLine: {
                    // 设置最大值和最小值
                    silent: true, //基线显示 隐藏
                    symbol: "none", // 不显示箭头和圆点
                    data: [
                        {
                            name: t('messages.TemperatureRange'),
                            yAxis: props.bottom.temp,
                            label: {
                                formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${props.bottom.temp} °C`,
                                position: "middle",
                            },
                            lineStyle: {
                                color: "yellow", // 这儿设置安全基线颜色
                            },
                        },
                        {
                            name: t('messages.TemperatureRange'),
                            yAxis: props.top.temp,
                            label: {
                                formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_up')}：${props.top.temp} °C`,
                                position: "middle",
                            },
                            lineStyle: {
                                color: "yellow", // 这儿设置安全基线颜色
                            },
                        },
                    ],
                },
            },
            {
                name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${props.bottom.humidity}%RH - ${props.top.humidity}%RH)`,
                type: "bar",
                data: props.data.humidity,
                barWidth: '30%',
                itemStyle: {
                    color: function (params) {
                        var index_color = params.value;

                        if (
                            index_color <= props.bottom.humidity ||
                            index_color >= props.top.humidity
                        ) {
                            return "#FF6E76";
                        } else {
                            return "#7CFFB2";
                        }
                    },
                },
                label: {
                    formatter: "{c} %RH",
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "rgb(255,255,255,0.9)",
                    },
                },
                markLine: {
                    // 设置最大值和最小值
                    silent: true, //基线显示 隐藏
                    symbol: "none", // 不显示箭头和圆点
                    data: [
                        {
                            name: "湿度",
                            yAxis: props.bottom.humidity,
                            label: {
                                formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + props.bottom.humidity + "%RH",
                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                        {
                            name: "湿度",
                            yAxis: props.top.humidity,
                            label: {
                                formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + props.top.humidity + "%RH",
                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                    ],
                },
            },
            {
                name: t('messages.TemperatureHumidityexceeded'),
                type: "bar",
                color: '#FF6E76'
            }
        ],
    };
    chart.setOption(option);
}

onMounted(() => {
    // init()
})
</script>

<style scoped>
.content-big {
    width: 100%;
    height: 100%;
}
</style>