{"spec_id":"span-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// span-basic: Basic Span Plot (Highlighted Region)\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Hourly server response latency (ms) over one day, with a traffic-spike incident.\nconst hours = Array.from({ length: 24 }, (_, i) => i);\nconst latencyMs = [\n  95, 88, 102, 91, 85, 79, 83, 110, 135, 128, 118, 125, 132, 140, 310, 340, 295,\n  150, 128, 115, 105, 98, 92, 87,\n];\nconst readings = hours.map((h, i) => [h, latencyMs[i]]);\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: \"span-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  grid: { left: 110, right: 60, top: 110, bottom: 80 },\n  xAxis: {\n    type: \"value\",\n    name: \"Time of Day\",\n    nameLocation: \"middle\",\n    nameGap: 45,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 0,\n    max: 23,\n    interval: 3,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 14,\n      formatter: (v) => `${String(Math.round(v)).padStart(2, \"0\")}:00`,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Response Latency (ms)\",\n    nameLocation: \"middle\",\n    nameGap: 70,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 0,\n    max: 400,\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: readings,\n      symbol: \"circle\",\n      symbolSize: 9,\n      lineWidth: 3,\n      itemStyle: { color: t.palette[0] },\n      lineStyle: { color: t.palette[0] },\n      markArea: {\n        silent: true,\n        label: { show: true, formatter: \"{b}\", color: t.inkSoft, fontSize: 15 },\n        data: [\n          [\n            {\n              name: \"SLA target (≤200ms)\",\n              yAxis: 0,\n              label: { position: \"insideTopLeft\" },\n              itemStyle: { color: t.palette[0], opacity: 0.16 },\n            },\n            { yAxis: 200 },\n          ],\n          [\n            {\n              name: \"Traffic spike incident\",\n              xAxis: 13.5,\n              label: { position: \"insideTop\" },\n              itemStyle: { color: t.amber, opacity: 0.28 },\n            },\n            { xAxis: 16.5 },\n          ],\n        ],\n      },\n    },\n  ],\n});\n"}