Echarts3实例南丁格尔饼图

梦里梦外; 2021-09-16 07:06 457阅读 0赞

### 实现效果 ###

![这里写图片描述][70]

### 知识点 ###

*  图例垂直，位置
 *  饼图位置
 *  设置多种颜色
 *  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;
                    }
                }
            ]
        }

[70]: /images/20210726/78973f66920f4b8f8f0d2f1f001d44ba.png