{"spec_id":"streamgraph-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// streamgraph-basic: Basic Stream Graph\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-08-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Monthly streaming hours (thousands) by music genre, Jan 2024 - Dec 2025.\nconst genres = [\"Pop\", \"Hip-Hop\", \"Rock\", \"Electronic\", \"Jazz\"];\nconst monthCount = 24;\n\n// Per-genre wave parameters: base level, seasonal amplitude/period/phase, linear trend.\nconst params = [\n  { base: 42, amp: 8, period: 12, phase: 0, trend: -0.3 },\n  { base: 28, amp: 10, period: 8, phase: 3, trend: 0.5 },\n  { base: 35, amp: 6, period: 12, phase: 6, trend: -0.05 },\n  { base: 18, amp: 9, period: 6, phase: 1, trend: 0.6 },\n  { base: 12, amp: 4, period: 12, phase: 9, trend: 0.05 },\n];\n\nconst monthLabel = (i) => {\n  const year = 2024 + Math.floor(i / 12);\n  const month = String((i % 12) + 1).padStart(2, \"0\");\n  return `${year}-${month}-01`;\n};\n\nconst streamData = [];\nfor (let i = 0; i < monthCount; i += 1) {\n  const date = monthLabel(i);\n  genres.forEach((genre, gi) => {\n    const p = params[gi];\n    const seasonal = p.amp * Math.sin((2 * Math.PI * (i + p.phase)) / p.period);\n    const value = Math.max(2, Math.round(p.base + seasonal + p.trend * i));\n    streamData.push([date, value, genre]);\n  });\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: \"streamgraph-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 30,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  legend: {\n    data: genres,\n    top: 90,\n    textStyle: { color: t.ink, fontSize: 16 },\n    itemWidth: 22,\n    itemHeight: 14,\n  },\n  singleAxis: {\n    type: \"time\",\n    top: 170,\n    bottom: 110,\n    left: 90,\n    right: 90,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: true, lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"themeRiver\",\n      emphasis: { disabled: true },\n      label: { show: false },\n      data: streamData,\n    },\n  ],\n});\n"}