嵌套饼图外层圆圈ECharts Gallery

20:11:45图表已生成
代码
let echartData = {
    inner: [
        {
            value: 30,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 10,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 15,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 16,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 15,
            unit: '件',
            name: '第五检查部'
        }
    ],
    outer: [
        {
            value: 10,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 3,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 4,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 4,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 3,
            unit: '件',
            name: '第五检查部'
        }
    ]
}

// 获取图例数据
var arrName = getArrayValue(echartData.outer , "name");

function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
        array.forEach(function(t) {
            res.push(t[key]);
        });
    }
    return res;
}


option = {
     title: [{
        text: '内环：案数\n外环：件数',
        top: 'center',
        left: '33.5%',
        textStyle: {
            fontSize: 22,
            color:'#2e8fe6',
            lineHeight: 26,
            fontWeight: 400
        }
    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    color: ['#f8cd57', '#5dd286', '#53c9c8', '#489ee5', '#436fce'],
    legend: {
        show: true,
        top: "center",
        left: '80%',
        data: arrName,
        itemWidth: 20,
        itemHeight: 20,
        padding: [0, 5],
        itemGap: 25,
        textStyle: {
            color: '#b0b9cb'
        },
        formatter: function(name) {
            return name + '    ' + '1.32'
            // return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
        },
    },
    series: [
         //最外层圆环
        {
            name: '圆圈',
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['79%', '80%'],
            center: ["40%", "50%"],
            hoverAnimation: false,
            color: "#7eb3fb",
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[{
                value: 1,
                name: '30天以内未发还金额',
                 itemStyle:{
                    normal: {
                        color: '#99c3fc'
                    }
                }
            }]
        },
      
        {
            name: '外环',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ["40%", "50%"],
            startAngle: '240',
            data: echartData.outer,
            labelLine: {
                normal: {
                    length: 20,
                    length2: 140,
                    lineStyle: {
                        color: '#e6e6e6'
                    }
                }
            },
            itemStyle: { // 此配置
                normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: params => {
                        return (
                            params.value + '件'
                        );
                    },
                    fontSize: 22,
                    color: '#000',
                    // padding: [0, -130, 25, -130],
                }
            },
        },
        
        {
            name: '内环',
            type: 'pie',
            radius: ['25%', '50%'],
            center: ["40%", "50%"],
            itemStyle: { // 此配置
               normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: params => {
                        return (
                            params.value + '件'
                        );
                    },
                    fontSize: 22,
                    color: '#000',
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            startAngle: '230',
            data: echartData.inner
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
