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

<template>
  <div ref="work" class="work-box"></div>
</template>

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

  // well i know this is trash but the time is reaching
  let props = defineProps<{
    xData: string[];
    y1Data: number[];
    y2Data: number[];
    y3Data: number[];
    y4Data: number[];
    yUnit?: string;
    legendName?: string;
  }>();

  //获取dom元素节点
  let work = ref<any>();

  watch(
    () => props.xData,
    () => {
      getOption();
    },
    { immediate: true, deep: true }
  );

  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(work.value);
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        grid: {
          top: '15%',
          left: '11%',
          bottom: '10%',
          right: '4%',
        },
        legend: {
          align: 'left',
          top: '0%',
          type: 'plain',
          textStyle: {
            color: '#7ec7ff',
            fontSize: 14,
          },
          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',
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#244a94',
            //   },
            // },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: props.xData,
          },
        ],
        yAxis: [
          {
            // boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
            },
            name: props.yUnit,
            // nameTextStyle: {
            //   color: '#fff',
            //   fontSize: 12,
            //   lineHeight: 10,
            // },
            splitLine: {
              lineStyle: {
                color: '#0d2973',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: props.legendName + '实时值',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: 'none',
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            data: props.y4Data,
          },
          {
            name: props.legendName + '预测值',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: 'none',
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            data: props.y1Data,
          },
          {
            name: props.legendName + '最大值',
            type: 'line',
            smooth: true,
            symbol: 'none',
            yAxisIndex: 0,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            data: props.y2Data,
          },
          {
            name: props.legendName + '最小值',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbol: 'none',
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            data: props.y3Data,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
</script>

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