Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Pie and Donut Charts | Advanced Chart Types
JavaScript Data Visualization with ECharts

bookPie and Donut Charts

index.html

index.html

script.js

script.js

copy

Pie and donut charts are essential for visualizing proportions and comparing parts of a whole. With ECharts, you can create both types of charts using the pie series, but their appearance and configuration options allow for clear distinction and customization.

To create a pie chart, set the type to "pie" within the series array. The data property should include an array of objects, each with a value and a name to represent each category. The radius property controls the size of the pie. For a standard pie chart, use a single percentage value such as "70%" for the radius. The label property allows you to format the text shown on each slice. For example, using the formatter '{b}: {d}%' displays the category name and its percentage. You can further enhance the chart by customizing colors with the color array and adding a legend for clarity.

To create a donut chart, you still use the pie series type, but set the radius property as an array with two values, such as ['50%', '75%']. This creates a hole in the center, giving the chart its characteristic donut appearance. The inner and outer percentages control the thickness of the donut. Label formatting works the same way, and you can use the legend and color options to match your dashboard's style.

Customizing colors helps distinguish categories and improves readability. The color array lets you assign a specific palette to match your branding or to highlight certain data. Adjusting label formatting with placeholders like {b} for the name and {d} for the percentage lets you control how much detail is shown on each slice.

Pie and donut charts are ideal when you want to emphasize proportions, such as sales distribution or device usage. By fine-tuning the configuration, label formatting, and colors, you can create visually appealing charts that communicate data clearly on your dashboard.

question mark

What is the main visual difference between a pie chart and a donut chart in ECharts?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me an example ECharts configuration for a pie chart?

How do I customize the labels on a donut chart?

What are some best practices for choosing colors in pie and donut charts?

bookPie and Donut Charts

Deslize para mostrar o menu

index.html

index.html

script.js

script.js

copy

Pie and donut charts are essential for visualizing proportions and comparing parts of a whole. With ECharts, you can create both types of charts using the pie series, but their appearance and configuration options allow for clear distinction and customization.

To create a pie chart, set the type to "pie" within the series array. The data property should include an array of objects, each with a value and a name to represent each category. The radius property controls the size of the pie. For a standard pie chart, use a single percentage value such as "70%" for the radius. The label property allows you to format the text shown on each slice. For example, using the formatter '{b}: {d}%' displays the category name and its percentage. You can further enhance the chart by customizing colors with the color array and adding a legend for clarity.

To create a donut chart, you still use the pie series type, but set the radius property as an array with two values, such as ['50%', '75%']. This creates a hole in the center, giving the chart its characteristic donut appearance. The inner and outer percentages control the thickness of the donut. Label formatting works the same way, and you can use the legend and color options to match your dashboard's style.

Customizing colors helps distinguish categories and improves readability. The color array lets you assign a specific palette to match your branding or to highlight certain data. Adjusting label formatting with placeholders like {b} for the name and {d} for the percentage lets you control how much detail is shown on each slice.

Pie and donut charts are ideal when you want to emphasize proportions, such as sales distribution or device usage. By fine-tuning the configuration, label formatting, and colors, you can create visually appealing charts that communicate data clearly on your dashboard.

question mark

What is the main visual difference between a pie chart and a donut chart in ECharts?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1
some-alt