<template>
  <div ref="chart" style="width: 100%; height: 280px"></div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const chart = ref(); // 创建DOM引用

let option = {
  legend: {
    // 图例配置选项
    orient: "horizontal", //图例布局方式：水平 'horizontal' 、垂直 'vertical'
    x: "right", // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
    y: "top", // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
    data: ["返乡次数", "参与活动", "走访次数", "参事次数"],
    textStyle: {
      color: "#fff",
    },
  },
  grid: {
    // 图表距离边框的距离，可用百分比和数字（px）配置
    top: "20%",
    left: "0",
    right: "0",
    bottom: "0",
    containLabel: true,
  
  },

  xAxis: {
    name: "月份",
    type: "category",
    data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
    axisLine: {
      lineStyle: {
        color: "#27C2BC",
      },
    },
    axisLabel: {
      textStyle: {
        color: "#ffffff",
        fontSize: 12,
      },
    },
  },

  yAxis: {
    name: "",
    type: "value",
    min: 0, // 配置 Y 轴刻度最小值
    splitNumber: 7, // 配置 Y 轴数值间隔
    splitLine: {
      lineStyle: {
        color: "#2c6883",
      },
    },
  },

  series: [
    {
      name: "参与活动",
      data: [20, 15, 30, 18, 16, 18, 40],
      type: "line",
      symbol: "circle", // 实心圆点
      smooth: 0.5, // 设置折线弧度
    },
    {
      name: "返乡次数",
      data: [30, 25, 38, 22, 24, 21, 18],
      type: "line",
      symbolSize: 8, //设置折线上圆点大小
      itemStyle: {
        normal: {
          label: {
            show: true, // 在折线拐点上显示数据
          },
          lineStyle: {
            width: 3, // 设置虚线宽度
            type: "dotted", // 虚线'dotted' 实线'solid'
          },
        },
      },
    },
    {
      name: "走访次数",
      data: [16, 15, 17, 16, 20, 18, 16],
      type: "line",
      symbol: "circle", // 实心圆点
      smooth: 0.5, // 设置折线弧度
    },
    {
      name: "参事次数",
      data: [8, 6, 12, 6, 17, 16, 14],
      type: "line",
      symbolSize: 8, //设置折线上圆点大小
      itemStyle: {
        normal: {
          label: {
            show: true, // 在折线拐点上显示数据
          },
          lineStyle: {
            width: 3, // 设置虚线宽度
            type: "dotted", // 虚线'dotted' 实线'solid'
          },
        },
      },
    },
  ],
  color: ["#dfdd04", "#494c21", "#44d4de", "#1a5166"], // 三个折线的颜色
};

// 使用生命钩子
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  // var myChart = echarts.init(document.getElementById('main'));
  // Vue3中： 需要引入
  var myChart = echarts.init(chart.value);

  // init(); // vue3.2没有this
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 单图表响应式: 跟随浏览器大小改变
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped></style>
