仪表盘echarts 饼配置项内容和展示

生成奇怪的效果

      var value = 10;
var option = {
    backgroundColor: "transparent",
    xAxis: {
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    series: [
        // 内圆
        {
            type: 'pie',
            radius: ['0', '45%'],
            center: ['50%', '50%'],
            z: 4,
            label: {
                normal: {
                    position: "center",

                }
            },
            hoverAnimation: false,
            data: [{
                name: '剩余天数',
                value: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#3f2c75'
                        }, {
                            offset: 0.5,
                            color: '#a290d5'
                        }, {
                            offset: 1,
                            color: '#3f2c75'
                        }])
                    }

                },
                label: {
                    normal: {
                        rich: {
                            a: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 23,
                                fontWeight: "normal"
                            },
                            b: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 54
                            },
                            c: {
                                color: '#fff',
                                align: 'center',
                                fontSize: 22
                            }

                        },
                        formatter: function(params) {
                            return "{a|" + "剩余天数" + "}\n\n" + "{b|" + params.value + "}" + "{c|天}";
                        },
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'normal',
                            color: '#fff'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }

                }
            }],
        },
        //进度图
        {
            type: 'gauge',
            radius: '60%',
            center: ['50%', '50%'],
            min: 0,
            max: 1000,
            z: 5,
            splitNumber: 0, //刻度数量
            startAngle: 220,
            endAngle: -40,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 20,
                    color: [
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#3f2c75'
                                    },
                                    {
                                        offset: 1,
                                        color: '#a290d5'
                                    }
                                ]
                            )
                        ]
                    ]
                }
            },
            //分隔线样式。
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            pointer: {
                show: false
            },
            title: {
                show: false,
                offsetCenter: [0, '-20%'], // x, y，单位px
                textStyle: {
                    color: '#ddd',
                    fontSize: 11
                }
            },
            //仪表盘详情，用于显示数据。
            detail: {
                show: false,
                offsetCenter: [0, '10%'],
                color: '#ddd',
                formatter: function(params) {
                    return params
                },
                textStyle: {
                    fontSize: 60
                }
            },
            data: [{
                name: "在线数量",
                value: 11111111111111111
            }]
        },
        //刻度尺
        {
            // name: "白色圈刻度",
            type: "gauge",
            radius: "67%",
            startAngle: 220,
            endAngle: -40,
            z: 2,
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#3f2c75',
                    width: 1
                },
                length: -8
            }, //刻度样式
            splitLine: {
                show: true,
                length: -20,
                lineStyle: {
                    color: '#3f2c75'
                }
            }, //分隔线样式
            axisLabel: {
                color: 'rgba(255,255,255,0)',
                fontSize: 12,
            }, //刻度节点文字颜色
            pointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    opacity: 0
                }
            },
            title: {
                show: true,
                offsetCenter: [-65, '84%'], // x, y，单位px
                textStyle: {
                    color: '#ddd',
                    fontSize: 11
                }
            },
            //仪表盘详情，用于显示数据。
            detail: {
                show: true,
                offsetCenter: [0, '84%'],
                color: '#ddd',
                formatter: function(params) {
                    return ''
                },
                textStyle: {
                    fontSize: 28
                }
            }
        },
    ]
}