{"spec_id":"line-styled","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-styled: Styled Line Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Daily average temperature by city over one year (day-of-year 1-365, °C).\n// Seasonal cycle (annual cosine) plus small monthly/weekly wobbles so the\n// four line styles stay distinguishable across many segments, not just\n// twelve monthly points.\nconst monthNames = [\n  \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n  \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n];\nconst monthStarts = [1, 32, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335];\n\nconst days = Array.from({ length: 365 }, (_, i) => i + 1);\n\nfunction seasonalTemp(mean, amplitude, peakDay, day) {\n  const annual = amplitude * Math.cos((2 * Math.PI * (day - peakDay)) / 365);\n  const wobble =\n    1.2 * Math.cos((2 * Math.PI * day) / 9) +\n    0.6 * Math.cos((2 * Math.PI * day) / 23);\n  return Math.round((mean + annual + wobble) * 10) / 10;\n}\n\nconst cities = [\n  { name: \"Berlin\", mean: 10, amplitude: 10, peakDay: 208 },\n  { name: \"Madrid\", mean: 17, amplitude: 10, peakDay: 208 },\n  { name: \"Oslo\", mean: 7, amplitude: 11, peakDay: 208 },\n  { name: \"Cairo\", mean: 21.5, amplitude: 7.5, peakDay: 208 },\n];\nconst seriesData = cities.map((city) =>\n  days.map((day) => seasonalTemp(city.mean, city.amplitude, city.peakDay, day)),\n);\n\nconst dashPatterns = [\"solid\", \"dashed\", \"dotted\", [8, 4, 2, 4]];\nconst lineWidth = 3;\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: \"Daily Temperature by City · line-styled · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: 18, fontWeight: 500 },\n  },\n  legend: {\n    top: 68,\n    textStyle: { color: t.inkSoft, fontSize: 15 },\n    itemWidth: 28,\n    itemHeight: 3,\n  },\n  grid: { left: 90, right: 60, top: 130, bottom: 70 },\n  xAxis: {\n    type: \"category\",\n    data: days,\n    boundaryGap: false,\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 14,\n      interval: (index, value) => monthStarts.includes(Number(value)),\n      formatter: (value) => {\n        const day = Number(value);\n        let month = monthNames[0];\n        for (let i = 0; i < monthStarts.length; i++) {\n          if (day >= monthStarts[i]) month = monthNames[i];\n        }\n        return month;\n      },\n    },\n    axisLine: { onZero: false, lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Avg. Temperature (°C)\",\n    nameLocation: \"middle\",\n    nameGap: 55,\n    nameTextStyle: { color: t.ink, fontSize: 15 },\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    axisTick: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: cities.map((city, i) => ({\n    name: city.name,\n    type: \"line\",\n    data: seriesData[i],\n    lineStyle: { type: dashPatterns[i], width: lineWidth, color: t.palette[i] },\n    itemStyle: { color: t.palette[i] },\n    symbol: \"none\",\n  })),\n});\n"}