{"spec_id":"radar-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// radar-basic: Basic Radar Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 89/100 | Created: 2026-07-24\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — three phone models compared across six product attributes (0-100 scale)\nconst indicators = [\n  { name: \"Battery Life\", max: 100 },\n  { name: \"Camera\", max: 100 },\n  { name: \"Performance\", max: 100 },\n  { name: \"Display\", max: 100 },\n  { name: \"Price Value\", max: 100 },\n  { name: \"Build Quality\", max: 100 },\n];\n\nconst models = [\n  { name: \"Aurora X\", values: [78, 92, 95, 88, 45, 90] },\n  { name: \"Nimbus S\", values: [85, 70, 72, 75, 78, 68] },\n  { name: \"Vega Lite\", values: [90, 55, 50, 60, 92, 55] },\n];\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"radar-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  legend: {\n    data: models.map((m) => m.name),\n    bottom: 20,\n    textStyle: { color: t.ink, fontSize: 16 },\n    itemWidth: 20,\n    itemHeight: 14,\n  },\n  radar: {\n    center: [\"50%\", \"54%\"],\n    radius: \"60%\",\n    shape: \"polygon\",\n    splitNumber: 5,\n    indicator: indicators,\n    name: { textStyle: { color: t.inkSoft, fontSize: 15 } },\n    axisLine: { lineStyle: { color: t.grid } },\n    axisLabel: {\n      show: true,\n      color: t.inkSoft,\n      fontSize: 12,\n      formatter: (value) => (value === 0 ? \"\" : String(value)),\n    },\n    splitLine: { lineStyle: { color: t.grid } },\n    splitArea: { show: true, areaStyle: { color: [t.pageBg, t.elevatedBg] } },\n  },\n  series: [\n    {\n      type: \"radar\",\n      data: models.map((m, i) => ({\n        name: m.name,\n        value: m.values,\n        symbol: \"circle\",\n        symbolSize: 8,\n        lineStyle: { color: t.palette[i], width: 3 },\n        itemStyle: { color: t.palette[i] },\n        areaStyle: {\n          color: t.palette[i],\n          opacity: 0.25,\n          shadowBlur: 14,\n          shadowColor: t.palette[i],\n        },\n        emphasis: {\n          lineStyle: { width: 5 },\n          areaStyle: { opacity: 0.45 },\n        },\n      })),\n    },\n  ],\n});\n"}