mky-vent-base/src/views/vent/home/clique/dustComponents/measure-point.vue

<template>
  <div class="measure-point">
    <div class="title">{{ roadTitle }}</div>
    <div class="measure-content">
      <div class="echart-box">
        <div ref="measureRef" class="measure"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // 该组件和wind-road组件基本上一摸一样，只不过该组件是适配首页中间的卡片而做的
  import { ref, reactive, nextTick, defineProps, watch, onMounted } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import * as echarts from 'echarts';
  import { useRouter } from 'vue-router';

  let props = defineProps({
    measureData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const roadTitle = '监测点位统计与分析';
  const measureRef = ref();
  let router = useRouter(); //路由
  // let xData = ref<any[]>([]);
  // let yData = ref<any[]>([]);
  // let maxData = reactive<any[]>([]);

  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(measureRef.value);
      // let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          textStyle: {
            color: '#ffffff', // 字体颜色
          },
        },
        grid: {
          top: '40',
          left: '10',
          bottom: '10',
          right: '10',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: [
            '柳塔矿',
            '寸草塔二矿',
            '布尔台矿',
            '乌兰木伦矿',
            '寸草塔矿',
            '石圪台矿',
            '补连塔矿',
            '哈拉沟矿',
            '上湾矿',
            '活鸡兔井',
            '大柳塔井',
            '锦界矿',
            '榆家梁矿',
            '保德矿',
          ],
          // data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
          //data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
          axisLabel: {
            show: true,
            color: '#ffffff',
            rotate: 0,
            formatter: function (params) {
              let newParamsName = '';
              const paramsNameNumber = params.length;
              const provideNumber = 3; // 单行显示文字个数
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = '';
                  const start = p * provideNumber;
                  const 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;
            },
          },
          // data: xData.value,
        },
        yAxis: [
          {
            type: 'value',
            max: 20,
            splitLine: {
              lineStyle: {
                color: 'rgba(21,80,126,.3)',
                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              },
              // show: item.linetype == 'line' ? true : false,
              show: true,
            },
          },
        ],

        series: [
          {
            name: '测点异常数',
            type: 'bar',
            stack: 'Ad',
            barMaxWidth: '24',
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: '#F56731',
            },
            label: {
              show: true,
              formatter: (params) => (params.value > 0 ? params.value : ''),
            },
            data: [0, 1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 2, 0],
          },
          {
            name: '测点正常数',
            type: 'bar',
            stack: 'Ad',
            barMaxWidth: '24',
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: '#00E8FFBB',
            },

            label: {
              show: true,
              textStyle: {
                //数值样式
                color: '#000',
              },
            },
            data: [5, 6, 5, 8, 8, 6, 8, 11, 6, 7, 4, 7, 7, 7],
          },
          {
            name: '',
            type: 'bar',
            // stack: 'Ad',
            barGap: '-100%',
            barMaxWidth: '24',
            z: 1,
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              color: '#00E8FF00',
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: 'top', //在上方显示
              textStyle: {
                //数值样式
                color: '#fff',
                fontSize: 14,
              },
            },
            data: [5, 7, 5, 8, 10, 6, 9, 11, 6, 7, 4, 8, 9, 7],
          },
        ],
      };
      myChart.setOption(option);
      // 监听柱状图的点击事件
      myChart.on('click', function (params) {
        if (params.componentType === 'series') {
          // alert('您点击的是第 ' + (params.dataIndex + 1) + ' 个柱子，其值为 ' + params.value);
          router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=dusting');
        }
      });
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.measureData,
    (newV, oldV) => {
      if (JSON.stringify(newV) != '{}') {
        getOption();
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  onMounted(() => {
    getOption();
  });
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .measure-point {
    width: 100%;
    height: 100%;
    position: relative;

    .title {
      position: absolute;
      left: 50px;
      top: 10px;
      color: #fff;
      font-family: 'douyuFont';
      font-size: 14px;
    }

    .measure-content {
      // width: 100%;
      // position: relative;
      height: 100%;
      padding: 42px 40px 15px 40px;
      box-sizing: border-box;

      .echart-box {
        // position: absolute;
        width: 100%;
        height: 100%;

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