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

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

let xLabel = ["09/01", "09/02", "09/03", "09/04", "09/05"];

let yLabel = [20, 80, 100, 40, 34, 90, 60];

const options = {
  // animation: false,
  grid: {
    top: "18%",
    bottom: "20%", //也可设置left和right设置距离来控制图表的大小
  },
  xAxis: {
    data: xLabel,
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: "#11417a",
      },
    },
    axisTick: {
      show: false, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      // margin: 14,
      fontSize: 12,
      textStyle: {
        color: "#fff", //X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: "value",
      gridIndex: 0,
      min: 0,
      max: 100,
      interval: 25,
      // splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, .2)",
          type: "dashed",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#63273242",
        },
      },
      axisLabel: {
        show: true,
        // margin: 14,
        fontSize: 12,
        textStyle: {
          color: "#fff", //X轴文字颜色
        },
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      barWidth: 20,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: "rgba(79, 203, 255, 1)",
            },
            {
              offset: 0,
              color: "rgba(140, 225, 251,1)",
            },
          ]),
        },
      },
      data: yLabel,
      z: 10,
      zlevel: 0,
      label: {
        show: true,
        position: "top",
        // distance: 10,
        fontSize: 12,
        color: "#fff",
        // backgroundColor: "#0f375f",
      },
    },
    {
      // 分隔
      type: "pictorialBar",
      itemStyle: {
        normal: {
          color: "#0F375F",
        },
      },
      symbolRepeat: "fixed",
      symbolMargin: 6,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [20, 2],
      symbolPosition: "start",
      symbolOffset: [0, -1],
      // symbolBoundingData: this.total,
      data: yLabel,
      width: 25,
      z: 0,
      zlevel: 1,
    },
  ],
};
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>
