TESTecharts radar配置项内容和展示

      function Pie() {
    let dataArr = [];
    for (var i = 0; i < 80; i++) {
        if (i % 10 === 1) {
            dataArr.push({
                name: (i + 0).toString(),
                value: 500,
                itemStyle: {
                    normal: {
                        color: '#8d9094',
                        borderWidth: 0,
                        borderColor: 'rgba(0,0,0,0)',
                    },
                },
            });
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 70,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                        borderColor: 'rgba(0,0,0,0)',
                    },
                },
            });
        }
    }
    return dataArr;
}
option = {
    backgroundColor: '#373d55',
    tooltip: {},
    radar: {
        radius: '60%',
        center: ['50%', '50%'],
        // startAngle: 0,
        splitNumber: 10,
        z: 50,
        nameGap: '15',
        name: {
            textStyle: {
                color: '#8d9094',
                fontSize: 14,
            },
        },
        axisLine: {
            lineStyle: {
                color: '#8d9094',
            },
        },
        splitLine: {
            lineStyle: {
                width: 1,
                color: 'rgba(0,0,0,0)',
                shadowColor: '#fff',
                shadowBlur: 0,
                shadowOffsetX: 0.5,
                shadowOffsetY: 0.5,
            },
        },
        splitArea: {
            areaStyle: {
                color: ['rgba(137, 137, 137, 0', 'rgba(0, 255, 255, 0'].reverse(),
            },
        },
        indicator: [
            {
                name: 'A',
                max: 100,
            },
            {
                name: 'B',
                max: 100,
            },
            {
                name: 'C',
                max: 100,
            },
            {
                name: 'D',
                max: 100,
            },
            {
                name: 'E',
                max: 100,
            },
            {
                name: 'F',
                max: 100,
            },
            {
                name: 'G',
                max: 100,
            },
            {
                name: 'H',
                max: 100,
            },
        ],
    },
    xAxis: [
        {
            show: false,
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dotted',
                    // color: '#495170'
                    width: 2.5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 255,0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(0, 255, 255,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 255,0)',
                            },
                        ],
                        global: false,
                    },
                },
                interval: 0,
            },
            axisTick: {
                lineStyle: {
                    color: '#00F2FD',
                    width: '3',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                },
            },
            data: ['15:14'],
        },
    ],
    yAxis: [
        {
            show: false,
            splitNumber: 2,
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#0F0',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#646464',
                    type: 'dotted',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
        },
        {
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#5c5d89',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#5c5d89',
                },
            },
        },
    ],
    series: [
        {
            name: 'Title✍',
            type: 'radar',
            symbolSize: 0,
            z: 66,
            itemStyle: {
                // color: 'rgba(255, 197, 0, 1)',
                // borderColor: 'rgba(255, 197, 0, 0.5)',
                // borderWidth: 10,
                // shadowColor: 'rgba(0, 0, 0, .5)',
                // shadowBlur: 5,
                // shadowOffsetX: 5,
                // shadowOffsetY: 5,
            },
            lineStyle: {
                normal: {
                    type: 'dashed',
                    color: 'rgba(245, 166, 35, 1)',
                    width: 0,
                },
            },
            areaStyle: {
                normal: {
                    width: 1,
                    opacity: 1,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                },
            },
            data: [
                {
                    itemStyle: {
                        normal: {
                            color: '#e65291',
                        },
                    },
                    value: [70, 30, 70, 30, 70, 30,70, 30],
                },
            ],
        },
        {
            name: 'Title✍',
            type: 'radar',
            symbolSize: 0,
            z: 66,
            itemStyle: {
                // color: 'rgba(255, 197, 0, 1)',
                // borderColor: 'rgba(255, 197, 0, 0.5)',
                // borderWidth: 10,
                // shadowColor: 'rgba(0, 0, 0, .5)',
                // shadowBlur: 5,
                // shadowOffsetX: 5,
                // shadowOffsetY: 5,
            },
            lineStyle: {
                normal: {
                    type: 'dashed',
                    color: 'rgba(245, 166, 35, 1)',
                    width: 0,
                },
            },
            areaStyle: {
                normal: {
                    width: 1,
                    opacity: 1,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                },
            },
            data: [
                {
                    itemStyle: {
                        normal: {
                            color: '#4f4fe3',
                        },
                    },
                    value: [30, 70, 30, 70, 30, 70, 30, 70],
                },
            ],
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            startAngle: -32,
            radius: ['60%', '61.5%'],
            z: 0,
            label: {
                normal: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: Pie(),
        },
        {
            name: '',
            z: 0,
            type: 'pie',
            cursor: 'default',
            radius: ['57.3%', '58%'],
            startAngle: 225,
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: 100,
                    itemStyle: {
                        color: 'rgba(133,136,153,.3)',
                    },
                },
            ],
        },
        {
            name: '',
            z: 0,
            type: 'pie',
            cursor: 'default',
            radius: ['0', '54%'],
            startAngle: 225,
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: [
                {
                    value: 100,
                    itemStyle: {
                        shadowColor: 'rgba(0, 255, 255, 1)',
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1.1, [
                            {
                                offset: 0,
                                color: 'rgba(165, 171, 202, 1)',
                            },
                            {
                                offset: 0.25,
                                color: 'rgba(125, 134, 170, 1)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(30, 40, 84, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(18, 25, 55, 1)',
                            },
                        ]),
                    },
                },
            ],
        },

        {
            type: 'effectScatter',
            rippleEffect: {
                period: 5,
                scale: 6,
                brushType: 'stroke',
            },
            z: 9,
            symbolSize: [50, 50],
            symbolOffset: ['0', '190'],
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(0, 255, 255, .2)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 255, 255, .7)',
                    },
                ]),

                opacity: 1,
                borderWidth: 0,
            },
            symbolPosition: 'end',
            data: [1],
        },
        {
            type: 'effectScatter',
            rippleEffect: {
                period: 3,
                scale: 6,
                brushType: 'fill',
            },
            z: 9,
            symbolSize: [50, 50],
            symbolOffset: ['0', '190'],
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(0, 255, 255, .1)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(0, 255, 255, .3)',
                    },
                ]),

                opacity: 1,
                borderWidth: 0,
            },
            symbolPosition: 'end',
            data: [1],
        },
    ],
};