echarts圖表自適應盒子的大小（盒子的大小是動態改變的），大到需要全屏展示

項目中用到了echarts，並且頁面是自適應的，且頁面中有一個【放大、縮小】功能，因此圖表還需要根據盒子的大小來變化。

即：兩個需求，如下：

　　① 圖表根據窗口的大小自適應

　　② 圖表根據所在盒子的大小自適應

1、窗口大小自適應好說，可以通過

let myChart = This.$echarts.init(document.getElementById(This.id)); 
window.addEventListener('resize',() => { myChart.resize(); });

或

window.onresize = myChart.resize;

注意：如果是一個頁面中插入多個echarts圖，那么需要用第一種方式來監聽resize事件，即：window.addEventListener，若選用第二種方法只能監聽一個echarts圖的自適應。區別在於addEventListener與on上，有興趣可以自行查閱。

　　

2、按理來說上面的代碼對盒子大小的改變，圖表自適應也是好使的，但就是出現了問題，而且各種給盒子添加監聽也沒有好使，所以就想了一個極端點兒的方法，如下，通過延時的方式進行加載

let timer;
clearTimeout(timer);
timer = setTimeout(() => {
    let myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.resize();
}, 10);  

　　這里時間定義的是10毫秒，從用戶的角度來看是根本感覺不出來的，而且沒有出現圖表卡頓的地方，暫時搞定，有好的解決辦法了再來重寫

以下是全部代碼：

<template>
    <div class="comprehensiveAnalysis">
        <!-- 調度機構 -->
        <div class="dispatchOrgan">
            <span class="title">調度機構</span>
            <ul class="navList">
                <li v-for="(item, index) in dispatchOrgan"  :key="index" :class="{'active' : currentIndex == index}" :data-id="item.id" @click="chooseOragn(index)">{{item.title}}</li>
            </ul>
        </div>

        <!-- 綜合分析 -->
        <ul class="synthesizeAnalysis">
            <!-- 全網裝機規模統計 -->
            <li>
                <div class="cnt" id="ancestors" ref="ancestors" :class="{'full' : isFullScreen}">
                    <!-- <h3 class="title">全網裝機規模統計</h3> -->
                    <div class="titleOperate">
                        <span class="title">全網裝機規模統計</span>
                        <ul class="operateWrapper">
                            <li title="切換表格數據"><span class="tableBtn" @click="changeTableData"></span></li>
                            <li title="切換折線圖"><span class="lineBtn" @click="changeCharts('line')"></span></li>
                            <li title="切換柱狀圖"><span class="barBtn" @click="changeCharts('bar')"></span></li>
                            <li title="切換餅圖"><span class="pieBtn" @click="changeCharts('pie')"></span></li>
                            <li title="放大" v-show="isFullBtn"><span class="fullBtn" @click="fullScreen"></span></li>
                            <li title="縮小" v-show="isNarrow"><span class="narrowBtn" @click="narrowScreen"></span></li>
                            <li title="統計提示"><span class="helpBtn"></span></li>
                        </ul>
                    </div>
                    <div class="countShow">裝機容量（MW）: <span>{{installCapacity}}</span></div>
                    <div class="chartWrapper">
                        <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
                    </div>
                </div>
            </li>
            <!-- 全網電站規模統計 -->
            <li>
                <div class="cnt">
                    <h3 class="title">全網電站規模統計</h3>
                    <div class="chartWrapper"></div>
                </div>
            </li>
            <!-- 排名前十流域裝機容量統計 -->
            <li>
                <div class="cnt">
                    <h3 class="title">排名前十流域裝機容量統計</h3>
                    <div class="chartWrapper"></div>
                </div>
            </li>
            <!-- 文檔規模統計 -->
            <li>
                <div class="cnt">
                    <h3 class="title">文檔規模統計</h3>
                    <div class="chartWrapper"></div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isFullBtn: true,            // flag：是否顯示放大圖標
                isNarrow: false,            // flag：是否顯示縮小圖標
                isFullScreen: false,        // flag：小模塊是否全屏展示
                currentIndex: 0,            // 導航添加類名的元素
                installCapacity: 0,         // 裝機容量
                stationCount: 0,            // 電站數量(座)
                installEquipmentName: [],   // 全網裝機規模 -- 容量數組
                nameCapacity: [],           // 全網裝機規模 --  容量、名稱數組
                capacityColor: ['#fef200','#1682ac','#fba644','#67c4e8','#d056ff','#70a442','#bba4ff'], // 可視化圖形echarts顏色
                // 調度機構tab
                dispatchOrgan: [{
                    id: '002199010000000001',
                    title: ' 全網'
                },{
                    id: '002199010000000001',
                    title: '國調直調'
                },{
                    id: '002199010100000001',
                    title: '華北'
                },{
                    id: '002199010200000001',
                    title: '華東'
                },{
                    id: '002199010300000001',
                    title: '華中'
                },{
                    id: '002199010400000001',
                    title: '東北'
                },{
                    id: '002199010500000001',
                    title: '西北'
                },{
                    id: '002199010600000001',
                    title: '西南'
                }],
                // 全網裝機規模
                installEquipmentScale: [{
                        "NAME": "火電廠",
                        "CODE": 1001,
                        "CAPACITY": 855291.140000,
                        "COU": 1132
                    }, {
                        "NAME": "水電廠",
                        "CODE": 1002,
                        "CAPACITY": 214782.470000,
                        "COU": 603
                    }, {
                        "NAME": "風電場",
                        "CODE": 1004,
                        "CAPACITY": 145876.400000,
                        "COU": 786
                    }, {
                        "NAME": "光伏發電站",
                        "CODE": 1005,
                        "CAPACITY": 115118.670000,
                        "COU": 437
                    }, {
                        "NAME": "核電站",
                        "CODE": 1003,
                        "CAPACITY": 27687.600000,
                        "COU": 10
                    }, {
                        "NAME": "抽水蓄能電站",
                        "CODE": 1006,
                        "CAPACITY": 19379.200000,
                        "COU": 22
                    }, {
                        "CAPACITY": 39019.91,
                        "COU": 2885,
                        "CODE": "1009",
                        "NAME": "其他"
                    }],
            }
        },
        created() {
            // 計算：裝機容量
            this.installEquipmentScale.forEach(item => {
                this.installCapacity += item.CAPACITY;
                this.installEquipmentName.push(item.NAME);
                this.nameCapacity.push({
                    name: item.NAME,
                    value: item.CAPACITY
                })
            });

            // 裝機容量取整
            this.installCapacity = parseInt(this.installCapacity);
            
            // 計算：電站數量(座)
            this.powerStationScale.forEach(item => {
                this.stationCount += item.cou;
            });

            // echarts1：全網裝機規模
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            // 點擊'調度機構'
            chooseOragn(index) {
                this.currentIndex = index;
            },
            // 切換表格數據
            changeTableData() {
                console.log('切換表格數據')
            },
            // 切換折線圖、切換柱狀圖
            changeCharts(type) {
                console.log('切換折線圖：',type)
            }, 
            // 放大
            fullScreen() {
                this.isFullBtn = false;    // flag：是否顯示放大圖標
                this.isNarrow = true;      // flag：是否顯示縮小圖標
                this.isFullScreen = true;  // flag：小模塊是否全屏展示
                
                this.changeChartsSize();    // 點擊'放大'、'縮小'時改變圖表的大小
            },
            // 縮小
            narrowScreen() {
                this.isFullBtn = true;      // flag：是否顯示放大圖標
                this.isNarrow = false;      // flag：是否顯示縮小圖標
                this.isFullScreen = false;  // flag：小模塊是否全屏展示
                
                this.changeChartsSize();    // 點擊'放大'、'縮小'時改變圖表的大小
                
            },
            // 點擊'放大'、'縮小'時改變圖表的大小
            changeChartsSize() {
                let timer;
                clearTimeout(timer);
                timer = setTimeout(() => {
                    let myChart = this.$echarts.init(document.getElementById('myChart'));
                    myChart.resize();
                }, 10);
            },
            // 繪圖
            drawLine() {
                // 基於准備好的dom，初始化echarts實例
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                // 繪制圖表 -- pie 餅狀圖
                myChart.setOption({
                        color: this.capacityColor,
                        tooltip : {             // 提示框組件
                            trigger: 'item',    // item：數據項圖形觸發，散點圖、餅圖等無類目軸，axis：坐標軸觸發，柱狀圖、折線圖，none：不觸發
                            // formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {               // 圖例組件：展現了不同系列的標記、顏色和名字。可以通過點擊圖例控制哪些系列不顯示
                            type: 'plain',      // scroll：可滾動翻頁的圖例，圖例較多時使用，plain：普通圖例
                            orient: 'vertical', // 圖例列表的布局朝向，vertical：垂直，horizontal：水平
                            right: 10,          // 圖例組件離容器【右側】的距離
                            top: 100,           // 圖例組件離容器【上側】的距離
                            data: this.installEquipmentName,
                            textStyle: {        // 圖例的公用文本樣式
                                color: '#fff'
                            }
                        },
                        series : [                      // 系列列表，每個系列通過type決定自己的圖表類型
                            {       
                                type: 'pie',            // line：折線/面積圖，bar：柱狀/條形圖，pie：餅圖，scatter：散點(氣泡)圖，radar：雷達圖，
                                radius : '60%',         // 餅圖的半徑，'60%'：外半徑為可視區域尺寸的60%
                                center: ['50%', '50%'], // 餅圖的中心坐標，橫/縱坐標
                                data: this.nameCapacity,
                                itemStyle: {            // 圖形樣式
                                    emphasis: {         // 高亮的扇區和標簽樣式
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                
                window.onresize = myChart.resize; 
            }
        }
    }
</script>

<style lang="scss" type="text/css">
    @import '../../common/scss/vars.scss';
    .comprehensiveAnalysis {
        width: 100%;
        height: 100%;
        .dispatchOrgan {
            padding-left: 1px;
            height: 24px;
            line-height: 24px;
            box-sizing: border-box;
            font-size: 0;
            .title {
                margin-right: 12px;
                display: inline-block;
                width: 75px;
                height: 24px;
                background: url('./xdbg.png') no-repeat;
                text-align: center;
                font-size: 14px;
                color: $dispatchFontColor;
            }
            .navList {
                display: inline-block;
                >li {
                    margin-right: 5px;
                    display: inline-block;
                    width: 66px;
                    height: 24px;
                    font-size: 14px;
                    color: $whiteFontColor;
                    text-align: center;
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    cursor: pointer;
                    &.active {
                        color: $activeFontColor;
                        background-color: $dispatchBgColor;
                        border: 1px solid $dispatchBorderColor;
                    }
                }
            }
        }
        .synthesizeAnalysis {
            height: calc(100% - 24px);
            >li {
                float: left;
                position: relative;
                padding: 12px 6px 0;
                width: 50%;
                height: 50%;
                box-sizing: border-box;
                &::before, &::after {
                    content: '';
                    position: absolute;
                    top: 6px;
                    width: 32px;
                    height: 17px;
                }
                &::before {
                    left: 0px;
                    background: url('./lefconer.png') no-repeat;
                }
                &::after {
                    right: 0px;
                    background: url('./rigconer.png') no-repeat;
                }
                >.cnt {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background-color: $statisticsBgColor;
                    border: 1px solid $statisticsBorderColor;
                    border-top-color: $statisticsBdTopColor;
                    box-sizing: border-box;
                    &.full {
                        position: fixed;
                        top: 0;
                        left: 0;
                        z-index: 999;
                    }
                    >.titleOperate {
                        padding: 10px;
                        height: 50px;
                        line-height: 30px;
                        color: $whiteFontColor;
                        box-sizing: border-box;
                        >.title {
                            float: left;
                            font-size: 14px;
                            background: url('./light.png') no-repeat center bottom;
                            background-size: contain;
                        }
                        >.operateWrapper {
                            float: right;
                            display: flex;
                            padding-top: 3px;
                            >li {
                                flex: 1;
                                margin: 0 3px;
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
                                background: url('../../images/into.png') no-repeat center center;
                                &:hover,&.hover {
                                    background: url('../../images/hover.png') no-repeat center center;
                                }
                                >span {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    &.tableBtn {
                                        background: url('../../images/table.png') no-repeat center center;
                                    }
                                    &.lineBtn {
                                        background: url('../../images/chart_line.png') no-repeat center center;
                                    }
                                    &.barBtn {
                                        background: url('../../images/chart_bar.png') no-repeat center center;
                                    }
                                    &.pieBtn {
                                        background: url('../../images/chart_pie.png') no-repeat center center;
                                    }
                                    &.fullBtn {
                                        background: url('../../images/fullscreen.png') no-repeat center center;
                                    }
                                    &.narrowBtn {
                                        background: url('../../images/narrow.png') no-repeat center center;
                                    }
                                    &.helpBtn {
                                        background: url('../../images/help.png') no-repeat center center;
                                    }
                                }
                            }
                        }
                    }
                    >.countShow {
                        line-height: 25px;
                        text-align: center;
                        color: $numTipFontColor;
                        font-size: 12px;
                        >span {
                            color: $whiteFontColor;
                        }
                    }
                    >.chartWrapper {
                        position: absolute;
                        top: 50px;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
</style>

 補充：如何實現點擊放大按鈕時全屏展示？

修改所在盒子的樣式，如下：

.full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;        
}

縮小時，移除這個類型即可。