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>
标签：const,setup,chart1,echarts5,vue3,import,type,echarts From： https://www.cnblogs.com/jqynr/p/17140756.html