多个饼图echarts gauge配置项内容和展示

      var dataList = [
    {
        name: '装备制造',
        value: 54,
    },
    {
        name: '现代材料',
        value: 44,
    },
    {
        name: '新能源',
        value: 35,
    },
    {
        name: '新一代信息技术',
        value: 30,
    },
    {
        name: '商贸物流',
        value: 20,
    },
];
function _dashed() {
                        let dataArr = [];
                        for (var i = 0; i < 100; i++) {
                            if (i % 2 === 0) {
                                dataArr.push({
                                    name: (i + 1).toString(),
                                    value: 20,
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(0,255,255,.3)',
                                        },
                                    },
                                });
                            } else {
                                dataArr.push({
                                    name: (i + 1).toString(),
                                    value: 20,
                                    itemStyle: {
                                        normal: {
                                            color: 'rgb(0,0,0,0)',
                                            borderWidth: 1,
                                            borderColor: 'rgba(0,255,255,1)',
                                        },
                                    },
                                });
                            }
                        }
                        return dataArr;
                    }
var titleArr = [],
    seriesArr = [];
var colors = [
    ['#389af4', '#dfeaff'],
    ['#ff8c37', '#ffdcc3'],
    ['#ffc257', '#ffedcc'],
    ['#fd6f97', '#fed4e0'],
    ['#a181fc', '#e3d9fe'],
];
dataList.forEach(function (item, index) {
    titleArr.push({
        text: item.name,
        left: index * 35 + 10 + '%',
        top: '85%',
        textAlign: 'center',
        textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: colors[index][0],
            textAlign: 'center',
        },
    });
    seriesArr.push(
        {
            name: item.name,
            type: 'gauge',
            radius: '60%',
            center: [index * 35 + 15 + '%', '50%'],
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 30,
            detail: {
                offsetCenter: [0, -20],
                formatter: ' ',
            },
            pointer: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [0, '#2CFAFC'],
                        [36.7 / 100, colors[index][0]],
                        [1, '#0f232e'],
                    ],
                    width: 5,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 100,
                lineStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 255, 255, 1)',
                    shadowOffsetY: '0',
                    color: colors[index][0],
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
            },
        },
        {
            type: 'pie',
            radius: ['44%', '45%'],
            center: [index * 35 + 15 + '%', '50%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: '#0C355E',
                },
            },
            label: {
                show: false,
            },
            data: _dashed(),
        },

        {
            type: 'pie',
            radius: [0, '30%'],
            center: [index * 35 + 15 + '%', '50%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: '#000',
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                        {
                            offset: 0,
                            color: colors[index][0],
                        },
                        {
                            offset: 1,
                            color: colors[index][0],
                        },
                    ]),
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
        {
            type: 'pie',
            radius: ['64%', '65.5%'],
            center: [index * 35 + 15 + '%', '50%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 255, 255,.3)',
                    color: '#0f232e',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
        {
            type: 'pie',
            radius: ['68%', '69.5%'],
            center: [index * 35 + 15 + '%', '50%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 255, 255,.3)',
                    color: 'rgba(15, 35, 46,.6)',
                },
            },
            label: {
                show: false,
            },
            data: [
                {
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value;
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold',
                                color: '#FFFFFF',
                            },
                        },
                    },
                },
            ],
        }
    );
});

option = {
    backgroundColor: '#eee',
    title: titleArr,
    series: seriesArr,
};