<template>
  <div id="lines" ref="lines" style="width: 100%; height: 100%"></div>
</template>

<script setup>
// 引入
import * as echarts from "echarts";
import {
  ref,
  defineProps,
  reactive,
  onMounted,
} from "vue";
import { chartAdaptation } from "@/utils/tools";

// 数据
const props = defineProps({
  linesNum: {
    type: Array,
    default: []
  },
  linesTitle: {
    type: Array,
    default: []
  },
  linesShow: {
    type: Boolean,
    default: false
  }
})

onMounted(() => {
  getLines(props.linesNum, props.linesTitle)
})

// 方法
const getLines = (num, title) => {
  const chartDom = document.getElementById('lines');
  var myChart = echarts.init(chartDom);
  var option;

  const colors = ['#5470C6', 'lightgreen'];
  let series = []
  num.map(item => {
    let obj = {
      name: item.name,
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: item.data
    };
    series.push(obj);
  })
  option = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      // 鼠标悬浮提示的内容
      formatter: function (params) {
        // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
        let firParams = params[0];
        let secParams = params[1];
        return firParams.name + '<br>'
          + `
          <div style="display:flex;align-items: center;width:120px;">
          <p style="width:10px;height:10px;margin-right:10px;border-radius:10px;background-color:${firParams.color}">
          </p>
        访问次数: ${firParams.data}</div>
          <div style="display:flex;align-items: center;width:120px;">
          <p style="width:10px;height:10px;margin-right:10px;border-radius:10px;background-color:${secParams.color}">
          </p>
        访问人数: ${secParams.data}</div>
        `
      }

    },
    legend: {
      // data: [num[0].name, num[1].name]
      textStyle: {
        color: '#000'
      },
    },
    grid: {
      top: 50,
      bottom: 50,
      width: "90%", // 宽度
      height: "79%", // 高度
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: colors[0]
          }
        },
        axisPointer: {
          label: {
            formatter: function (params) {
              return (
                params.value

              );
            },
          }
        },
        // prettier-ignore
        data: title
      },

    ],
    yAxis: [
      {
        type: 'value',
        name: '访问量',
        min: 0,
        // interval: 200,
        axisLabel: {
          formatter: '{value} '
        },
        axisLine: {
          lineStyle: {
            color: "#07c8bd",
          }
        },
      }
    ],
    series: series
  };

  option && myChart.setOption(option);
  //自适应
  chartAdaptation(myChart);
}

</script>

<style lang="scss" scoped>
// div {
//   border-radius: 20;
//   background-color: aquamarine;

// }</style>
