Echarts3实例 南丁格尔饼图

实现效果

知识点

• 图例垂直，位置
• 饼图位置
• 设置多种颜色
• Tooltip格式化

代码实现

option = {
        title: {
            text: '管线管龄分类统计',
            top:10,
            left:10
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}公里 ({d}%)"
        },
        toolbox: {
            show : true,
            top:10,
            right:10,
            feature : {
                saveAsImage : {show: true}
            }
        },
        grid:{
            top:60,
            right:20,
            bottom:30,
            left:60
        },
        legend: {
            orient: 'vertical',
            top:40,
            left: 20,
            data: ['不足10年','10~20年','20~30年','30~40年','40~50年','无记录日期']
        },
        series : [
            {
                name:'管线管龄',
                type:'pie',
                radius : '70%',
                center: ['55%', '55%'],
                data:[
                    {value:335, name:'不足10年'},
                    {value:310, name:'10~20年'},
                    {value:274, name:'20~30年'},
                    {value:235, name:'30~40年'},
                    {value:400, name:'40~50年'},
                    {value:260, name:'无记录日期'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }