//echarts清空历史数据;
echart.setOption(option, true);
// echarts图表自适应
e_resize(echart){
window.addEventListener("resize", function () {
echart.resize();
});
// 侧边栏收缩时echarts图表自适应
方法一:
html ==> <div ref="echartLine" class="echart-line" v-resize="resize" />
export default {
directives: {
// 使用局部注册指令的方式
resize: {
// 指令的名称
bind(el, binding) {
// 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__);
},
},
},
}
方法二:通过vuex给侧边栏添加状态监控变量,对其进行监听,发生改变时触发resize方法;
import { mapGetters } from "vuex";
computed: {
...mapGetters(["sidebar"]),
},
watch:{
sidebar: {
handler() {
setTimeout(() => {
this.myChart.resize();
}, 200);
},
deep: true,
},