记录一下在使用datav和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进行尺寸大小的初始化

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