Skip to content

ECharts 多图resize问题 #208

Open
@TieMuZhen

Description

@TieMuZhen

ECharts是一款基于JavaScript的数据可视化图表库

基本使用如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        html, body{
            height: 100%;
        }
        #container {
            height: 100%;
            width: 100%;
            display: flex;
        }
        .left {
            flex: 1;
        }
        .right {
            flex: 1;
        }
        .chart {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">
            <div id="main0" class="chart"></div>
        </div>
        <div class="right">
            <div id="main1" class="chart"></div>
        </div>
    </div>

    </body>
    <script>
        var container = document.getElementById('container');

        var option = {
            xAxis: {},
            yAxis: {},
            series: {
                type: 'line',
                data: [[11, 22], [33, 44]]
            }
        };

        var main0 = document.getElementById('main0');
        var main1 = document.getElementById('main1');
        
        var chart0 = echarts.init(main0);
        var chart1 = echarts.init(main1);
        chart0.setOption(option);
        chart1.setOption(option);
        
        window.addEventListener("resize", function (){
            chart0.resize();
            chart1.resize();
        });
    </script>
</html>

常见问题

  • 页面有多个图表的时候就需要用addEventListener监听windowresize事件,上面代码中有展示,否则可能面临该问题
  • 使用flex布局宽度自适应实现一列多行,多个图表。给图表绑定了resize事件,当窗口从小到大变化时,每个图表resize正常,但是从大变小时,图表resize异常。 解决办法: 给每个图表都设置一个最小宽度min-width,具体可参考该文

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions