【JavaScript】【笔记】实现不用刷新页面echarts大小自适应缩放

soupirerdedame · 发表于 2021-4-1 08:41

问题：echarts图不会即时随容器尺寸的变化而自适应缩放
思路：监听一下外部容器的尺寸变化，然后resize
代码：

[JavaScript] 纯文本查看 复制代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
// 自适应的部分
myChart.clear();
        myChart.setOption(option,true);
        window.addEventListener('resize',() => {
            if(myChart){
                myChart.resize()
            }
        })

会迷路的橘猫 · 发表于 2021-4-1 10:43

giao，学到了

kendling · 发表于 2021-4-1 09:24

不错的变通方法

qujf · 发表于 2021-4-1 09:43

很赞，加油

muouran · 发表于 2021-5-10 11:37

这？文档里有呀。还用你说？

soupirerdedame · 发表于 2021-5-11 11:30

muouran 发表于 2021-5-10 11:37
这？文档里有呀。还用你说？

学到了，文档是个好东西

汐夕阳 · 发表于 2021-5-11 15:30

这。。。新手训练营？

涂白了记忆丶 · 发表于 2021-5-11 19:00

谢谢分享，收藏下！！

涂白了记忆丶 · 发表于 2021-5-11 19:11

谢谢分享，收藏下！！

soupirerdedame · 发表于 2021-5-11 22:00

汐夕阳发表于 2021-5-11 15:30
这。。。新手训练营？

我是小白，记录一下自己的学习笔记

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 【JavaScript】【笔记】实现不用刷新页面echarts大小自适应缩放

个人中心