tab页切换导致echart图宽高仅100px问题

页面切换导致echart图宽高仅100px问题,图表的宽度可能没有正确更新,导致显示不正确。为了解决这个问题,你需要确保在切换标签页时触发ECharts实例的resize方法,以便图表可以正确地调整到新的容器尺寸。

// 假设你已经有一个ECharts实例
var myChart = echarts.init(document.getElementById('myChart'));
 
// 假设你有一个函数来处理标签页的切换事件
function handleTabSwitch() {
    // 当标签页切换时,重置ECharts图表的尺寸
    myChart.resize();
}

还有打开弹框或者切换tab页的时候,加载异常。

第一次打开弹框加载异常,第二次打开弹框就加载正常了,这时候只需要再打开弹框的方法调用中加一个nextTick再加载一次echarts:

  this.$nextTick(() => {
              这里调用一下绘制echarts的方法就行了
            });

再或者有一个更简单的方法,适用于窗口宽度不变的时候:

把宽高固定写死,
比如style=”width:500px;height:500px”,这时候echarts有了明确的大小时候就可以正常显示出来了。
但是如果 想要 100%铺满且随屏幕自动适应大小,又无法解决了。。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-27 14:32:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-27 14:32:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-27 14:32:02       82 阅读
  4. Python语言-面向对象

    2024-03-27 14:32:02       91 阅读

热门阅读

  1. 【go从入门到精通】for和for range的区别

    2024-03-27 14:32:02       34 阅读
  2. lInux 常用命令

    2024-03-27 14:32:02       36 阅读
  3. C#委托与事件

    2024-03-27 14:32:02       38 阅读
  4. pg事务ID清理

    2024-03-27 14:32:02       37 阅读
  5. C#中让字典、列表、数组作为只读的方法参考

    2024-03-27 14:32:02       40 阅读
  6. C#基础-VS中常用代码段快速输入

    2024-03-27 14:32:02       35 阅读
  7. 程序员开发技术整理

    2024-03-27 14:32:02       33 阅读
  8. Vue小练习:记录任务所花费时间

    2024-03-27 14:32:02       44 阅读
  9. 分布式事务

    2024-03-27 14:32:02       42 阅读