mky-vent-base/src/views/vent/home/colliery/components/wind-monitor.vue

<template>
  <div class="windMonitor">
    <div class="title-top" @click="getDetail">风量监测</div>
    <div class="wind-contents">
      <div class="wind-bar" ref="windBar"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
import * as echarts from 'echarts';
import { getMaxY, getMinY } from '../clique.data'
const emit = defineEmits(['goDetail']);

let props = defineProps({
  flList: Array,
});

//获取dom节点
let windBar = ref<any>();
//坐标轴最大值
let maxY = ref<any>(0);
let minY = ref<any>(0)
//echart数据
let echartData = reactive<any>({ ydata: [], xdata: [] });
//跳转详情
function getDetail() {
  emit('goDetail', 'windrect');
}
function getOption() {
  nextTick(() => {
    const myChart = echarts.init(windBar.value);
    let option = {
      color: [
        '#63caff',
        '#49beff',
        'rgba(74, 205, 255,.1)',
        '#03387a',
        '#03387a',
        '#6c93ee',
        '#a9abff',
        '#f7a23f',
        '#27bae7',
        '#ff6d9d',
        '#cb79ff',
        '#f95b5a',
        '#ccaf27',
        '#38b99c',
        '#93d0ff',
        '#bd74e0',
        '#fd77da',
        '#dea700',
      ],
      grid: {
        containLabel: true,
        left: 30,
        right: 30,
        bottom: echartData.xdata.length > 8 ? 30 : 15,
        top: 40,
      },

      xAxis: {
        type: 'category',
        data: echartData.xdata,
        axisLabel: {
          formatter: function (params) {
            var newParamsName = ''; // 最终拼接成的字符串
            var paramsNameNumber = params.length; // 实际标签的个数
            var provideNumber = 6; // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ''; // 表示每一次截取的字符串
                var start = p * provideNumber; // 开始截取的位置
                var end = start + provideNumber; // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + '\n';
                }
                newParamsName += tempStr; // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName;
          },
          fontSize: 14,
          margin: 15,
          interval: 0,
          textStyle: {
            color: '#b3b8cc',
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(62, 103, 164)',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },

      yAxis: {
        type: 'value',
        name: '(m³/min)',
        // max: maxY.value,
        // min:minY.value,
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: '#b3b8cc',
          },
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
          lineHeight: 10,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(62, 103, 164,.4)',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: echartData.ydata,
          type: 'bar',
          barMaxWidth: 'auto',
          barWidth: 25,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: '#0b9eff',
                },
                {
                  offset: 1,
                  color: '#63caff',
                },
              ],
            },
          },
          label: {
            show: true,
            position: 'top',
            distance: 10,
            color: '#fff',
          },
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          type: 'pictorialBar',
          barMaxWidth: '25',
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [25, 15],
        },
        {
          data: echartData.ydata,
          type: 'pictorialBar',
          barMaxWidth: '25',
          symbolPosition: 'end',
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [25, 12],
          zlevel: 2,
        },
        {
          data: [741, 741, 741, 741, 741, 741, 741, 741],
          type: 'bar',
          barMaxWidth: 'auto',
          barWidth: 25,
          barGap: '-100%',
          zlevel: -1,
        },
        {
          data: [1, 1, 1, 1, 1, 1, 1, 1],
          type: 'pictorialBar',
          barMaxWidth: '25',
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [25, 15],
          zlevel: -2,
        },
        {
          data: [741, 741, 741, 741, 741, 741, 741, 741],
          type: 'pictorialBar',
          barMaxWidth: '25',
          symbolPosition: 'end',
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [25, 12],
          zlevel: -1,
        },
      ],
      dataZoom: [
        {
          // 这部分是关键
          show: echartData.xdata.length > 8 ? true : false,
          type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
          start: 0, // 数据窗口范围的起始百分比
          end: echartData.xdata.length > 8 && echartData.xdata.length <= 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
          height: 10, // 设置缩放条高度
          left: 'center',
          bottom: 25,
          labelPrecision: 0, // 标签精度，默认为auto
          showDetail: false, // 是否显示详情
          showDataShadow: false, // 是否显示数据阴影
        },
      ],
      tooltip: {
        trigger: 'axis',
        show: false,
      },
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}
watch(
  () => props.flList,
  (val) => {
    echartData.xdata.length = 0;
    echartData.ydata.length = 0;
    val.forEach((el: any) => {
      if (el.readData.m3) {
        echartData.xdata.push(el.strinstallpos);
        echartData.ydata.push(el.readData.m3);
      } else {
        echartData.xdata.push(el.strinstallpos);
        echartData.ydata.push('0');
      }
    });
    maxY.value = getMaxY(echartData.ydata)
    minY.value = getMinY(echartData.ydata)
    getOption();
  },
  {
    deep: true,
  }
);

onMounted(() => { });
</script>

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

  .title-top {
    position: absolute;
    top: 9px;
    left: 46px;
    color: #fff;
    font-size: 16px;
    font-family: 'douyuFont';
    cursor: pointer;

    &:hover {
      color: #66ffff;
    }
  }

  .wind-contents {
    position: absolute;
    left: 0;
    top: 36px;
    width: 100%;
    height: calc(100% - 36px);

    .wind-bar {
      width: 100%;
      height: 100%;
    }
  }
}
</style>