{"spec_id":"donut-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 90/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: echarts 5.5.1 | JavaScript 22\n// Quality: pending | Created: 2026-06-25\n\nconst t = window.ANYPLOT_TOKENS;\nconst size = window.ANYPLOT_SIZE;\n\n// Data — technology company annual budget allocation\nconst segments = [\n  { name: \"R&D\", value: 34 },\n  { name: \"Marketing\", value: 22 },\n  { name: \"Operations\", value: 18 },\n  { name: \"HR & Admin\", value: 12 },\n  { name: \"Infrastructure\", value: 9 },\n  { name: \"Legal & Finance\", value: 5 },\n];\n\nconst cx = size.width * 0.50;\nconst cy = size.height * 0.46;\n\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n\n  title: {\n    text: \"donut-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n\n  legend: {\n    orient: \"horizontal\",\n    bottom: \"4%\",\n    left: \"center\",\n    itemWidth: 14,\n    itemHeight: 14,\n    itemGap: 20,\n    textStyle: { color: t.inkSoft, fontSize: 16 },\n  },\n\n  graphic: [\n    {\n      type: \"text\",\n      style: {\n        text: \"Budget\",\n        x: cx,\n        y: cy - 22,\n        textAlign: \"center\",\n        fill: t.ink,\n        fontSize: 26,\n        fontWeight: \"bold\",\n      },\n    },\n    {\n      type: \"text\",\n      style: {\n        text: \"Allocation\",\n        x: cx,\n        y: cy + 12,\n        textAlign: \"center\",\n        fill: t.inkSoft,\n        fontSize: 18,\n      },\n    },\n  ],\n\n  series: [\n    {\n      type: \"pie\",\n      radius: [\"38%\", \"65%\"],\n      center: [\"50%\", \"46%\"],\n      avoidLabelOverlap: true,\n      data: segments,\n      label: {\n        show: true,\n        position: \"outside\",\n        formatter: \"{d}%\",\n        color: t.ink,\n        fontSize: 16,\n        fontWeight: \"bold\",\n      },\n      labelLine: {\n        lineStyle: { color: t.inkSoft, width: 1.5 },\n        length: 15,\n        length2: 25,\n      },\n      itemStyle: {\n        borderWidth: 3,\n        borderColor: t.pageBg,\n        borderRadius: 3,\n      },\n      emphasis: { disabled: true },\n    },\n  ],\n});\n"}