ECharts pie chart

We have learned to draw a simple bar chart using ECharts in the previous section, and we will draw a pie chart in this chapter.

Pie chart is mainly through the fan-shaped Radian to show the proportion of different categories of data in the sum, its data format is simpler than thebar chart, only one-dimensional value, there is no need to give categories.Because it is not in the Cartesian coordinate system, xAxis,yAxisis not required.

Example

myChart.setOption({series:[{name:'Referrer',type:'pie',//
Set chart type to pie chart radius:'55%',//The radius of the pie chart,
with the outer radius being 55% of the length of the visible area size
(the smaller of the container height and width).
data:[//Data，name is the name of the data item，Value is the value of the data item{value:235,name:'Video AD'},{value:274,name:'Alliance advertising'},{value:310,name:'email marketing'},{value:335,name:'Direct Access'},{value:400,name:'Search Engines'}]}]})

We can also set parameters roseType: 'angle' show the pie chart as a Nightingale chart.

Example

option={series:[{name:'Referrer',type:'pie',radius:'55%',roseType:'angle',data:[{value:235,name:'Video AD'},{value:274,name:'Alliance advertising'},{value:310,name:'email marketing'},{value:335,name:'Direct Access'},{value:400,name:'Search Engines'}]}]};

Configuration of Shadow

itemStyle parameters can be set such as shadow, transparency, color, border color, border width, and so on:

Example

option={series:[{name:'Referrer',type:'pie',radius:'55%',data:[{value:235,name:'Video AD'},{value:274,name:'Alliance advertising'},{value:310,name:'email marketing'},{value:335,name:'Direct Access'},{value:400,name:'Search Engines'}],roseType:'angle',itemStyle:{normal:{shadowBlur:200,shadowColor:'rgba(0,
0, 0, 0.5)'}}}]};