<template>
<div class="EchartsBox">
<div :id="'echarts' + id" :style="{ width: '100%', height: '100%' }"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "EchartsBox",
props: {
id: {
type: Number,
default: 0,
},
option: {
type: Object,
default: () => {},
},
},
data() {
return {
myChart: null,
};
},
watch: {
option: {
handler() {
this.myChart.setOption(this.option);
},
deep: true,
},
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
this.myChart = echarts.init(
document.getElementById(`echarts${this.id}`),
"dark"
);
this.myChart.setOption(this.option);
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
},
};
</script>
<style scoped lang="scss">
.EchartsBox {
width: 100%;
height: 100%;
}
</style>
【Vue】vue2 封装 echarts 基础组件,直接传 option 即可
于 2023-10-12 11:51:18 首次发布