Echarts的容器自适应resize

主要是通过Echarts的resize函数来更新图表大小

<template>
    <div>
        <div style="width: 100%; height: 400px" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
    name: "LineChart",
    props: {},
    components: {},
    data() {
        return {
            option: {
                title: {
                    text: "每月入驻企业数据",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["企业"],
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月",
                    ],
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "企业",
                        type: "line",
                        stack: "Total",
                        data: [
                            120, 132, 101, 134, 90, 230, 160, 170, 142, 181,
                            134, 123,
                        ],
                    },
                ],
            },
            myChart: null,
        };
    },
    methods: {
        // 初始化
        async init() {
            let chartDom = document.getElementById("main");
            this.myChart = echarts.init(chartDom);
            this.myChart.setOption(this.option);
        },
        // 页面大小变化，更新图表大小
        // https://echarts.apache.org/handbook/zh/concepts/chart-size/
        chartResize() {
            this.myChart.resize();
        },
    },
    mounted() {
        this.init();
        // 监听页面大小变化
        window.addEventListener("resize", this.chartResize);
    },
    watch: {},
    computed: {},
    filters: {},
};
</script>

<style lang="scss" scoped></style>

如果你是一个可视化页面，可能内部有多个图表组件，可以通过驱动组件内事件，来实现批量图表更新

    created() {
        window.addEventListener("resize", this.chartResize);
    },
    methods: {
        chartResize() {
            this.$refs.LineChart.chartResize();
            this.$refs.PieChart.chartResize();
            this.$refs.ProductPurchaseChart.chartResize();
            this.$refs.ConsumeChart.chartResize();
            this.$refs.HistogramChart.chartResize();
            this.$refs.ProvinceChart.chartResize();
        },
    },

---

参考：
响应容器大小的变化