在使用datav和echarts时，遇到窗口大小变化后不能随着窗口尺寸变化，或是直接echarts消失。
解决方法：
在html中（顺带一提，我使用的是vue+elementui）
<template>
<dv-border-box-13 ref="inInfo">
<div class="product-in-title">
<i class="el-icon-s-order"></i>
今日入库详情
</div>
<div id="todayInInfo" class="todayInInfo">
</div>
</dv-border-box-13>
</template>
在script中写上
<script>
export default{
data(){
return {
myChartTodayIn:'',//实例
}
},
......
mounted(){
this.myChartTodayIn = echarts.init(document.getElementById('todayInInfo'))
this.showEchartTodayIn()
window.addEventListener('resize',this.handleResize) //主要是需要监听窗口的大小
}
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);//在销毁组件前把监听事件也移除
},
methods:{
handleResize() {//监听并重置echart和datav位置
setTimeout(() =>{
//echart位置重调
this.myChartTodayIn.resize()
//datav位置重调
this.$refs.inInfo.initWH()
},200)
//通过计算动态调整框体的宽度
//this.windowWidth = this.$refs.appRef.clientWidth//对滚动表进行位置重调
},
showEchartTodayIn(){
// 绘制图表
this.myChartTodayIn.setOption({
grid:{
left:'17%'
},
xAxis: {
splitLine:{
show:true
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{//修改坐标系字体颜色
show:true,
color:"#8DB6DB"
},
},
yAxis: {
type: 'value',
splitLine:{
show:true
},
axisLabel:{//修改坐标系字体颜色
show:true,
color:"#8DB6DB"
},
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
})
},
}
</script>
总结：就是监听窗口的大小变化，如果变化了就重新给datav和echarts进行尺寸大小的初始化
另外，如果这个方法不行的话，也可以通过动态的样式来计算框体的尺寸，不过这种方式也同样需要监听窗口的大小