参考:
https://blog.csdn.net/m0_58293192/article/details/128001932
引入依赖:npm install element-resize-detect
<div :id="id" :class="className" :style="{ height, width }"></div>
import elementResizeDetectorMaker from 'element-resize-detector';
const props = defineProps({
id: {
type: String,
default: "barChart",
},
className: {
type: String,
default: "",
},
width: {
type: String,
default: "200px",
required: true,
},
height: {
type: String,
default: "200px",
required: true,
},
});
const chart = ref<any>("");
const main = ref(null);
onMounted(() => {
// 图表初始化
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.value.setOption(options);
// 左侧菜单切换时大小自适应
const erd = elementResizeDetectorMaker();
erd.listenTo(main.value, function(element) {
chart.value.resize();
});
// 屏幕窗口大小自适应
window.addEventListener("resize", () => {
chart.value.resize();
});
});