<template>
<div class="base-chart">
<iframe ref="iframe" class="iframe" />
<div ref="chart" class="chart" />
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "BaseChart",
props: {
option: {
required: true,
type: Object
}
},
mounted() {
this.chart = echarts.init(this.$refs.chart, {
renderer: "svg"
});
this.$refs.iframe.contentWindow.addEventListener("resize", this.chart.reize);
this.$watch("option", () => {
this.chart.setOption(this.option, true);
}, {
immediate: true,
deep: true
});
},
beforeUnmount() {
this.$refs.iframe.contentWindow.removeEventListener("resize", this.chart.reize);
}
};
</script>
<style lang="scss" scoped>
.base-chart {
position: relative;
.chart, .iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.iframe {
visibility: hidden;
}
}
</style>
echarts封装为公共组件
最新推荐文章于 2024-06-27 15:00:28 发布