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. We can also set parameters 9.4.1. 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'}]}]})
roseType:
'angle'
show the pie chart as a Nightingale chart. 9.4.2. 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: 9.4.3. 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)'}}}]};