vue3 echarts 折线图

<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: height, width: width }"
    ref="chartsRef"
  />
</template>
<script lang="ts" setup>
  import * as echarts from "echarts";
  import { EChartsType } from "echarts/core";
  import { onMounted, ref } from "vue";
  const chartsRef = ref<HTMLElement | null>();

  const props = defineProps({
    className: {
      type: String,
      default: "chart"
    },
    xAxisData: {
      type: Array,
      default: () => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    config: {
      type: Object,
      default: () => {}
    },
    seriesData: {
      type: Array,
      default: () => [150, 230, 224, 218, 135, 147, 260]
    },
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "200px"
    },
    height: {
      type: String,
      default: "200px"
    }
  });
  const options = {
    grid: {
      top: 10,
      left: "2%",
      right: "2%",
      bottom: "2%",
      containLabel: true //grid 区域是否包含坐标轴的刻度标签
    },
    tooltip:{ //提示框组件
      trigger:'axis' //触发类型
    },
    xAxis: {
      type: "category",
      axisLine:{}, //坐标轴轴线相关设置
      axisTick:{}, //坐标轴刻度相关设置
      boundaryGap:false, //坐标轴两边留白策略
      splitLine:{}, //坐标轴在 grid 区域中的分隔线
      data: props.xAxisData
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: props.seriesData,
        type: "line",
        smooth: true, //是否平滑曲线显示
        showSymbol:false, //是否显示 symbol
      }
    ],
    ...props.config
  };
  let chart: EChartsType;
  const initChart = () => {
    const chart = echarts.init(chartsRef.value);
    chart.setOption(options);
    return chart;
  };
  onMounted(() => {
    chart = initChart();
    window.addEventListener("resize", function () {
      chart && chart.resize();
    });
  });
</script>

<style></style>