自适应父盒子echart vue组件封装_eachrts 父盒子 resize-优快云博客

本文链接：https://blog.youkuaiyun.com/gt958627869/article/details/121016300

本文介绍了一个Vue.js组件，用于封装ECharts图表，实现了动态加载图表配置、监听图表事件（如点击、鼠标悬浮）、图表大小自适应等功能。通过props传递ECharts选项对象和参数，组件内部处理了图表初始化、更新和销毁，同时提供了获取图表图片数据URL的方法，方便图表导出。在父组件中，可以便捷地调用此组件并传入图表配置，实现交互式的ECharts图表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人比较懒，很少写文章，抽空把日常开发的片段发出来让大家交流。废话不多说，上代码。

export default {
props: {
option:{
type:Object,
detault:{}
},
params:{
type:Object,
detault:{
isShowLoading:true,
clickEvent:false,
mouseoverEvent:false,
clear:false
}
}
},
data(){
return {
id:'#' + Math.random(),
myChart:null,
ledgend:null,
}
},
watch:{

option:{
handler(val){
if(this.myChart && this.option){

this.createChartDatas();
}else{
this.$nextTick(() => {
this.initChart();
})
}
},
deep:true,
immediate: true,
},

},
       methods: {

// 获取导出图片
getChartDataUrl(){
let src = this.myChart.getDataURL({
// 导出的格式，可选 png, jpeg
type: 'png',
// 导出的图片分辨率比例，默认为 1。 11000
pixelRatio: 2
});
this.$emit("getChartDataUrl", src);
},
// 初始化
initChart(){
this.myChart = echarts.init(document.getElementById(this.id));
this.createChartDatas();
this.initEvent();
this.$emit("chartClick",this.myChart)
this.myChart.on('legendselectchanged', (params=>{
console.log(params);
this.ledgend = params.selected
}));

},
initEvent(){
let that = this;
if(this.params.clickEvent){
this.myChart.on('click', function (params) {
console.log(params);
that.$emit("chartClick",params)
});
}
if(this.params.mouseoverEvent){
this.myChart.on('mouseover', function (params) {
console.log(params);
that.$emit("chartMouseover",params)
});
}
},
// 绘制图表
createChartDatas(){
// 清空画布
if(this.params.clear){
this.myChart.clear();
}

if(this.option){
if(this.ledgend){
this.option.legend.selected = this.ledgend
}
this.myChart.setOption(this.option,true);
this.hideLoading();
}
},
updateOption(option){
if(this.myChart){
this.myChart.setOption(this.option,true);
this.hideLoading();
}
},
onWindowResize(){
this.myChart.resize();
},
showLoading(option){
if(this.myChart){
this.myChart.showLoading(option);
}
},
hideLoading(){
if(this.myChart){
this.myChart.hideLoading();
}
}
},
mounted () {
this.$nextTick(() => {
this.initChart();
})
var erd = elementResizeDetectorMaker()
let that = this;
erd.listenTo(document.getElementById(this.id), function (element) {
that.$nextTick(function () {
that.onWindowResize();
})
})
},
beforeDestroy() {
if(this.myChart){
this.myChart.dispose();
}
}
}
</script>

父组件调用

<common-echart v-if="ChartShow" style="width:100%;height: 100%;" :option="ChartOption" :params="{isShowLoading:true,clickEvent:true,mouseoverEvent:false}"></common-echart>

此处的ChartOption就是echart的option对象，丢进去就行