mky-vent-base/src/views/vent/monitorManager/alarmMonitor/common/echartLine1.vue

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

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { ref, nextTick, reactive, watch } from 'vue';
  let props = defineProps({
    echartDataSg: {
      type: Object,
    },
    lengedDataName: {
      type: String,
    },
    maxY: {
      type: Number,
    },
    minY: {
      type: Number,
    },
  });

  //获取dom元素节点
  let line = ref<any>();
  let echartDataSgs = reactive({});
  watch(
    () => props.echartDataSg,
    (data) => {
      echartDataSgs = Object.assign({}, data);
      getOption();
    },
    { immediate: true, deep: true }
  );

  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(line.value);
      let option = {
        grid: {
          top: '8%',
          left: '5%',
          bottom: '14%',
          right: '5%',
          //   containLabel: true,
        },
        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: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
            },
          ],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              fontSize: 14,
              margin: 10,
              textStyle: {
                color: '#b3b8cc',
              },
              // interval: 0,
              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: '#244a94',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0d2973',
                type: 'dashed',
              },
            },
            axisTick: {
              show: false,
            },
            data: echartDataSgs.xData,
          },
        ],
        yAxis: [
          {
            boundaryGap: false,
            name: props.lengedDataName ? props.lengedDataName : '',
            type: 'value',
            max: props.maxY,
            min: props.minY,
            axisLabel: {
              textStyle: {
                color: '#b3b8cc',
              },
            },
            nameTextStyle: {
              color: '#fff',
              fontSize: 12,
              lineHeight: 5,
            },
            splitLine: {
              lineStyle: {
                color: '#0d2973',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#244a94',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
            type: 'line',
            smooth: false,
            showSymbol: false,
            zlevel: 3,
            itemStyle: {
              color: '#02f2de',
              borderColor: '#a3c8d8',
            },
            lineStyle: {
              normal: {
                width: 3,
                color: '#02f2de',
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(2, 242, 222,0.8)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(2, 242, 222,0.4)',
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(2, 242, 222,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: echartDataSgs.yData,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
</script>

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

    .line {
      width: 100%;
      height: 100%;
    }
  }
</style>