关于javascript:echart饼图带负值类型混合显示

先看图有个大略脑回路

如果繁多维度很好了解，所有值一填 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);