echarts实用篇（一）——饼状图

echarts实用篇（一）——饼状图

---

从官网上我们可以看到通常用到的有这几类：

• 常规饼状图
• 环形图
• 嵌套环形图
• 纹理饼图
• 南丁格尔玫瑰图
• 定制饼状图

下面来看看各类的基本做法，直接使用官网上的例子。

常规饼状图

代码主体：

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

title 配置主标题副标题居中，tooltip 配置提示框显示格式，legend 配置图例标记的位置样式，series 配置主体的数据，饼状图需要基本的 type、radius 、center、data 几项分别设置样式、半径、原点位置和数据。

问题一：如果要自定义扇形区域颜色，怎么办？

我们可以看到上面的例子中并没有提及颜色，每一个扇形区域额颜色实际上都是从全局调色盘 option.color 中获取的，如果想修改，只要按照顺序设置 option.color 的值即可，例如 color:[“red”,”green”] 。

问题二：某个扇形区域的角度太小，鼠标获取位置麻烦或指示不清楚，如何处理？

在 series 有一配置项 minAngle ，作用是配置最小显示角度，用于防止某个值过小导致扇区太小影响交互，取值范围（0 ~ 360）。

问题三：对于值为0的扇形区域应该怎么处理？

在 series 下有一配置项 stillShowZeroSum ，作用是：是否在数据和为0（一般情况下所有数据为0） 的时候不显示扇区。默认为 true，也就意味着默认情况下不显示为0的扇形区域，但是为0的扇形区域的 label 还是会显示的，同时问题二中 minAngle 也会影响，导致 stillShowZeroSum 失效。如果想要为0的扇形区域的 label 也不显示，可以如下设置，

{
    name: leiData[i],
    value: leiTotal,
    itemStyle: {
        normal: {
            label: {
                show: function () {
                    if (leiTotal == 0)
                    { return false; }
                }()
            },
            labelLine: {
                show: function () {
                    if (leiTotal == 0)
                    { return false; }
                }()
            }
        }
    },
}

这意味着要在每一组数据里面添加 itemStyle 配置。很是繁琐，主要是因为它并不像 formatter 一样能通过回调函数设置。

环形图

代码主体：

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
     : [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

只是在常规饼状图的基础上对 series 下的 radius 配置进行修改，radius: [‘50%’, ‘70%’]表示半径范围由 50% 到 70% 。

嵌套环形图

代码主体：

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直达', selected:true},
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1048, name:'百度'},
                {value:251, name:'谷歌'},
                {value:147, name:'必应'},
                {value:102, name:'其他'}
            ]
        }
    ]
};

通过常规饼状图与环状图的整合即可构成嵌套环形图，当然也可以嵌套多个。

纹理饼图

代码主体：

var piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
var bgPatternImg = new Image();
bgPatternImg.src = bgPatternSrc;

var itemStyle = {
    normal: {
        opacity: 0.7,
        color: {
            image: piePatternImg,
            repeat: 'repeat'
        },
        borderWidth: 3,
        borderColor: '#235894'
    }
};
option = {
    backgroundColor: {
        image: bgPatternImg,
        repeat: 'repeat'
    },
    title: {
        text: '饼图纹理',
        textStyle: {
            color: '#235894'
        }
    },
    tooltip: {},
    series: [{
        name: 'pie',
        type: 'pie',
        selectedMode: 'single',
        selectedOffset: 30,
        clockwise: true,
        label: {
            normal: {
                textStyle: {
                    fontSize: 18,
                    color: '#235894'
                }
            }
        },
        labelLine: {
            normal: {
                lineStyle: {
                    color: '#235894'
                }
            }
        },
        data:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
        ],
        itemStyle: itemStyle
    }]
};

纹理图主要是将 color 切换成背景图，上面的例子一方面更换了整体的背景色 backgroundColor ，一方面也修改了扇形区的背景色。

南丁格尔玫瑰图

代码主体：

option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

相比较于常规饼状图，添加配置项 roseType 即可生成玫瑰图，它有 ‘radius’ 和 ‘area’ 两种选择，意味着用半径或面积来体现数值的大小！如果我们给它加上一点阴影就可以得到一点立体的效果，代码如下：

option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle:{
                normal:{

                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetX:10,
                        shadowOffsetY:10

                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            itemStyle:{
                normal:{

                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetX:10,
                        shadowOffsetY:10

                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

但是这种添加阴影的有兼容性的问题，据我所知，在 IE 10 上并不能得到展示，事实上这种玫瑰图的可用性并不高，因为用户浏览时不知道你到底是用什么方式来表现数值的大小的，用户常规思维是角度，半径或面积这样的体现方式在饼状图上还是太少见。

定制饼状图

代码主体：

option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

定制饼状图是指根据需要添加配置项或修改默认的配置，如：

animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
    return Math.random() * 200;
}

用于修改鼠标悬浮的动画方式

data:[
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:274, name:'联盟广告'},
    {value:235, name:'视频广告'},
    {value:400, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),

改变数据的排序方式

visualMap: {
   show: false,
     min: 80,
     max: 600,
     inRange: {
         colorLightness: [0, 1]
     }
 },

根据数值大小配置颜色
这种需要跟随数据变化的通常称为定制饼状图。