echart在切换table签或者视窗放大和缩小的时候echart不能实时的变更尺寸,那么我们只需要在dom变化的时候调用echart.resize()就行了
onMounted(() => {
myEchar = echarts.init(document.getElementById(state.chartId));
setOptions();//设置参数
domChange();//
})
/**
* 监听元素变化
*/
const domChange =()=> {
let selfChart = document.getElementById(state.chartId);
state.observer = new ResizeObserver(() => {
myEchar.resize();//ecahrts重置尺寸
});
state.observer.observe(selfChart); // 监听元素
}
<template>
<div class="myChart" :id="chartId">
</div>
</template>
<script>
import {toRefs, reactive,ref, onMounted,onUnmounted, onBeforeUnmount, watch,nextTick} from 'vue'
import * as echarts from "echarts";
import _ from "lodash";
export default {
props: {
echartData: Object,//传入echart中option配置
chartName: {type:String,default:''},
isRoll: Boolean,
showLoading: {type:Boolean,default:true},//是否要显示loading
},
setup(props, context) {
let myEchar = null;
//窗口变化监听,避免resize多次执行卡顿
var resizeTimer = null;
const state = reactive({
heightChart:0,
data: props.echartData,
interval: null,
chartId: props.chartName + Math.ceil(Math.random() * 100000000).toString(),
observer:null,
})
onMounted(() => {
myEchar = echarts.init(document.getElementById(state.chartId));
setOptions();
domChange();
})
/**
* 监听元素变化
*/
const domChange =()=> {
let selfChart = document.getElementById(state.chartId);
state.observer = new ResizeObserver(() => {
myEchar.resize();//ecahrts重置尺寸
});
state.observer.observe(selfChart); // 监听元素
}
/**监听数据改变,重新渲染 */
watch(() => _.cloneDeep(props.echartData), (newProps) => {
state.data = newProps
if (myEchar) {
if (props.showLoading) {
myEchar.showLoading();
setTimeout(() => {
myEchar.setOption(state.data);
if (props.showLoading) {
myEchar.hideLoading()
}
}, 200)
}else{
myEchar.setOption(state.data);
}
}
}, {deep: true})
const setOptions = function () {
myEchar.showLoading()
setTimeout(() => {
if (state.data) {
myEchar.setOption(state.data);
myEchar.getZr().on('click', function (param) {
context.emit('backView', param)
});
myEchar.on('legendselectchanged', function (params) {
context.emit('legendselectchanged', params)
});
myEchar.on('datazoom', function (params) {
context.emit('datazoom', params)
});
if (props.isRoll) {
if (state.data.dataZoom != null && state.data.dataZoom.length > 0) {
if (state.data.dataZoom[0].endValue == state.data.yAxis[0].data.length) {
state.data.dataZoom[0].endValue = 4;
state.data.dataZoom[0].startValue = 0;
} else {
state.data.dataZoom[0].endValue = state.data.dataZoom[0].endValue + 1;
state.data.dataZoom[0].startValue = state.data.dataZoom[0].startValue + 1;
}
myEchar.setOption(state.data);
}
}
myEchar.hideLoading()
}
}, 300)
}
return {
...toRefs(state),
}
}
}
</script>
<style lang="less" scoped>
.myChart {
width: 100%;
height:100%
}
</style>