vue3 setup echarts5 绘制图表

vue3

<div ref="chartRef1" style="width: 100%; height: 100%" />

<script setup lang="ts">
import type { ECharts, EChartsOption } from "echarts";
import { init } from "echarts";
import "echarts-gl";
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
// 第一个表
let chart1: ECharts;
const chartRef1: Ref<HTMLElement | null> = ref(null);
let option1: EChartsOption = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
};
const initChart = () => {
  chart1 = init(chartRef1.value as HTMLElement);
  chart1.setOption(option1);
};
// 监听窗口尺寸更改重绘图表
const resizeCharts = () => {
  chart1.resize()
}

onMounted(() => {
  initChart();
  window.onresize = () => {
    resizeCharts();
  }
});
</script>