mky-vent-base/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,
  }
});
//获取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: {
        top: '15%',
        left: '2%',
        bottom: '6%',
        right: '2%',
        containLabel: true,
      },
      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)',
            },
          },
          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)',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(14, 53, 95)',
            },
          },
          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>