echarts自适应大小

图表

<template>
    <div class="com-container">
        <!-- 返回首页 -->
        <div class="retureIndex" @click="retureIndex"><i class="el-icon-full-screen"></i></div>
        <!-- 图表 --> 
        <div v-chartsWeith="chartsWeith" class="com-chart" ref="seller_ref"></div>
    </div>
</template>
<script>
export default {
   data() {
      return {
        chartInstance: null,
      }
   },
   created(){
   },
   mounted() {
       window.addEventListener("resize", this.screenAdpter);
       this.drawChartTwo();
   },
   destroyed(){
       window.removeEventListener("resize", this.screenAdpter);
   },
   methods:{
       // 图标
        drawChartTwo(){
            // 基于准备好的dom，初始化echarts实例
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
            // 指定图表的配置项和数据
            let option = {
                backgroundColor: '#2c343c',
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.chartInstance.setOption(option);
        },
        // 尺寸大小的函数
        screenAdpter() {
            // console.log(this.$refs.seller_ref.offsetWidth);  // 监听屏幕宽度
            this.$nextTick(()=>{
                this.chartInstance.resize();
            })
        },
        // 图表的方法缩小框
        retureIndex(){
            this.$emit("clickBottomRight")
            this.screenAdpter()
        },
        // 自定义指令执行（当收起展开导航栏时，宽度自动变化）
        chartsWeith() {  // 当宽高变化时就会执行
            this.screenAdpter()//执行某些操作
        }
   },
}
</script>
<style lang="scss" scoped>
.home{
    position: relative;
    width: 100%;
    height: 100%;
}
.retureIndex{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    z-index: 10;
}
</style>

自定义指令

import Vue from "vue"
// 全局自定义指令

Vue.directive("chartsWeith",{
    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__);
    }
})

mian.js

import "@/directives"//引入自定义指令(针对左侧导航栏收起展开)