{"spec_id":"area-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// area-basic: Basic Area Chart\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 93/100 | Created: 2026-06-02\n\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG) -----------------------------------\n// Daily website visitors across 30 days: gentle upward trend + weekly cycle\n// (weekdays peak, weekends dip) + small noise. Imprint palette position 1 is\n// the brand green for the filled trend.\nlet seed = 42;\nconst rng = () => { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; };\n\nconst days = 30;\nconst start = new Date(2026, 4, 1); // 2026-05-01 (months are 0-indexed)\nconst dates = [];\nconst visitors = [];\nfor (let i = 0; i < days; i++) {\n  const d = new Date(start.getTime() + i * 86400000);\n  dates.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`);\n  const trend = 8200 + i * 180;\n  const dow = d.getDay(); // 0 = Sun, 6 = Sat\n  const weekly = (dow === 0 || dow === 6) ? -1800 : 600;\n  const noise = (rng() - 0.5) * 1400;\n  visitors.push(Math.round(trend + weekly + noise));\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: \"area-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 30, fontWeight: \"bold\" },\n  },\n  tooltip: {\n    trigger: \"axis\",\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    textStyle: { color: t.ink, fontSize: 14 },\n    valueFormatter: (v) => `${v.toLocaleString()} visitors`,\n  },\n  grid: { left: 130, right: 70, top: 100, bottom: 95, borderWidth: 0 },\n  xAxis: {\n    type: \"category\",\n    data: dates,\n    boundaryGap: false,\n    name: \"Date (May 2026)\",\n    nameLocation: \"middle\",\n    nameGap: 58,\n    nameTextStyle: { color: t.inkSoft, fontSize: 20, fontWeight: \"normal\" },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 16,\n      formatter: (val) => val.slice(-2), // show day-of-month only\n      interval: 2,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    min: 0,\n    name: \"Daily Visitors\",\n    nameLocation: \"middle\",\n    nameRotate: 90,\n    nameGap: 90,\n    nameTextStyle: { color: t.inkSoft, fontSize: 20, fontWeight: \"normal\" },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 16,\n      formatter: (v) => v >= 1000 ? `${(v / 1000).toFixed(0)}k` : `${v}`,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { lineStyle: { color: t.inkSoft } },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"line\",\n      data: visitors,\n      smooth: true,\n      symbol: \"circle\",\n      symbolSize: 8,\n      showSymbol: false,\n      lineStyle: { color: t.palette[0], width: 3 },\n      itemStyle: { color: t.palette[0], borderColor: t.pageBg, borderWidth: 2 },\n      // ECharts-distinctive: vertical LinearGradient fill from line down to axis\n      areaStyle: {\n        opacity: 0.85,\n        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n          { offset: 0, color: t.palette[0] + \"B3\" }, // ~70% alpha at top\n          { offset: 1, color: t.palette[0] + \"1A\" }, // ~10% alpha at axis\n        ]),\n      },\n      emphasis: { focus: \"series\" },\n    },\n  ],\n});\n"}