
<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 { queryApiUseCountDays } from '/@/api/interface/interface'
const props = {
  type: {
    type: Object,
  },
};

export default defineComponent({
  name: 'InterfaceEveryday',
  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 queryApiUseCountDays()
      let xAxisData = [],seriesData=[]
      
      if(res.dateArr){
        res.dateArr.map(item=>{
          const Arr = item.split('-')
          xAxisData.push(`${Arr[1]}/${Arr[2]}`)
        })
        res.list.map(item=>{
          seriesData.push(parseInt(item))
        })
      }
      if(seriesData.length < 1 || xAxisData.length < 1) return;
      const option = getOption(seriesData,xAxisData);
      mychart.value.setOption(option,true);
    };

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

    const getOption = (seriesData,xAxisData) => {
      //const seriesData = [60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220];
      const maxValue = Math.max.apply(null, seriesData);
      //const xAxisData = ['09/01','09/02','09/03','09/04', '09/05','09/06','09/07','09/08','09/09','09/10','09/11','09/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
        },
      ];
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',  // 'shadow',
          },
          formatter: (params) => {
            const names = params[0].name.split('/')
            const nameLable = `${parseInt(names[0])}月${parseInt(names[1])}`
            return nameLable + ': ' + params[0].value+'次';
          },
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },
        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 },
        },
        series: [
          {
            name: '调用次数',
            type: 'bar',
            barWidth: '12',
            data: seriesData,//[60, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220],
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                // 柱形图圆角，初始化效果
                borderRadius: [15, 15, 0, 0],
                color: (params) => {
                  let color = colorList[0];
                  if (params.data === maxValue) color = colorList[1];
                  return color;
                },
              },
            },
            barGap: '0%',
          },
        ],
        animationDuration: 0,//这里两个动画设置可以让图表更顺滑
        animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑
      };
    };

    onMounted(() => {
      setEcharts();
      queryData();
      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>