当前位置：首页 > article >正文

echarts：当前柱状图默认显示两个，拖拽后显示其他的柱状，请问怎么默认显示所有的？

article 2025/1/20 1:02:11

问：

当前柱状图默认显示两个，拖拽后显示其他的柱状，请问怎么么人显示所有的？

回答：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 显示所有柱状图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script>
        // 定义 alldata 对象
        var alldata = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            legend: {
                data: ['系列1', '系列2'], // 图例项
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月'],
                // 设置 x 轴最大值，确保全部显示
                boundaryGap: true // 使 x 轴上的数据有一定间距
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '系列1',
                    type: 'bar',
                    data: [10, 20, 30, 40],
                    itemStyle: {
                        color: '#5470C6'
                    }
                },
                {
                    name: '系列2',
                    type: 'bar',
                    data: [15, 25, 35, 45],
                    itemStyle: {
                        color: '#91CC75'
                    }
                }
            ],
            // 可以选择不使用 dataZoom
            // dataZoom: [{
            //     type: 'inside',
            //     start: 0,
            //     end: 100 // 确保初始范围为 100%
            // }]
        };

        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 设置 ECharts 配置
        myChart.setOption(alldata);
    </script>
</body>
</html>

禁用 dataZoom:
- 在此示例中，我们已注释掉 dataZoom 的部分。如果你希望完全不使用滚动条，请不要添加 dataZoom 配置。
设置 xAxis 的 boundaryGap:
- 使用 boundaryGap: true 可以让柱状图之间留有空间，这样视觉效果会更好。
检查容器宽度:
- 确保图表容器宽度足够以容纳所有柱状图。
动态调整:
- 如果你想在某些条件下动态调整 dataZoom 或其他属性，可以根据需要进行修改。