Echarts饼图的相关联系

Echarts文档对一些东西介绍的不是很明确，这里对用到过得饼形图先关图标进行总结

<div class="box" id="charts-renci" style="height:200px;width:100%"></div>
<script>
  var chartBar_renci = echarts.init(document.getElementById('charts-renci'));
            var labelTop = {//设置圆环中的文字
                normal: {
                    label: {
                        show: true,
                        position: 'center',
                        formatter: '{b}',
                        textStyle: {
                            baseline: 'bottom'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            };
            var labelFromatter = {//不知道是干啥的
                normal: {
                    label: {
                        formatter: function (params) {
                            return 100 - params.value + '%'
                        },
                        textStyle: {
                            baseline: 'top'
                        },
                        color: [ '#299EED']
                    }
                },
            }
            var labelBottom = {
                normal: {
                    color: '#ccc',//设置多余圆环的颜色
                    label: {
                        show: true,
                        position: 'center'//设置百分比显示的位置
                    },
                    labelLine: {
                        show: false
                    }
                },
                emphasis: {
                    color: '#ccc'
                }
            };
            var radius = [45, 50];//设置半径，第一个值是内半径，第二值是外半径
            var option = {
                color: ['#0287D1', '#43B26F', '#72BAE3'], //设置饼图的颜色
                toolbox: {//如果把整个toolbox删去，会报错，不知道原因是啥，希望看到的小伙伴可以指正一下！！！
                    show: false,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    width: '20%',
                                    height: '30%',
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                formatter: function (params) {
                                                    return 'other\n' + params.value + '%\n'
                                                },
                                                textStyle: {
                                                    baseline: 'middle'
                                                }
                                            }
                                        },
                                    }
                                }
                            }
                        },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
             
                        type: 'pie',
                        center: ['18%', '30%'],//圆形
                        radius: radius,
                        x: '0%', // for funnel
                        itemStyle: labelFromatter,
                        data: [
                            { name: 'other', value: 56, itemStyle: labelBottom },
                            { name: 'cpu占有率', value: 44, itemStyle: labelTop }
                        ]
                    },
                    {
                        type: 'pie',
                        center: ['50.5%', '30%'],
                        radius: radius,
                        x: '20%', // for funnel
                        itemStyle: labelFromatter,
                        data: [
                            { name: 'other', value: 56, itemStyle: labelBottom },
                            { name: '内存使用率', value: 44, itemStyle: labelTop }
                        ]
                    },
                    
                    {
                        type: 'pie',
                        center: ['83%', '30%'],
                        radius: radius,
                        y: '55%',   // for funnel
                        x: '80%', // for funnel
                        itemStyle: labelFromatter,
                        data: [
                            { name: 'other', value: 56, itemStyle: labelBottom },
                            { name: 'cpu占有率', value: 44, itemStyle: labelTop }
                        ]
                    }
                ]
            };
            chartBar_renci.setOption(option);
            window.onload = function () {//用来设置图表的自适应
                window.onresize = function () {
                    chartBar_renci.resize();
                }
            }
</script>