mky-vent-base/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, onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
  import * as echarts from 'echarts';

  let props = defineProps({
    echartDataGq: {
      type: Object,
    },
  });
  //获取dom元素节点
  let line = ref<any>();
  let echartDataGqs=reactive({})
  watch(
    () => props.echartDataGq,
    (data) => {
      console.log(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: '4%',
          bottom: '8%',
          right: '5%',
            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,
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            type: 'value',
            max: 5000,
            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: '最大值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#19a3df',
              },
            },
            data:echartDataGqs.maxData,
          },
          {
            name: '最小值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#4fffad',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#4fffad',
              },
            },
            data:echartDataGqs.minData,
          },
          {
            name: '平均值',
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#fc8452',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 2,
                color: '#fc8452',
              },
            },
       
            data: echartDataGqs.aveValue,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
</script>

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