<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "lineChart",
  },
});

const colors = "RGBA(30, 214, 255,";

const options = {
  color: [colors + "1)"],
  tooltip: {
    trigger: "axis",
    backgroundColor: "#4B4F52",
    borderColor: "#4B4F52",
    padding: 8,
    textStyle: {
      color: "#fff",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: "#ffffff", //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        // fontFamily: "SourceHanSansCN",
      },
    },
    data: ["00:00", "01:00", "02:00", "03:00"],
  },
  yAxis: {
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .2)",
        type: "dashed",
      },
    },
    axisLabel: {
      textStyle: {
        color: "#ffffff", //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        // fontFamily: "SourceHanSansCN",
      },
    },
  },
  series: [
    {
      name: "",
      type: "line",
      showSymbol: false,

      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colors + "0.6)",
          },
          {
            offset: 1,
            color: colors + "0)",
          },
        ]),
      },

      data: [30, 50, 60, 71],
    },
  ],
};
const chart = ref<any>("");

onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
</script>

<template>
  <div :id="id" class="line-chart"></div>
</template>

<style scoped lang="scss">
.line-chart {
  width: 100%;
  height: 100%;
}
</style>
