先看图有个大略脑回路

如果繁多维度很好了解,所有值一填echarts主动算占比。然而需要不是这样的。类型一到类型六视为100%,其余类型视为100%。

思路:
1、筹备两个饼图叠加z:1层展示类型,z:2层展示其余类型,第一层挖走330度,第二层挖走30度留白给第一层的类型让地位。

干货code:

    var myChart = echarts.init(document.getElementById('youid'));        option = {            backgroundColor: 'rgba(255, 255, 255, 0)',            title: {                left: 'center',                text: 'yourtitle',                textStyle: {                    color: '#3c3c3c',                    fontSize: 14,                    lineHeight: 1,                    fontWeight: 'bold'                },                top: 10            },            toolbox: {                feature: {                    saveAsImage: {}                }            },            grid: {                top: '0%',                left: '5%',                right: '5%',                bottom: '5%',                containLabel: true,            },            graphic: {                elements: [{                    type: 'image',                    style: {                        width: 40,                        height: 40                    },                    left: 'center',                    top: 'center'                }]            },            series: [                {                    name: "类型",                    type: 'pie',                    z:2,                    minAngle: 30,                    radius: ['10%', '45%'],                    center: ['50%', '50%'],                    color: ['#0864A1', '#FFC100', '#47B5FF', '#476DB4', '#70AD47', '#ED7D31', '#47B5FF','#FF5218'],                    data: [                        {                            value: 0,                            itemStyle: {                                normal: {                                    color: "transparent"                                }                            }                        },                        {                            value: 2.96,                            name: '类型一'                        },                        {                            value: 0.72,                            name: '类型二'                        },                        {                            value: 2.68,                            name: '类型三'                        },                        {                            value: 9.22,                            name: '类型四'                        },                        {                            value: 18.26,                            name: '类型五'                        },                        {                            value: 0.66,                            name: '类型六'                        },                    ],                    label: {                        normal: {                            formatter: '{c|{b}}\n{d|{d}%}',                            rich: {                                b: {                                    fontSize: 12,                                    color: '#12EABE',                                    align: 'left',                                    padding: 4                                },                                d: {                                    fontSize: 12,                                    align: 'left',                                    padding: 2                                },                                c: {                                    color: '#3c3c3c',                                    fontSize: 12,                                    align: 'left',                                    padding: 2                                }                            }                        }                    }                },                {                    name: "其余类型",                    type: 'pie',                    minAngle: 330,                    z:1,                    radius: ['10%', '55%'],                    center: ['50%', '50%'],                    data: [                        {                            value: 10,                            name: '其余类型',                            selected:true,                        },                        {                            value: 0,                            name: '',                            itemStyle: {                                normal: {                                    color: "transparent"                                }                            }                        },                    ],                    label: {                        normal: {                            formatter: '{c|{b}}\n{d|-16%}',                            rich: {                                b: {                                    fontSize: 12,                                    color: '#12EABE',                                    align: 'left',                                    padding: 4                                },                                d: {                                    fontSize: 12,                                    align: 'left',                                    padding: 2                                },                                c: {                                    color: '#3c3c3c',                                    fontSize: 12,                                    align: 'left',                                    padding: 2                                }                            }                        }                    }                }                        ]        };        // 应用刚指定的配置项和数据显示图表。        myChart.setOption(option);