Shulou(Shulou.com)06/03 Report--

This article shows you how to use ECharts to make a pie chart, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In the case of the need to calculate the proportion of each part of the total cost or amount, it is usually calculated by dividing each part from the total amount, and this proportional representation method is very abstract. We can use a pie chart tool, which can directly and visually display the proportion of each component in a graphical way.

Combined with examples to share the access source function of the website analysis tools often used by webmasters, we use Echarts to make a pie chart to show the proportion of data of different categories (access sources) in the total.

HTML

As described in previous articles, first introduce Echarts, then add p#myChart where you need to place the chart, and add width and height attributes to it.

/ / initialize the echarts instance var myChart = echarts.init (document.getElementById ('myChart')) based on the prepared dom Option = {tooltip: {trigger: 'item', formatter: "{a} {b}: {c} ({d}%)"}, legend: {orient:' horizontal', left: 'center', bottom: 0, data: [' direct access', 'other foreign chains', 'search engine', 'directly enter URL or bookmark', 'cnblogs.com',' Weibo', 'Wechat', 'Baidu', 'Google', '360 Bing' 'other']}, series: [{name:' access source', / / inner ring type:'pie', selectedMode: 'single', / / single selected mode radius: [0,' 30%'], / / the radius of the pie chart [inner radius Outer radius] label: {normal: {position: 'inner' / / built-in text label}}, labelLine: {normal: {show: false / / No guide}, data: [{value:335, name:' direct', selected:true}, {value:679, name:' other external chains'}, {value:1548, name:' search engine'}]}, {name:' access source', type:'pie' Radius: ['40% website,'55%'], data: [{value:335, name:' directly enter URL or bookmark'}, {value:310, name:'cnblogs.com'}, {value:234, name:' Weibo'}, {value:135, name:' Wechat'}, {value:1048, name:' Baidu'}, {value:251, name:' Google'}, {value:147, name:'360'}, {value:42 Name:' Bing'}, {value:60, name:' other'}]}} / / display the chart using the configuration items and data you just specified. MyChart.setOption (option)

In the above code, two transformations are drawn, the inner ring and the outer ring, the inner ring is a large class, in this case there are three large classes, and the outer ring is a small class corresponding to three large classes. For example, under the classification of access sources for search engines, there are several major search engines such as Baidu and Google 360, which can directly reflect the proportion of each category from the chart. Of course, the proportion of categories will be displayed when the mouse is on the chart.

The pie chart is more suitable to show the relationship such as the percentage of data to the total, and the Radian of each represents the proportion of the number of data. If you only represent the size of different categories of data, it is recommended to use a bar chart, people are less sensitive to small radians than small length differences, or you can configure the pie chart parameter roseType to display as a Nightingale chart to distinguish the size of the data by radius.

The above content is how to use ECharts to make pie chart. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.