当前位置： 首页 > article >正文

v-chart 显示BUG （图表显示不全）

article 2025/3/26 15:41:15

v-chart 显示BUG （图表显示不全）

BUG

效果：在这里插入图片描述

  • 原代码如下
            <el-row :gutter="20">
                <el-col :span="12">
                        <v-chart autoresize :option="staffStatusOption" style="height: 380px; width: 100%;" />
                </el-col>
                <el-col :span="12">
                        <v-chart autoresize :option="staffTrendOption" style="height: 380px;width: 100%;" />
                </el-col>
            </el-row>

解决方法

解决成效：

在这里插入图片描述

  • v-chart组件中加入 autoresize，自动监听容器尺寸变化
  • 改进后代码如下：
            <el-row :gutter="20">
                <el-col :span="12">
                        <v-chart autoresize :option="staffStatusOption" style="height: 380px; width: 100%;" />
                </el-col>
                <el-col :span="12">
                        <v-chart autoresize :option="staffTrendOption" style="height: 380px;width: 100%;" />
                </el-col>
            </el-row>

http://www.kler.cn/a/599476.html

相关文章：

  • 【Android】VehiclePropertyAccess引起CarService崩溃
  • 网络故障排查
  • spring和maven
  • 18，C++——哈希
  • 第3章 Internet主机与网络枚举（网络安全评估）
  • Log4j2 的核心实现和源码分析
  • day 6 中断
  • 求二叉搜索树中的众数的三种方法
  • [Android] NFC卡模拟 9.05 模拟NFC门禁卡 电梯卡等 手机代替卡片
  • ＜项目＞ 高并发服务器的HTTP协议支持
  • QML指示控件：ScrollBar与ScrollIndicator
  • 复杂任务需要多agent协同处理，对其进行逻辑编排和参数调用
  • 鸿蒙特效教程10-卡片展开/收起效果
  • 数据结构篇：空间复杂度和时间复杂度
  • netplan是如何操控NetworkManager的? 笔记250324
  • 车载以太网网络测试 -23【TCPUDP通信示例】
  • 蓝桥杯——嵌入式学习日记
  • 借助AI Agent实现数据分析
  • Python虚拟环境：从入门到实战指南
  • 在 ASP.NET Core 中实现限流（Rate Limiting）：保护服务免受滥用与攻击