echarts 排名Y轴数据过多出现滚动条，排名柱形条绑定事件

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 排名条形图（带滚动条+点击事件）</title>
    <!-- 引入ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 图表容器：固定高度，超出显示滚动条 */
        #rankChart {
            width: 100%;
            height: 400px; /* 可视区域高度 */
            overflow: auto; /* 超出自动滚动 */
            border: 1px solid #eee;
        }
        /* 点击提示样式（可选） */
        #clickTip {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #409EFF;
            border-radius: 4px;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="rankChart"></div>
    <!-- 用于展示点击结果的容器（可选） -->
    <div id="clickTip">点击任意条形查看详情...</div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('rankChart');
        const myChart = echarts.init(chartDom);
        const clickTipDom = document.getElementById('clickTip');

        // 模拟数据（可替换为真实数据，数量多的时候会自动出现滚动条）
        const data = [
            { name: '通信PU', value: 55 },
            { name: '营销中心', value: 54 },
            { name: 'AAAAAA', value: 40 },
            { name: 'CCCCCC', value: 38 },
            { name: 'BBBBBB', value: 30 },
            // 可添加更多数据测试滚动条效果
            { name: '部门1', value: 48 },
            { name: '部门2', value: 45 },
            { name: '部门3', value: 42 },
            { name: '部门4', value: 39 },
            { name: '部门5', value: 35 },
            { name: '部门6', value: 33 },
            { name: '部门7', value: 28 },
            { name: '部门8', value: 25 },
			
			 { name: '部门11', value: 48 },
            { name: '部门12', value: 45 },
            { name: '部门13', value: 42 },
            { name: '部门14', value: 39 },
            { name: '部门15', value: 35 },
            { name: '部门16', value: 33 },
            { name: '部门17', value: 28 },
            { name: '部门18', value: 25 },
        ];

        // 动态计算图表高度（每个条目分配60px高度，保证显示完整）
        const chartHeight = data.length * 60 + 80; // 80是上下边距
        chartDom.style.height = chartHeight + 'px';
        myChart.resize(); // 重置图表尺寸

        // ECharts配置项
        const option = {
            // 关闭百分百填充，使用固定数值刻度
            grid: {
                left: 100,   // 左侧留白（显示名称）
                right: 20,
                top: 20,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'value',
                // 自定义X轴刻度（根据数据最大值调整）
                max: Math.max(...data.map(item => item.value)) + 10,
                axisLabel: {
                    fontSize: 12
                }
            },
            yAxis: {
                type: 'category',
                data: data.map(item => item.name),
                inverse: true, // 让数值大的显示在顶部
                axisLabel: {
                    fontSize: 12,
                    width: 80,
                    overflow: 'truncate'
                }
            },
            series: [
                {
                    name: '数值',
                    type: 'bar',
                    data: data.map(item => item.value),
                    itemStyle: {
                        color: '#409EFF' // 蓝色条形（匹配示例样式）
                    },
                    barWidth: 20, // 条形宽度
                    label: {
                        show: false // 如需显示数值，可设为true
                    }
                }
            ],
            // 关闭图例（单系列不需要）
            legend: {
                show: false
            }
        };

        // 渲染图表
        myChart.setOption(option);

        // ========== 核心：添加条形图点击事件 ==========
        myChart.on('click', function(params) {
            // params 对象包含了点击条目的所有信息
            const {
                name,       // 条目的名称（如：通信PU）
                value,      // 条目的数值（如：55）
                dataIndex,  // 数据索引（从0开始）
                seriesName  // 系列名称（数值）
            } = params;

            // 1. 控制台打印详细信息（方便调试）
            console.log('点击的条目信息：', {
                名称: name,
                数值: value,
                索引: dataIndex,
                系列名: seriesName
            });

            // 2. 在页面上展示点击结果（可选）
            clickTipDom.innerHTML = `
                <strong>点击结果：</strong><br>
                名称：${name}<br>
                数值：${value}<br>
                排名：${dataIndex + 1}（按数值降序）
            `;

            // 3. 这里可以添加你的业务逻辑，比如：
            // - 跳转到详情页：window.location.href = `/detail?name=${name}`;
            // - 发送AJAX请求获取更多数据
            // - 显示该条目的详细信息弹窗等
        });

        // 监听窗口大小变化，自适应调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>
// 动态计算图表高度（每个条目分配60px高度，保证显示完整）

const chartHeight = data.length * 60 + 80; // 80是上下边距

chartDom.style.height = chartHeight + 'px';

myChart.resize(); // 重置图表尺寸
效果：