Vue中使echarts图表自适应
1、先在main.js中自定义一个全局指令,如下
Vue.directive('resize', {
bind(el, binding) {
let width = '',
height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value();
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
})
2、在需要处理的图表Dom标签上添加指令
<div ref="myChart" class="my-chart" v-resize="resize"></div>
3、获取init后的echarts实例,添加resize方法(echart自带的)
resize() {
this.myChart = this.$echarts.init(this.$refs.myChart);
this.myChart.resize();
},
PS:亲测有效!