vent-template/src/views/vent/monitorManager/alarmMonitor/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,
    },
    echartDw: {
      type: String,
    },
    echartDw1: {
      type: String,
    },
    gridV: {
      type: Object,
      default: () => {
        return {
          top: '15%',
          left: '2%',
          bottom: '6%',
          right: '2%',
          containLabel: true,
        };
      },
    },
  });
  //获取dom元素节点
  let line = ref<any>();
  let echartDataGqs = reactive({});
  watch(
    () => props.echartDataGq,
    (data) => {
      echartDataGqs = Object.assign({}, data);
      getOption();
    },
    { immediate: true, deep: true }
  );
  function getOption() {
    nextTick(() => {
      let myChart = echarts.init(line.value);
      let option = {
        grid: props.gridV,
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        legend: {
          align: 'left',
          right: 'center',
          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: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
            },
            {
              name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
            },

            {
              name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
            },
          ],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              fontSize: 14,
              margin: 20,
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: function (params) {
                let newParamsName = ref(''); // 最终拼接成的字符串
                let paramsNameNumber = ref(params.length); // 实际标签的个数
                let provideNumber = ref(10); // 每行能显示的字的个数
                let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber.value > provideNumber.value) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''; // 表示每一次截取的字符串
                    var start = p * provideNumber.value; // 开始截取的位置
                    var end = start + provideNumber.value; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber.value);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n';
                    }
                    newParamsName.value += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName.value = params;
                }
                //将最终的字符串返回
                return newParamsName.value;
              },
            },
            axisLine: {
              lineStyle: {
                // color: 'rgba(14, 53, 95)',
                color: '#244a94',
              },
            },
            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',
              },
              formatter: '{value}',
            },
            name: props.echartDw,
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 10,
            },
            splitLine: {
              lineStyle: {
                // color: 'rgba(14, 53, 95)',
                color: '#0d2973',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(14, 53, 95)',
                color: '#244a94',
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            boundaryGap: false,
            type: 'value',
            max: props.maxY,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
              formatter: '{value}',
            },
            name: props.echartDw1,
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 10,
            },
            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>