记录一下在使用datav和echarts中遇到的适配问题

标签：myChartTodayIn show 适配 监听 datav true echarts

在使用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进行尺寸大小的初始化

另外，如果这个方法不行的话，也可以通过动态的样式来计算框体的尺寸，不过这种方式也同样需要监听窗口的大小

标签：myChartTodayIn,show,适配,监听,datav,true,echarts
From： https://www.cnblogs.com/luzanzan/p/17666422.html