mky-vent-5/src/views/vent/home/clique/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';
  const emit = defineEmits(['goDetail'])

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

  //获取dom节点
  let windBar = ref<any>();
  //echart数据
  let echartData = reactive<any>({ ydata: [], xdata: [] });
  //跳转详情
  function getDetail() {
    emit('goDetail', 'windrect')
  }
  function getOption() {
    nextTick(() => {
      const color = '#66ffff';
      const barWidth = 0.1; // 柱条占比

      function renderItem(params, api) {
        const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
        const width = api.size([0, 1])[0] * barWidth; // 宽度
        const ballRadius = width * 0.8;
        return {
          type: 'group',
          children: [
            {
              // 圆形装饰
              type: 'circle',
              shape: {
                cx: topCenter[0],
                cy: topCenter[1],
                r: ballRadius,
              },
              style: api.style({
                fill: '#66ffff',
                stroke: color,
                lineWidth: 2,
              }),
            },
          ],
        };
      }

      const myChart = echarts.init(windBar.value);
      let option = {
        color: [color],
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: function (p) {
            console.info(p);
            return p.marker + p.name + ' : ' + p.value;
          },
        },

        grid: {
          left: '8%',
          top: '15%',
          bottom: '32%',
          right: '8%',
          // containLabel: true
        },
        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: 10,
            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: 5000,
          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',
            barWidth: barWidth * 100 + '%',
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(85, 255, 237, 1)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(66, 142, 255, 0.1)', // 100% 处的颜色
                  },
                ],
              },
            },
            label: {
              normal: {
                show: true,
                position: ['-7', '-28'],
                formatter: [' {a|{c}}'].join(','),
                rich: {
                  a: {
                    color: '#fff',
                    align: 'center',
                  },
                },
              },
            },
          },
          {
            data: echartData.ydata,
            type: 'custom',
            renderItem: renderItem,
            zlevel: 2,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.flList,
    (val) => {
      console.log(val, '测风数据');
      echartData.xdata.length = 0;
      echartData.ydata.length = 0;
      val.forEach((el) => {
        echartData.xdata.push(el.strinstallpos);
        echartData.ydata.push(el.readData.m3);
      });
      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>