如何基于非随机数据绘制Bump Chart（凹凸图）？

原Apache ECharts凹凸图示例中的随机数据生成逻辑对JS/TS新手不够友好，以下是移除该逻辑后，使用固定结构化数据的完整可运行代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 凹凸图示例（移除随机数据）</title>
    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 图表容器，需指定宽高 -->
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 初始化ECharts实例
        const myChart = echarts.init(document.getElementById('main'));

        // 自定义类别（比如日期、阶段等）
        const categories = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        // 自定义系列数据：每个对象对应一个追踪的项目，data数组为该项目在各时间点的排名
        const seriesData = [
            {
                name: '项目A',
                data: [1, 2, 3, 2, 1, 2, 3],
                lineStyle: { color: '#5470c6' }
            },
            {
                name: '项目B',
                data: [3, 1, 2, 1, 3, 1, 2],
                lineStyle: { color: '#91cc75' }
            },
            {
                name: '项目C',
                data: [2, 3, 1, 3, 2, 3, 1],
                lineStyle: { color: '#fac858' }
            }
        ];

        // 图表核心配置项
        const option = {
            title: {
                text: '项目排名变化追踪',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} <br/>{a}: 第{c}名'
            },
            legend: {
                top: 'bottom',
                data: seriesData.map(item => item.name)
            },
            xAxis: {
                type: 'category',
                data: categories,
                axisLine: { onZero: false }
            },
            yAxis: {
                type: 'value',
                inverse: true, // 让排名第1位显示在图表最上方
                axisLabel: {
                    formatter: '第{value}名'
                }
            },
            series: seriesData.map(item => ({
                type: 'line',
                name: item.name,
                data: item.data,
                lineStyle: item.lineStyle,
                symbol: 'circle', // 数据点使用圆形标记
                symbolSize: 6
            }))
        };

        // 将配置项应用到图表
        myChart.setOption(option);
    </script>
</body>
</html>

代码说明 #

• 直接替换categories数组可以修改横轴的类别（比如换成月份、季度等）
• 修改seriesData数组可以新增/修改追踪的项目，每个项目的data数组对应其在各个类别下的排名数值
• 核心的图表配置（坐标轴反转、tooltip格式、图例位置等）保留了原凹凸图的核心特性，同时结构清晰易修改

内容的提问来源于stack exchange，提问作者crocefisso