<template>
  <div id="line" v-if="loadingshow" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import * as echarts from "echarts";

import {
  ref,
  defineProps,
  reactive,
  onMounted,
  watch,
  defineExpose,
  nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
  loadingshow: {
    type: Boolean,
    default: false
  },
  monthList: {
    type: Array,
    default: []
  },
  barNum: {
    type: Array,
    default: []
  }
});

const getLine = () => {
  const chartDom = document.getElementById("line");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['本年度使用情况'],
      textStyle: {
        color: '#319177'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: props.monthList,
        axisPointer: {
          type: 'shadow'
        },
        axisLine: {
          lineStyle: {
            color: "#319177"
          }
        }

      },

    ],
    yAxis: [
      {
        type: 'value',
        name: '次数',
        min: 0,
        max: 200000,
        interval: 40000,
        axisLabel: {
          formatter: '{value} '
        },
        axisLine: {
          lineStyle: {
            color: "#07c8bd"
          }
        },

      },
      {
        min: 0,
        max: 200000,

      }
    ],
    series: [
      {
        name: '访问次数',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },

        data: props.barNum,
        itemStyle: {
          normal: {
            color: '#07c8bd'
          }
        },
      }
    ]
  };
  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
}
onMounted(() => {
  nextTick(() => {
    if (props.loadingshow) {
      getLine();
    }
  });
});

</script>

<style lang="scss" scoped></style>
