mky-vent-base/src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine2.vue

<template>
    <div class="echart-work">
        <div ref="work" class="work-box"></div>
    </div>
</template>
  
<script lang="ts" setup>
import * as echarts from 'echarts'
import {  ref,  nextTick,reactive,  watch, defineProps } from 'vue';

let props = defineProps({
    echartDataWd: {
        type: Object,
    }
})

//获取dom元素节点
let work = ref<any>()
let echartDataWds=reactive({})

watch(() => props.echartDataWd, (data) => {
    echartDataWds=Object.assign({},data)
    getOption()
}, { immediate: true ,deep:true})

function getOption() {
    nextTick(() => {
        const myChart = echarts.init(work.value)
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
            },

            legend: {
                align: 'left',
                right: '5%',
                top: '5%',
                type: 'plain',
                textStyle: {
                    color: '#7ec7ff',
                    fontSize: 14,
                },
                // icon:'rect',
                itemGap: 25,
                itemWidth: 18,
                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
                data: [
                    {
                        name: '最小值',
                    },
                    {
                        name: '最大值',
                    },
                    {
                        name: '平均值',
                    },
                ],
            },

            grid: {
                top: '20%',
                left: '4%',
                right: '4%',
                bottom: '20%',
                // containLabel: true
            },

            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#244a94',
                        },
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#b3b8cc',
                            padding: 5,
                            fontSize: 14,
                        },
                        formatter: function (data) {
                            return data
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0d2973',
                            type: 'dashed',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: echartDataWds.xData,
                },
            ],

            yAxis: [
                {
                    name: '(℃)',
                    nameTextStyle: {
                        color: '#7ec7ff',
                        fontSize: 14,
                        padding: 0,
                    },
                    min: 0,
                    max: 2000,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0d2973',
                            type: 'dashed',
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#244a94',
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#b3b8cc',
                            padding: 5,
                        },
                        formatter: function (value) {
                            if (value === 0) {
                                return value
                            }
                            return value
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    name:echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 0,
                    symbolSize: 8,
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4653fd', // 线条颜色
                        },
                        borderColor: 'rgba(0,0,0,.4)',
                    },
                    itemStyle: {
                        color: '#4653fd',
                        borderColor: '#646ace',
                        borderWidth: 0,
                    },
                    data: echartDataWds.maxData ? echartDataWds.maxData.data : [],
                },
                {
                    name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 0,
                    symbolSize: 8,

                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#46fda8', // 线条颜色
                        },
                        borderColor: 'rgba(0,0,0,.4)',
                    },
                    itemStyle: {
                        color: '#46fda8',
                        borderColor: '#646ace',
                        borderWidth: 0,
                    },
                    data: echartDataWds.minData ? echartDataWds.minData.data : [],
                },
                {
                    name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 0,
                    symbolSize: 8,

                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#1eb0fc', // 线条颜色
                        },
                        borderColor: 'rgba(0,0,0,.4)',
                    },
                    itemStyle: {
                        color: '#1eb0fc',
                        borderColor: '#646ace',
                        borderWidth: 0,
                    },
                    data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
                },
            ],
        }
        myChart.setOption(option)
        window.onresize = function () {
            myChart.resize()
        }
    })
}


</script>
  
<style scoped lang="less">
.echart-work {
    width: 100%;
    height: 100%;

    .work-box {
        width: 100%;
        height: 100%;
    }
}
</style>