gas-injection/src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine.vue

<template>
  <div class="echartLine">
    <div class="line" ref="line"></div>
  </div>
</template>

<script lang="ts" setup>
  import {defineProps,  ref,  nextTick, reactive,  watch,  } from 'vue';
  import * as echarts from 'echarts';

  let props = defineProps({
    echartDataGq: {
      type: Object,
    },
    maxY:{
      type:Number
    }
  });
  //获取dom元素节点
  let line = ref<any>();
  let echartDataGqs=reactive({})
  watch(
    () => props.echartDataGq,
    (data) => {
      echartDataGqs=Object.assign({},data)
      getOption();
    },
    { immediate: true,deep:true }
  );
  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(line.value);
      let option = {
        grid: {
          top: '6%',
          left: '2%',
          bottom: '6%',
          right: '2%',
            containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
         
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              fontSize: 14,
              margin: 20,
              textStyle: {
                color: '#b3b8cc',
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(14, 53, 95)',
              },
            },
            splitLine: {
              show: false,
              //   lineStyle: {
              //     color: '#243753',
              //   },
            },
            axisTick: {
              show: false,
            },
            data: echartDataGqs.xData ? echartDataGqs.xData : [],
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            max: props.maxY,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(14, 53, 95)',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(14, 53, 95)',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name:echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#19a3df',
              },
            },
            data:echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
          },
          {
            name:echartDataGqs.minData ? echartDataGqs.minData.lengedData  : '' ,
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#4fffad',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#4fffad',
              },
            },
            data:echartDataGqs.minData ? echartDataGqs.minData.data : [],
          },
          {
            name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#fc8452',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#fc8452',
              },
            },
       
            data:echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
</script>

<style scoped lang="less">
  .echartLine {
    width: 100%;
    height: 100%;
    .line {
      width: 100%;
      height: 100%;
    }
  }
</style>