In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-05 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article mainly introduces "how to use ECharts to draw pie chart and ring chart". In daily operation, I believe many people have doubts about how to use ECharts to draw pie chart and ring chart. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to draw pie chart and ring chart with ECharts". Next, please follow the editor to study!
Let's make a basic pie chart and set the type parameter value of series in Echarts to pie, as shown in figure 4-14.
The code is as follows:
Option = {title: {text: 'proportion of sales volume of each commodity', subtext: 'analysis of the situation in A store', left: 'center'}, tooltip: {trigger:' item', formatter:'{a} {b}: {c} ({d}%)'}, legend: {orient: 'vertical' Left: 'left', data: [' A goods','B goods','C goods','D goods','E goods']}, series: [{name: 'goods sold', type: 'pie', data: [{value: 343 Name:'A Commodity'}, {value: 250, name:'B Commodity'}, {value: 509, name:'C Commodity'}, {value: 108, name:'D Commodity'}, {value: 948, name:'e Commodity'}],}]}
▲ figure 4-14 pie chart
In the above code, legend is set to vertical to avoid overlap with the title when displayed horizontally. Here, the display format of tooltip is set to: formatter:'{a}
{b}: {c} ({d}%)', the specific meanings of the parameters in the pie chart are: {a} (series name), {b} (data item name), {c} (numerical value), {d} (percentage). When the mouse hovers over a piece of cake, the piece of cake is highlighted and text and values are displayed in formatter format.
It should be noted that when we click on the legend of the pie chart, such as clicking on the legend of C goods, the legend of C goods will turn gray, at the same time, the pie blocks of C goods will no longer be displayed in the pie chart, and the percentage will be recalculated, as shown in figure 4-15.
▲ figure 4-15 pie chart display control
In addition to the basic pie chart, we often use a ring chart. In ECharts, add the radius parameter to series to draw a ring graph, such as radius in the following code: ['50% radius,'70%'], which represents the proportion of the inner radius and the outer radius of the ring is 50% and 70%, respectively.
Option = {title: {text: 'proportion of sales volume of each commodity', subtext: 'analysis of the situation in A store', left: 'center'}, tooltip: {trigger:' item', formatter:'{a} {b}: {c} ({d}%)'}, legend: {orient: 'vertical' Left: 'left', data: [' A merchandise','B merchandise','C merchandise','D merchandise','E merchandise']}, series: [{name: 'goods sold', type: 'pie', radius: [' 50%','70%'] Data: [{value: 343, name:'A Commodity'}, {value: 250, name:'B Commodity'}, {value: 509, name:'C Commodity'}, {value: 108, name:'d Commodity'}, {value: 948 Name:'e goods'}],}]}
The visualization result of the ring diagram is shown in figure 4-16.
▲ figure 4-16 ring chart
At this point, the study on "how to draw pie chart and ring chart with ECharts" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.