ECharts 饼图

 

目录

 1、第一个简单的饼图

2、南丁格尔图

3、嵌套式饼图

---

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 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: "财务管理"},
                ]
            }
        ]
    };