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, reactive, watch, defineProps } from 'vue';

  let props = defineProps({
    deviceId: {
      type: String,
    },
  });

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

  watch(
    () => props.deviceId,
    (data) => {
      echartDataWds = Object.assign({}, data);
      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,
          },
        },

        legend: {
          align: 'left',
          right: '50%',
          top: '0%',
          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: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
            },
          ],
        },

        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: 100,
            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">
  .work-box {
    width: 100%;
    height: 100%;
  }
</style>