在Vue中使用flex布局 echarts多图标不能自适应缩放问题

最新推荐文章于 2024-07-20 21:12:45 发布

coo1__

最新推荐文章于 2024-07-20 21:12:45 发布

阅读量5.3k

点赞数 7

分类专栏： Vue 文章标签： flex vue.js

本文链接：https://blog.csdn.net/weixin_43532970/article/details/104051861

版权

本文讲述了在Vue项目中使用flex布局时遇到的echarts多图表自适应缩放问题。作者详细阐述了echarts绘图需要固定宽高容器、手动调用resize方法以及在flex布局下多图自适应的挑战。经过一系列尝试，最终通过给每个图表容器设置强制宽度实现了自适应。这是一个关于vue.js和flex布局深入学习的实战经验分享。

摘要由CSDN通过智能技术生成

前言：最近有个项目需要用到echarts绘制多个图表，需求是要支持大屏展示，还有需要支持不同比例的缩放和任意手动缩放。因此，深入学习了echarts和flex布局。虽然遇到很多问题，但都一一解决了收获良多。故此写下遇到的问题与坑，与之共勉。

1.echarts图表需要在一个有给定宽、高的容器里才会绘图。

echarts官网宽高问题截图
上图截图与echarts官网，地址：echarts官网
不得不提一下，都2020年了还不支持自动获取高度…（感觉可以这个echarts得优化）。
解决方法：给定一个宽高的容器即可。

2.echarts图表需要添加resize（）方法才能自适应缩放。

echarts官网截图
地址：echarts自适应缩放问题截图
echarts的图表不会自动适用屏幕缩放，需要手动添加resize函数才行。

3.（重点）使用flex布局echarts多图不能自适应缩放。

在flex布局下，添加了resize函数后，echarts多图不能自适应缩放。如果一个flex-item里只有一个图的话，那缩放就没问题。但是如果一个flex-item里有2个或2个以上的图，那坑就出现了。

全屏时

demo全屏时

缩小时

demo缩小时

代码

<template>
    <div class="overall-monitoring">
        <!-- 头部信息 -->
        <div class="header-panel">
            <div class="header-panel-title">
                <h1>flex布局echarts多图demo</h1>
            </div>
            <div class="headr-panel-span">
                <span class="headr-panel-span-left">2019年04月20日 周日 12:00 天气：晴</span>
                <span class="headr-panel-span-right">最新生成分析数据时间： 2019/01/07</span>
            </div>
        </div>
        
        <!-- 主要内容 -->
        <div class="main-panel">
            <!-- 左边信息 -->
            <div class="main-panel-left">
                <div id="weather" class="main-panel-left-top mian-panel-lfet-bg">
                    <div class="main-panel-left-top-weatherMsg">
                        <div class="weatherMsg1">
                            <h3>气象信息</h3>
                        </div>

                        <div class="weatherMsg2">
                            <img src="../../assets/image/nanping-weather-overcast.png">
                            <div class="weatherMsg2area">
                                <span>XX市</span><br>
                                <span>阴转小于5~10℃</span>
                            </div>
                        </div>

                        <div class="weatherMsg3">
                            <p>XX市，XX省地级市，位于北纬XX°XX'——XX°XX'，东经XX°XX'——XX°XX'之间</p>
                        </div>

                        <div class="weatherMsg4">
                            <span><img src="../../assets/image/nanping-weather-humidity.png"> 相对湿度：77%</span><br>
                            <span><img src="../../assets/image/nanping-weather-air.png"> 空气质量：良</span><br>
                            <span><img src="../../assets/image/nanping-weather-wind.png"> 风力风向：西北风1级</span><br>
                            <span><img src="../../assets/image/nanping-weather-rain.png"> 总降水量：0.0mm</span><br>
                        </div>
                    </div>
                </div>
                <div id="ammeter" class="main-panel-left-bottom mian-panel-lfet-bg"></div>
            </div>

            <!-- 中间信息 -->
            <div class="main-panel-middle">
                <div class="main-panel-middle-survey">
                    <h3>概况</h3>
                    <div>
                        <span style="color: green;padding-left: 2%;">10</span>
                        <span>处</span><br>
                        <span>治污设施</span>
                    </div>
                    <div>
                        <span style="color: yellow;padding-left: 2%;">25</span>
                        <span>处</span><br>
                        <span>监测产污设施</span>
                    </div>
                    <div>
                        <span style="color: blue;padding-left: 2%;">95</span>
                        <span>个</span><br>
                        <span>监测点数量</span>
                    </div>
                </div>
                <div class="main-panel-middle-echarts-top">
                    <div id="temperature" class="main-panel-middle-echarts-top-1 main-panel-middle-echarts-bg"></div>
                    <div id="humidity" class="main-panel-middle-echarts-top-2 main-panel-middle-echarts-bg"></div>
                </div>
                <div class="main-panel-middle-echarts-bottom">
                    <div id="phosphorus" class="main-panel-middle-echarts-bottom-1 main-panel-middle-echarts-bg"></div>
                    <div id="ammonia" class="main-panel-middle-echarts-bottom-2 main-panel-middle-echarts-bg"></div>
                </div>
            </div>

            <!-- 右边信息 -->
            <div class="main-panel-right">
                <div id="equipment" class="main-panel-right-top mian-panel-lfet-bg"></div>
                <div id="watermeter" class="main-panel-right-bottom mian-panel-lfet-bg"></div>
            </div>
        </div>

    </div>
</template>

<script>
import echarts from "echarts";

export default {
   
    data() {
   
        return {
   
            // 天气
            weather: null