hlt_gis_admin/src/views/dashboard/workbench/component/InterfaceMonth.vue

<template>
  <div class="spatial-analysis-statistic">
    <div class="title">{{ title }}</div>
    <div class="echart-container" id="defect-column" ref="domRef"></div>
  </div>
</template>
    
  <script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
  shallowRef,
  onUnmounted,
} from 'vue';
import moment from 'moment';

import { queryApiUseCountMouths } from '/@/api/interface/interface';

const props = {
  type: {
    type: Object,
  },
};

export default defineComponent({
  name: 'InterfaceMonth',
  components: {},
  props,
  setup(props) {
    const data = reactive({
      title: '月度接口访问次数',
      interval: null,
    });
    const domRef = ref(null);
    const { proxy } = getCurrentInstance();
    const echarts = proxy.$echarts;
    const mychart = shallowRef(null);

    /**
     * 查询统计数据
     */
    const queryData = async () => {
      const res = await queryApiUseCountMouths();

      let xAxisData = [],
        seriesData = [];

      if (res) {
        res.mouths.map((item) => {
          xAxisData.push(item);
        });

        res.nums.map((item) => {
          seriesData.push(parseInt(item));
        });
      }
      if (seriesData.length < 1 || xAxisData.length < 1) return;
      const option = getOption(seriesData, xAxisData);
      setEcharts(option);
    };

    const setEcharts = (option) => {
      if (mychart.value) mychart.value.clear();
      mychart.value = echarts.init(domRef.value);
      //const option = getOption();
      mychart.value.setOption(option,true);
      window.onresize = () => {
        mychart.value.resize();
      };
    };

    const getOption = (seriesData, xAxisData) => {
      //const seriesData = [123, 60, 25, 28, 42, 39, 20, 40, 123, 60, 25, 28];
      const maxValue = Math.max.apply(null, seriesData);
      //const xAxisData = ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月',];
      const colorList = [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(6,113,221,1)', // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: 'rgba(6,113,221,0.9)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(6,113,221,0)', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(237,172,75,1)', // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: 'rgba(237,172,75,0.9)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(237,172,75,0.2)', // 100% 处的颜色   'rgba(6,113,221,0.2)'
            },
          ],
          global: false, // 缺省为 false
        },
      ];
      let seriesSymboleData = [];
      seriesData.map((item) => {
        seriesSymboleData.push({
          value: item,
          symbol: 'rect',
          symbolSize: ['100%', 4],
          itemStyle: {
            color: item < maxValue ? 'rgba(6,113,221,1)' : 'rgba(237,172,75,1)',
          },
        });
      });
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          formatter: function (params) {
            return params[0].name + ': ' + params[0].value;
          },
        },
        xAxis: {
          data: xAxisData,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: '#000',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(222, 222, 222, 1)',
            },
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: true },
        },
        grid: {
          //极坐标
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },

        series: [
          {
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '80%',
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'rect',
            itemStyle: {
              opacity: 1,
              color: (params) => {
                let color = colorList[0];
                if (params.data === maxValue) color = colorList[1];
                return color;
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: seriesData,
            z: 10,
          },
          {
            name: 'glyph',
            type: 'pictorialBar',
            barGap: '-100%',
            symbolPosition: 'end',
            //symbolSize: 50,
            symbolOffset: [0, '-160%'],
            data: seriesSymboleData,
          },
        ],
        animationDuration: 0,//这里两个动画设置可以让图表更顺滑
        animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑
      };
    };

    onMounted(() => {
      if (data.interval) return;
      data.interval = setInterval(() => {
        queryData();
      }, 3000);
    });
    onUnmounted(() => {
      if (data.interval) clearInterval(data.interval);
    });
    return {
      domRef,
      mychart,
      ...toRefs(data),
      queryData,
      setEcharts,
      getOption,
    };
  },
});
</script>
    <style lang="less" scoped>
.spatial-analysis-statistic {
  height: 100%;
  width: 100%;
  padding: 1rem;
  .title {
    height: 1.2rem;
    font-family: Source Han Sans CN;
    font-size: 1.012rem;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #3d3d3d;
    margin-bottom: 1.2rem;
  }
  .echart-container {
    height: calc(100% - 2.4rem);
    width: 100%;
  }
}
</style>