vue框架下，echarts图表外部容器宽度设置为百分比时内容超出容器以及echarts图表自适应的实现方案...

最新推荐文章于 2024-06-12 09:33:10 发布

转载最新推荐文章于 2024-06-12 09:33:10 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaoyueqi/p/9926503.html

文章标签：

#javascript #ViewUI

本文介绍在Vue.js框架中使用ECharts时，如何解决图表内容超出外部容器宽度的问题。通过在初始化echart对象后立即调用resize方法，并确保数据加载方法异步执行，实现图表随窗口大小变化自适应。特别提醒，在使用jQuery框架的项目中，窗口resize事件监听应采用原生JS方式，避免事件覆盖问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue.js框架下，创建echarts图表，当图表的外部容器的宽度设置为百分比时，出现图表内容宽度超出其外部容器的情况，几番调试，得解决方案如下：

（备注说明：问题产生的具体原因尚不清晰，后面若知晓了再补充，但是初期解决问题阶段一定不要钻牛角，不是一开始就能或者可以知道真理的）

在创建了echart对象之后，就调用一次echart的resize方法，同时，获取图表数据的方法应该是异步的，如果是初期调试模拟也要用setTimeout延迟一下，0秒即OK了。

methods: {
    ...mapActions("chartonetwo", ["getData"]),
    initChart() {
      let oChart = echarts.init(document.getElementById("chartone"));
      oChart.resize();//关键步骤
      ......（其他代码省略）
    }
}

echart图表随窗口大小变化的自适应的实现方法

在渲染图表即setOption之后，添加窗口的resize方法

oChart.setOption(option);
window.addEventListener("resize", function() {
    oChart.resize();
});

特别注意：当项目是引用jquery框架时，此处的事件添加也一定要用原生js的方式，否则，当一个页面中有多个echart图表时，会造成事件的覆盖，即只有一个图表的resize方法生效。

转载于:https://www.cnblogs.com/chaoyueqi/p/9926503.html