Example of creating a pie chart using jquery ECharts

In the event of a situation in which a proportion of the total cost or amount is to be calculated, generally, it is calculated by dividing the parts into the total, and the scale representation is abstract, and we can use a pie chart tool to visually visualize the proportions of each component directly in a graphical way.

This article unifies the example to share the webmaster frequently to use the Website analysis tool The access source function, we use echarts to make the pie chart, uses in the performance not similar target (access source) the data in the sum's proportion.
Html

As described in previous articles, first introduce echarts, and then add Div#mychart to the place where you want to place the chart, plus the width and height attributes.

<script src= "Echarts.min.js" ></script>

<div id= "MyChart" style= "width:600px;height:400px;" ></div>
Javascript

Now you want to initialize the Echarts instance, then set the options, and finally render the image.
Initializes the Echarts instance based on the prepared DOM

var MyChart = echarts.init (document.getElementById (' MyChart '));

option = {
ToolTip: {
Trigger: ' Item ',
Formatter: "{A} <br/>{b}: {C} ({d}%)"
},
Legend: {
Orient: ' Horizontal ',
Left: ' Center ',
bottom:0,
data:[' direct ', ' other outer chain ', ' Search engine ', ' direct input URL or bookmark ', ' cnblogs.com ', ' Weibo ', ' micro-letter ', ' Baidu ', ' Google ', ' 360 ', ' Bing ', ' other '
},
Series: [
{
Name: ' Access source ',//inner ring
Type: ' Pie ',
Selectedmode: ' single ',//select 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 need to set the guide line
}
},
data:[
{value:335, Name: ' Direct ', selected:true},
{value:679, Name: ' Other outer chain '},
{value:1548, Name: ' Search engine '}
]
},
{
Name: ' Access source ',
Type: ' Pie ',
Radius: [' 40% ', ' 55% '],

data:[
{value:335, Name: ' Enter URL or bookmark directly '},
{value:310, Name: ' Cnblogs.com '},
{value:234, Name: ' Weibo '},
{value:135, Name: ' Micro-letter '},
{value:1048, Name: ' Baidu '},
{value:251, name: ' Google '},
{value:147, Name: ' 360 '},
{value:42, Name: ' Bing '},
{value:60, Name: ' Other '}
]
}
]
};

Displays the chart using the configuration items and data that you just specified.
mychart.setoption (option);
The above code, plotted two, inner and outer ring, inner ring is a large class, in this case there are 3 large classes, outer ring is 3 large classes corresponding to the small class. For example, the access source for the search engine classification, there are Baidu, Google 360 and other major search engines, from the chart can visually reflect the proportion of the size of each category, of course, the mouse slide on the chart will show the proportion of the classification figures.
Pie charts are better suited to show the relationship of data relative to the percentage of the total, and each radian represents the proportion of the data quantity. If you are only representing the size of the different data, it is recommended that you use a columnar chart, people are less sensitive to small radian differences than small length differences, or you can configure the pie chart parameters rosetype display Chengdu-Nanchong Dingertu, the size of the data by the size of the radius.
As of this period, we have introduced the Echarts Common chart application, Echarts also has the hot attempt, the chart, the graph and so on application, the interested friend please pay attention to echarts official website, this station Helloweba will no longer write the explanation echarts, Next we will have a better and more practical article to share with you, please pay attention to.