Echarts饼图全面解析

一、Echarts饼图显示百分比

Echarts饼图中显示每个饼图数据占比是必不可少的，可以通过配置formatter实现在饼图上显示数据的百分比。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                formatter: '{b}:{d}%'
            }
        }
    ]
};

二、Echarts饼图标签布局

Echarts饼图中，label布局有两种：两端对齐和居中对齐。两端对齐可以通过设置align配置项来实现，而居中对齐则通过设置position来实现。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                formatter: '{b}:{d}%',
                align: 'left', // 两端对齐
                // position: 'center' // 居中对齐
            }
        }
    ]
};

三、Echarts饼图圆角

Echarts饼图中，可以通过设置圆角半径实现饼图的圆角效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                borderRadius: 10 // 圆角半径
            }
        }
    ]
};

四、Echarts饼图位置调整

Echarts饼图中，可以通过设置center和radius属性调整饼图的位置和大小。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            center: ['50%', '50%'], // 饼图中心位置
            radius: ['50%', '70%'] // 饼图半径
        }
    ]
};

五、Echarts饼图位置设置

Echarts饼图中，可以通过设置position和offset属性调整饼图的位置。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            label: {
                position: 'inner', // label位置：在内部
                offset: [-10, 10] // label的偏移值
            }
        }
    ]
};

六、Echarts饼图引导线

Echarts饼图中，可以通过设置labelLine实现引导线的效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            labelLine: {
                length: 30, // 引导线长度
                smooth: true // 引导线是否平滑
            }
        }
    ]
};

七、Echarts饼图间隙

Echarts饼图中，可以通过设置roseType和roseType属性实现饼图的间隙效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            roseType: 'angle', // 多个饼图之间有间隙，称为扇形图
            // roseType: 'radius', // 多个饼图之间没有间隙，称为玫瑰图
            itemStyle: {
                borderRadius: 10 // 圆角半径
            }
        }
    ]
};

八、Echarts饼图中间文字

Echarts饼图中，可以通过设置graphcText.position，为饼图添加中间文字（类似于”总数”，“总计”等）。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            graphic: {
                type: "text",
                left: "center",
                top: "center",
                style: {
                    text: '总计',
                    fontWeight: 'bold',
                    fontSize: 20
                }
            }
        }
    ]
};

九、Echarts饼图legend选择

Echarts饼图中，可以通过设置legend.data属性来选择展示哪些数据项。

option = {
    legend: {
        data:['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};