{"spec_id":"pie-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// pie-basic: Basic Pie Chart\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 93/100 | Created: 2026-06-02\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Data — FY25 operating budget allocation by department, % of total.\nconst allocation = [\n  { name: \"Engineering\",       value: 42 },\n  { name: \"Sales & Marketing\", value: 23 },\n  { name: \"Operations\",        value: 14 },\n  { name: \"Customer Success\",  value: 11 },\n  { name: \"R&D\",               value: 7  },\n  { name: \"General & Admin\",   value: 3  },\n];\n\n// Pull out the largest slice for emphasis (per the spec).\nlet largestIndex = 0;\nfor (let i = 1; i < allocation.length; i++) {\n  if (allocation[i].value > allocation[largestIndex].value) largestIndex = i;\n}\n\n// Per-slice overrides: tiny wedges (<5%) get outside labels with a leader line\n// so the percentage doesn't get squeezed against the slice border.\nconst SMALL_SLICE_THRESHOLD = 5;\nconst data = allocation.map((d, i) => {\n  const item = { ...d, selected: i === largestIndex };\n  if (d.value < SMALL_SLICE_THRESHOLD) {\n    item.label = {\n      position: \"outside\",\n      color: t.inkSoft,\n      fontSize: 22,\n      fontWeight: 600,\n      formatter: \"{d}%\",\n    };\n    item.labelLine = {\n      show: true,\n      length: 14,\n      length2: 18,\n      lineStyle: { color: t.inkSoft, width: 1.5 },\n    };\n  }\n  return item;\n});\n\n// Init — fill the pre-sized #container; the harness handles size + DPR.\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"pie-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 28,\n    textStyle: { color: t.ink, fontSize: 32, fontWeight: 500 },\n  },\n  legend: {\n    orient: \"horizontal\",\n    bottom: 32,\n    left: \"center\",\n    icon: \"roundRect\",\n    itemWidth: 26,\n    itemHeight: 16,\n    itemGap: 28,\n    textStyle: { color: t.inkSoft, fontSize: 22 },\n  },\n  tooltip: {\n    trigger: \"item\",\n    formatter: \"{b}: {d}%\",\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    textStyle: { color: t.ink, fontSize: 18 },\n  },\n  series: [\n    {\n      name: \"Budget allocation\",\n      type: \"pie\",\n      radius: [\"0%\", \"60%\"],\n      center: [\"50%\", \"52%\"],\n      startAngle: 90,\n      selectedMode: \"single\",\n      selectedOffset: 40,\n      avoidLabelOverlap: true,\n      data,\n      label: {\n        position: \"inside\",\n        color: \"#FFFDF6\",\n        fontSize: 24,\n        fontWeight: 600,\n        formatter: \"{d}%\",\n      },\n      labelLine: { show: false },\n      itemStyle: {\n        borderColor: t.pageBg,\n        borderWidth: 3,\n      },\n      emphasis: { disabled: true },\n    },\n  ],\n});\n\n// Signal render-complete to the harness so the screenshot is taken\n// only after ECharts finishes drawing.\nwindow.__anyplotReady = false;\nchart.on(\"finished\", () => { window.__anyplotReady = true; });\n"}