Cold_offline_web/src/components/highcharts-t.vue

<template>
    <div style="height: 100%;">
        <Chart v-if="chartOptions1.series.length != 0" style="min-height: 600px;" :options="chartOptions1"
            constructor-type="stockChart">
        </Chart>
        <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
    </div>
</template>

<script setup>
import emitter from "@/plugin/bus";
// const emit = defineEmits(['submit']);
import { Chart } from 'highcharts-vue';
import { computed, onBeforeUnmount, reactive, watch, ref ,nextTick} from "vue";
import { useMessage } from "naive-ui";
import { useStore } from 'vuex'
const message = useMessage()
const popData = defineProps({
    dataList: {
        type: Array,
        default: () => [],
    }
})

const plotLinesData = reactive({
    tBottom: null,
    tTop: null
})
const store = useStore()
const plot = computed(() => store.state.plotLineList)

nextTick(()=>{
    chartOptions1.yAxis.plotLines[0].value = plot.value.tTop
    chartOptions1.yAxis.plotLines[0].label.text = `上限（${plot.value.tTop}Rh）`, //标签的内容
    chartOptions1.yAxis.plotLines[1].value = plot.value.tBottom
    chartOptions1.yAxis.plotLines[1].label.text = `下限（${plot.value.tBottom}Rh）` //标签的内容
})

//设置就展示
emitter.on("onMessage", (val) => {
    console.log('123',val)
    chartOptions1.yAxis.plotLines[0].value = val.tTop
    chartOptions1.yAxis.plotLines[0].label.text = `上限（${val.tTop}Rh）`, //标签的内容
    chartOptions1.yAxis.plotLines[1].value = val.tBottom
    chartOptions1.yAxis.plotLines[1].label.text = `下限（${val.tBottom}Rh）` //标签的内容
});
//关闭
onBeforeUnmount(() => {
    emitter.off("onMessage");
});
const computedData = computed(() => {
    // console.log('计算属性',popData.dataList)
    if (popData.dataList.length != 0) {
        return computedDataFun()
    } else {
        return ''
    }
})
const computedDataFun = () => {
    let arr = popData.dataList
    let mapData = []
    for (const key of arr) {
        for (let i = 0; i < key.data.length; i++) {
            mapData.push(key.data[i][1])
        }
    }
    if (mapData.length == 0) {
        message.error('哎呀，没有可展示的数据哦')
        return
    }
    //求和
    let num = mapData.reduce((n, m) => n + m);//求和
    //最大值
    let maxData = Math.max(...mapData)
    //最小值
    let minData = Math.min(...mapData)
    //平均值
    let pingjun = (num / mapData.length).toFixed(1)

    return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
}

watch(() => popData.dataList, (newValue) => {
    chartOptions1.series = []
    nextTick(()=>{
        chartOptions1.series = newValue
    })
    
}, { deep: true, immediate: false })

const emit = defineEmits(['setTimeFun']);
// 图表配置
const chartOptions1 = reactive({
    xAxis: {
        type: 'datetime',
        labels: {
            format: '{value:%Y-%m-%d %H:%M:%S}',
        },
    },
    time: {
        useUTC: false
    },
    boost: {
        useGPUTranslations: true
    },

    tooltip: {
        xDateFormat: '%Y-%m-%d %H:%M:%S',
    },
    yAxis: {
        opposite: false, //设置y轴提示在左边
        title: {
            // text: '温度℃'
        },
        plotLines: [{
            color: '#FF1D00', //线的颜色，定义为红色
            dashStyle: 'DashDot', //默认值，这里定义为实线
            value: plotLinesData.hTop, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
            width: 2, //标示线的宽度，2px
            label: {
                text: `上限（${plotLinesData.hTop}Rh）`, //标签的内容
                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
            }
        }, {
            color: '#FF1D00', //线的颜色，定义为红色
            dashStyle: 'DashDot', //默认值，这里定义为实线
            value: plotLinesData.hBottom, //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线  
            width: 2, //标示线的宽度，2px
            label: {
                text: `下限（${plotLinesData.hBottom}Rh）`, //标签的内容
                align: 'right', //标签的水平位置，水平居左,默认是水平居中center
                // x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
            }
        }]

    },
    plotOptions: {
        series: {
            turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
        },
    },

    legend: {
        enabled: true,
    },

    accessibility: {
        enabled: false,
    },
    rangeSelector: {
            buttons: [], // 不显示左边的zoom
            selected: 1,
            inputEnabled: false // 不显示日期输入框
        },
    boost: {
        useGPUTranslations: true,
        seriesThreshold: 5,
    },

    scrollbar: {
        enabled: false,
    },
    chart: {
        zooming: {
            singleTouch: true,
            resetButton: {},
            type: 'xy',
        },
        events: {
            selection(event) {
                if (event.xAxis) {
                    console.log('框选')
                    emitter.emit("onSelectionTime",event.xAxis);
                    emit("setTimeFun", event.xAxis)
                }
            },
        },
    },

    series: [],
})

</script>