圖表

<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"//引入自定義指令(針對左側導航欄收起展開)