vue tabs切换 echarts宽度显示为100px问题

  1. 最近用element UI tabs显示echarts图表,但一设置echarts图表的宽度为100%,图表的宽度就变为100px,在网上搜了很多解决方案,用到了echarts的resize函数,便在代码中添加:
    let _this = this;
    window.addEventListener("resize", function () {
        _this.siteLine.resize();
    }); 

        发现初始化的时候还是不行,但初始化后改变窗口的大小,图表的大小能够随着窗口大小的改变而改变,为了解决初始化的问题,尝试了很多方法,最终代码:

mounted: function () {
            let myChart = document.getElementById(('siteLine'));
            myChart.style.width = window.innerWidth - 230 + 'px';
            this.siteLine = echarts.init(myChart);
            setInterval(this.lineInit, 2000);
            let _this = this;
            window.addEventListener("resize", function () {
                let myChart = document.getElementById(('siteLine'));
                myChart.style.width = window.innerWidth - 230 + 'px';
                _this.siteLine.resize();
            });
        }

上面写的230指的是窗口左半部分列表的宽度,echarts图表占据剩余的宽度,如果除了echarts图表的宽度还有其他动态宽度,只需依次获取其他宽度,并用window.innerWidth减去即可

参考:点击打开链接

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值