| (window.webpackJsonp=window.webpackJsonp||[]).push([[19],{313:function(e,n,t){"use strict";t.r(n),n.default="# Doughnut Chart\n\nDoughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.\n\n## Basic Doughnut Chart\n\nIn ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.\n\nThe bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.\n\n```js live\noption = {\n title: {\n text: 'A Case of Doughnut Chart',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n```\n\nIf we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.\n\n## Show Text In Middle Of Doughnut From Highlighted Sector\n\nThe previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix `label` in the middle of the chart while hiding `label` in default.\n\n```js live\noption = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n```\n\nIn this case, `avoidLabelOverlap` is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of `avoidLabelOverlap` is `true`. We want the label to be fixed in the middle so that we need to define it as `false`.\n\nTherefore, the middle of doughnut chart will show the `name` of the highlighted sector.\n"}}]); |