{"spec_id":"line-filled","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-filled: Filled Line Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Monthly website traffic (thousands of sessions) over two years.\nconst months = [\n  \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n  \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n  \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n  \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n];\n\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst rand = lcg(42);\n\nlet sessions = 40;\nconst traffic = months.map((_, i) => {\n  const seasonal = 12 * Math.sin((i / 12) * Math.PI * 2 - Math.PI / 2);\n  const trend = i * 0.9;\n  const noise = (rand() - 0.5) * 6;\n  sessions = 40 + trend + seasonal + noise;\n  return Math.round(Math.max(sessions, 5) * 10) / 10;\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: \"Website Traffic · line-filled · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 30,\n    textStyle: { color: t.ink, fontSize: 24, fontWeight: 500 },\n  },\n  grid: { left: 90, right: 60, top: 110, bottom: 80 },\n  xAxis: {\n    type: \"category\",\n    data: months,\n    boundaryGap: false,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Sessions (thousands)\",\n    nameLocation: \"middle\",\n    nameGap: 60,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"line\",\n      data: traffic,\n      showSymbol: false,\n      smooth: 0.2,\n      lineStyle: { width: 3.5, color: t.palette[0] },\n      areaStyle: {\n        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n          { offset: 0, color: \"rgba(0, 158, 115, 0.4)\" },\n          { offset: 1, color: \"rgba(0, 158, 115, 0.02)\" },\n        ]),\n      },\n      markPoint: {\n        symbolSize: 50,\n        itemStyle: { color: t.palette[0] },\n        label: { color: \"#FFFFFF\", fontSize: 12, fontWeight: 600 },\n        data: [{ type: \"max\", name: \"Peak\" }],\n      },\n    },\n  ],\n});\n"}