首页 技术设计 前端 chart

在使用 ECharts 进行图表绘制时，可以利用 CSS Grid 布局来组织页面元素，确保图表能够在容器中正确显示。以下是一个简单的例子，展示了如何使用 CSS Grid 布局来搭建一个包含 ECharts 图表的页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts with Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 定义三列，每列占据 1/3 空间 */
            grid-gap: 10px; /* 定义网格间隙 */
            padding: 10px;
        }
        .chart-item {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="chart-item">
            <div id="main1" style="width: 100%;height:150px;"></div>
        </div>
        <div class="chart-item">
            <div id="main2" style="width: 100%;height:150px;"></div>
        </div>
        <div class="chart-item">
            <div id="main3" style="width: 100%;height:150px;"></div>
        </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
 
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: 'ECharts 示例1'
            },
            // 其他配置项...
        };
        var option2 = {
            title: {
                text: 'ECharts 示例2'
            },
            // 其他配置项...
        };
        var option3 = {
            title: {
                text: 'ECharts 示例3'
            },
            // 其他配置项...
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    </script>
</body>
</html>

在这个例子中，我们定义了一个容器 .grid-container ，它使用 CSS Grid 布局系统。我们设置了三列，每列的宽度是其父容器的三分之一。然后，我们在 .grid-container 中创建了三个 .chart-item 容器，每个容器包含一个 ECharts 图表。通过这种方式，图表能够在页面上以网格的形式排列。