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

      var data =180,
    maxdata = 300;
const radius = ['88%', '94%'];
const splitColor = 'red';
const innerColor = ['#52d7ae', 'rgba(254,134,64,1)'];
const fontColor = '#ff4e09';
let title = {
    text: '通用流量已用',
    subtext: data + 'GB',
    x: 'center',
    y: '40%',
    textStyle: {
        color: fontColor,
        fontSize: 16,
    },
    subtextStyle: {
        color: fontColor,
        fontSize: 24,
    },
};
option = {
    backgroundColor: '#000',
    toolbox: {
        feature: {},
    },
    title: title,
    animationDuration: 10000,
    series: [
        // 底色圈
        {
            type: 'pie',
            radius: radius,
            hoverAnimation: false,
            startAngle: 180,
            endAngle:0,
            label: {
                show: true,
            },
            labelLine: {
                show: false,
            },
            animation: false,
            data: [
                {
                    value: 180,
                    itemStyle: {
                        color: innerColor[1],
                    },
                },
                {
                    value: 180,
                    itemStyle: {
                        opacity: 0,
                        color: '#0fffff',
                    },
                },
            ],
        },

        // 刻度线
        {
            name: '刻度2',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '84%',
            startAngle: 180,
            endAngle: 0,
            splitNumber: 1, //刻度数量
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: [[1, 'rgba(0,0,0,0)']],
                },
            }, //分隔线样式。
            splitLine: {
                show: true,

                length: 12,
                lineStyle: {
                    width: 4,
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: true,
                splitNumber: 20,//
                length: 12,
                lineStyle: {
                    width: 2,
                    color: splitColor,
                },
            },

            detail: {
                show: false,
            },
            title: {
                show: false,
            },
        },
        {
            name: '',
            type: 'gauge',
            min: 0,
            max: maxdata,
            radius: '96%',
            splitNumber: 1, //刻度数量
            startAngle: 180,
            endAngle:0,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: [[1, 'rgba(0,200,200,1)']],
                },
            },
            //分隔线样式。
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
                fontSize: 16,
                color: '#f00',
                formatter: '{value}',
                distance: -35,
                padding: [35, 0, 0, 0],
            },
            axisTick: {
                show: false,
            },
            pointer: {
                show: true,
                width: 4,
                length: '100%',
            },
            itemStyle: {
                color: 'red',
            },
            detail: {
                show: false,
            },
            title: {
                show: false,
            },
        },

        // 仪表盘值得渐变
        {
            type: 'pie',
            radius: radius,
            hoverAnimation: false,
            startAngle: 180,
            endAngle: 0,
            label: {
                show: false,
            },
            labelLine: {
                show: false,
            },
            data: [
                {
                    name: '',
                    value: data / maxdata,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: innerColor[0],
                            },
                            {
                                offset: 1,
                                color: innerColor[1],
                            },
                        ]),
                    },
                },
                {
                    value: 1.325 - data / maxdata,
                    itemStyle: {
                        opacity: 0,
                        color: 'rgba(255,255,255,0)',
                    },
                },
            ],
        },

        // 值得尾巴

        {
            type: 'pie',
            radius: ['88%', '92%'],
            hoverAnimation: false,
            startAngle: 180,
            endAngle: 0,
            data: [
                {
                    name: '',
                    value: data / maxdata,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                    },
                },
                {
                    //画中间的图标
                    name: '',
                    value: 0,
                    label: {
                        position: 'inside',
                        backgroundColor: fontColor,
                        borderRadius: 12,
                        padding: 12,
                        borderWidth: 2,
                        borderColor: '#fff',
                    },
                },
                {
                    name: '',
                    value: 1.325 - data / maxdata,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    itemStyle: {
                        color: 'rgba(255,255,255,0)',
                    },
                },
            ],
        },
    ],
};