{"spec_id":"bump-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// bump-basic: Basic Bump Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-08-24\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Fictional racing championship: rank (1 = best) per team across 8 races.\n// Each race column is a valid permutation of 1..8 — no ties.\nconst races = [\n  \"Race 1\", \"Race 2\", \"Race 3\", \"Race 4\",\n  \"Race 5\", \"Race 6\", \"Race 7\", \"Race 8\",\n];\n\nconst teams = [\n  { name: \"Nova Racing\", ranks: [3, 2, 1, 1, 1, 1, 1, 1] },\n  { name: \"Apex Motors\", ranks: [5, 4, 3, 2, 2, 2, 2, 2] },\n  { name: \"Ironclad Racing\", ranks: [8, 7, 6, 5, 4, 3, 3, 3] },\n  { name: \"Vector GP\", ranks: [1, 1, 2, 3, 3, 4, 4, 4] },\n  { name: \"Vertex Motorsport\", ranks: [6, 6, 7, 7, 8, 6, 5, 5] },\n  { name: \"Solstice Team\", ranks: [7, 8, 8, 8, 7, 8, 7, 6] },\n  { name: \"Meridian F1\", ranks: [4, 5, 5, 4, 5, 5, 6, 7] },\n  { name: \"Skyline Racing\", ranks: [2, 3, 4, 6, 6, 7, 8, 8] },\n];\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"bump-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  tooltip: { trigger: \"axis\" },\n  grid: { left: 70, right: 190, top: 100, bottom: 80, containLabel: true },\n  xAxis: {\n    type: \"category\",\n    data: races,\n    boundaryGap: false,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    inverse: true,\n    min: 1,\n    max: teams.length,\n    interval: 1,\n    name: \"Rank (1 = best)\",\n    nameLocation: \"middle\",\n    nameGap: 46,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: teams.map((team, i) => {\n    // Nova Racing (index 0) is the eventual champion: rank 1 from Race 3 onward.\n    const isChampion = i === 0;\n    return {\n      name: team.name,\n      type: \"line\",\n      data: team.ranks,\n      color: t.palette[i],\n      symbol: isChampion ? \"diamond\" : \"circle\",\n      symbolSize: isChampion ? 20 : 16,\n      lineStyle: { width: isChampion ? 5 : 3.5 },\n      itemStyle: { color: t.palette[i] },\n      emphasis: { focus: \"series\" },\n      endLabel: {\n        show: true,\n        formatter: \"{a}\",\n        color: t.ink,\n        fontSize: 14,\n        fontWeight: isChampion ? \"bold\" : \"normal\",\n        distance: 12,\n      },\n    };\n  }),\n});\n"}