{"spec_id":"rose-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// rose-basic: Basic Rose Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 94/100 | Created: 2026-07-25\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Average monthly rainfall for a humid-subtropical coastal city (mm), Jan at\n// the top, running clockwise — a classic natural-12-month cycle for a rose\n// chart, with a monsoon-influenced Jun-Aug wet season.\nconst months = [\n  \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n  \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n];\nconst rainfall = [62, 58, 71, 85, 98, 112, 125, 118, 95, 82, 70, 65];\nconst peakIndex = rainfall.indexOf(Math.max(...rainfall));\n\n// Highlight the wettest month with an ink outline and an explicit callout —\n// the dual radius+color encoding already tells the story, this makes it explicit.\nconst seriesData = rainfall.map((value, i) =>\n  i === peakIndex\n    ? {\n        value,\n        itemStyle: { borderColor: t.ink, borderWidth: 3 },\n        label: {\n          show: true,\n          position: \"middle\",\n          formatter: () => `Peak · ${value} mm`,\n          color: t.ink,\n          fontSize: 12,\n          fontWeight: 600,\n        },\n      }\n    : value,\n);\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nconst title = \"rose-basic · javascript · echarts · anyplot.ai\";\n\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: title,\n    subtext: \"Average monthly rainfall (mm) · humid-subtropical coastal city\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n    subtextStyle: { color: t.inkSoft, fontSize: 14, fontWeight: 400 },\n  },\n  tooltip: {\n    formatter: (p) => `${p.name}: ${p.value} mm`,\n  },\n  polar: {\n    center: [\"50%\", \"55%\"],\n    radius: [\"8%\", \"62%\"],\n  },\n  angleAxis: {\n    type: \"category\",\n    data: months,\n    startAngle: 90,\n    clockwise: true,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: { color: t.inkSoft, fontSize: 16 },\n    splitLine: { show: false },\n  },\n  radiusAxis: {\n    type: \"value\",\n    min: 0,\n    max: 150,\n    interval: 30,\n    z: 10,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 12,\n      formatter: \"{value} mm\",\n      backgroundColor: t.pageBg,\n      padding: [2, 4],\n      borderRadius: 2,\n    },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  visualMap: {\n    type: \"continuous\",\n    min: Math.min(...rainfall),\n    max: Math.max(...rainfall),\n    dimension: 0,\n    seriesIndex: 0,\n    orient: \"horizontal\",\n    left: \"center\",\n    bottom: 30,\n    itemWidth: 16,\n    itemHeight: 220,\n    text: [\"More rain\", \"Less rain\"],\n    textStyle: { color: t.inkSoft, fontSize: 13 },\n    inRange: { color: t.seq },\n  },\n  series: [\n    {\n      type: \"bar\",\n      coordinateSystem: \"polar\",\n      z: 2,\n      data: seriesData,\n      barCategoryGap: \"8%\",\n      itemStyle: {\n        borderColor: t.pageBg,\n        borderWidth: 2,\n        borderRadius: 4,\n      },\n      emphasis: { itemStyle: { borderColor: t.ink, borderWidth: 2 } },\n    },\n  ],\n});\n"}