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 } from 'vue';
  import * as echarts from 'echarts';
  const emit = defineEmits(['goDetail'])
  //获取dom节点
  let windBar = ref<any>();
//跳转详情
function getDetail() {
    emit('goDetail', 'windrect')
  }
  function getOption() {
    nextTick(() => {
      const data = [60, 90, 100, 50, 70, 33,];
      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: '15%',
          right: '8%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2023.1', '2023.2',  '2023.3', '2023.4', '2023.5', '2023.6'],
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 10,
            textStyle: {
              color: '#b3b8cc',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(62, 103, 164)',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          name: '(%)',
          max: 150,
          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: data,
            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: data,
            type: 'custom',
            renderItem: renderItem,
            zlevel: 2,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
  onMounted(() => {
    getOption();
  });
</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>