{"spec_id":"line-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-basic: Basic Line Plot\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 87/100 | Created: 2026-06-02\n//# anyplot-orientation: landscape\n// anyplot.ai\n// line-basic: Basic Line Plot\n// Library: echarts 5.x | JavaScript 22\n// Quality: pending | Created: 2026-06-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — daily unique visitors over 90 days (deterministic LCG, fixed seed)\nlet seed = 42;\nconst rand = () => {\n  seed = (seed * 1664525 + 1013904223) >>> 0;\n  return seed / 4294967296;\n};\n\nconst startDate = new Date(2026, 0, 1);\nconst days = 90;\nconst dates = [];\nconst visitors = [];\nlet base = 1800;\nfor (let i = 0; i < days; i++) {\n  const d = new Date(startDate);\n  d.setDate(startDate.getDate() + i);\n  dates.push(`${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`);\n  base += (rand() - 0.45) * 60 + 12;\n  const weekly = 90 * Math.sin((i / 7) * 2 * Math.PI);\n  visitors.push(Math.round(base + weekly + (rand() - 0.5) * 80));\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  textStyle: { color: t.inkSoft, fontFamily: \"Helvetica, Arial, sans-serif\" },\n  title: {\n    text: \"line-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 28,\n    textStyle: { color: t.ink, fontSize: 28, fontWeight: 500 },\n  },\n  grid: { left: 110, right: 80, top: 130, bottom: 100, containLabel: true },\n  xAxis: {\n    type: \"category\",\n    data: dates,\n    boundaryGap: false,\n    name: \"Date (2026)\",\n    nameLocation: \"middle\",\n    nameGap: 50,\n    nameTextStyle: { color: t.ink, fontSize: 20 },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 16,\n      interval: 13,\n      margin: 16,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Daily Unique Visitors\",\n    nameLocation: \"middle\",\n    nameGap: 80,\n    nameTextStyle: { color: t.ink, fontSize: 20 },\n    min: 1500,\n    max: 3500,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 16,\n      margin: 16,\n      formatter: (v) => v.toLocaleString(\"en-US\"),\n    },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid, width: 1 } },\n  },\n  series: [\n    {\n      type: \"line\",\n      data: visitors,\n      showSymbol: false,\n      lineStyle: { color: t.palette[0], width: 3.5 },\n      itemStyle: { color: t.palette[0] },\n      emphasis: { focus: \"series\" },\n      markLine: {\n        symbol: \"none\",\n        silent: true,\n        lineStyle: { color: t.inkSoft, type: \"dashed\", width: 1 },\n        label: {\n          color: t.inkSoft,\n          fontSize: 14,\n          formatter: (p) => `mean ${Math.round(p.value).toLocaleString(\"en-US\")}`,\n          position: \"insideEndTop\",\n        },\n        data: [{ type: \"average\" }],\n      },\n      markPoint: {\n        symbol: \"circle\",\n        symbolSize: 14,\n        itemStyle: { color: t.palette[0], borderColor: t.pageBg, borderWidth: 2 },\n        label: {\n          color: t.ink,\n          fontSize: 15,\n          fontWeight: 500,\n          position: \"left\",\n          distance: 14,\n          formatter: (p) => `latest ${p.value.toLocaleString(\"en-US\")}`,\n        },\n        data: [\n          {\n            coord: [dates[dates.length - 1], visitors[visitors.length - 1]],\n            value: visitors[visitors.length - 1],\n          },\n        ],\n      },\n    },\n  ],\n});\n\nchart.on(\"finished\", () => {\n  window.__anyplotReady = true;\n});\n"}