实现效果
注意观察各个图表的大小变化
图11.png
图1.png
显隐控制div
图表全部取消勾选后 其他各个图表相互适应布局
重点
1. 图表数据和tree数据 同步 （echarts图表 数据 使用 dataset 利用scource 可以和tree数据同步）
2. 各个图表自适应 其实也就是外层容器 自适应 （利用 css样式 + vue2 中 watch监听 tree数据某个图表被勾
选的数组长度）
样式代码
template
<div class='a' v-show="setAllTreeKeys.rede.length>0||setAllTreeKeys.bluee.length>0">
<div class='box' v-show='setAllTreeKeys.rede.length>0'>
</div>
<div class='box' v-show='setAllTreeKeys.bluee.length>0'>
</div>
</div>
<div class='b' v-show='setAllTreeKeys.redr.length>0'>
</div>
<div class='c' v-show="setAllTreeKeys.redd.length>0||setAllTreeKeys.blued.length>0">
<div class='box' v-show="setAllTreeKeys.redd.length>0">
</div>
<div class='box' v-show="setAllTreeKeys.blued.length>0">
</div>
</div>
css样式
重点：
1. 是 class a,b,c 以及 box都是 flex:1 这样才能自适应
2. 注意 在tree勾选时候 数据setAllTreeKeys里面数据有变化(此数据是 每个tree选中node的keys集合)
监听setAllTreeKeys数据变化 从而重新绘制echarts图表
bug
问题：echarts在 resize()时候 有时候图表不显示 排查原因 大概是因为 容器的宽高没有立即显示
解决方法： 给容器 加上 如下 css样式 ::v-deep 这一段
.a,
.b,
.c {
flex: 1;
display: flex;
::v-deep.box {
flex: 1;
div {
&:nth-child(1) {
width: 100% !important;
height: 100% !important;
canvas {
width: 100% !important;
height: 100% !important;
}
}
}
}
}
监听数据改变
重点 resize()方法 这样图表可以根据外容器大小自适应
watch: {
//监听所有属性
setAllTreeKeys: {
// immediate: true,//初始化的时候让handler调用一下
deep: true,//开启深度监听
handler(newValue,oldValue) {
setTimeout(() => {
myCharta.resize();
myChartb.resize();
myChartc.resize();
},10);
}
}
},
