echart 图表组件的封装
思路:
1、主要的传递参数为 options
2、去监听options的变化,然后更新图表
3、设置宽高
父组件
<template>
<div class="chart-box">
<GChart :options="chartData" />
</div>
</template>
<script>
...
export default {
data() {
},
created() {
const options ={ } //动态设置
this.chartData = options;
//this.chart1.setoption(options);
}
};
</script>
<style>
.chart-box{
height:500px;
width:500px;
}
</style>
公用子组件
<template>
<div :style="{ height: '100%' }" ref="chartBox"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
watch: {
options: {
deep: true,
handler() {
this.renderchart();
},
// immediate:true
},
},
name: "Gchart",
props: {
options: {
type: object,
required: true,
},
},
methods: {
renderchart() {
this.chart = echarts.init(this.$refs.chartBox);
//若是地图需要 registerMap
this.chart.setoption(this.options || {});
this.resizeFn = () => {
this.chart.resize();
};
// 绑定resize事件
window.addEventListener("resize", this.resizeFn);
},
},
mounted() {
this.$nextTick(() => {
this.renderchart(); //相对晚时机渲染echarts保证有元素;
});
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeFn);
this.dispose();
},
};
</script>
476

被折叠的 条评论
为什么被折叠?



