目录
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要 xAxis,yAxis。
1、第一个简单的饼图
var option={
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:[ // 数据数组,name 为数据项名称,value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};
2、南丁格尔图
可以通过设置参数 roseType: 'angle' 显示。
option = {
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
};
3、嵌套式饼图
echarts绘制嵌套式饼图,需要设置series.type为’pie’,并设置不同的series.radius和series.center来控制每个饼图的大小和位置
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: [0, '30%'],
data: [
{value: 1200, name: '计算机学院'},
{value: 900, name: '大数据学院'},
{value: 600, name: '财经学院'}
]
},
{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'],
data: [
{value: 800, name: "软件技术"},
{value: 400, name: "移动应用技术"},
{value: 400, name: "大数据技术与应用"},
{value: 300, name: "移动互联应用技术"},
{value: 200, name: "云计算机技术与应用"},
{value: 400, name: "投资与理财"},
{value: 200, name: "财务管理"},
]
}
]
};