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

本文介绍在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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值