设备稼动率echarts gauge配置项内容和展示

      var demoData = [{
    name: 'CNC-1',
    unit: '%',
    value: 68,
}, ];
option = {
    backgroundColor: '#010101',
    series: (function() {
        var result = [];

        demoData.forEach(function(item) {
            result.push(
                {
                name: item.name,
                type: 'gauge',
                radius: '47.10%',
                startAngle: 225,
                endAngle: -45,
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 50,
                        color: [
                            [
                                item.value / 100, new echarts.graphic.LinearGradient(
                                    0, 1, 1, 0, [{
                                            offset: 0,
                                            color: 'rgba(255, 36, 74,0)',
                                        }, {
                                            offset: 0.3,
                                            color: 'rgba(255, 36, 74,0)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255, 36, 74,1)',
                                        }
                                    ]
                                )
                            ],
                            [
                                1, 'rgba(255,255,255,.0)'
                            ]
                        ]
                    }
                },
                axisTick: {
                    show: 0,
                },
                splitLine: {
                    show: 0,
                },
                axisLabel: {
                    show: 0
                },
                pointer: {
                    show: true,
                    length: '100%'
                },
                detail: {
                    show: true,
                    offsetCenter: [0, '70%'],
                    textStyle: {
                        fontSize: 24,
                        color: '#ff244a'
                    },
                    formatter: [
                        '{value}' + (item.unit || ''),
                        '{name|' + item.name + '}'
                    ].join('\n'),
                    rich: {
                        name: {
                            fontSize: 20,
                            lineHeight: 60,
                            color: '#fff',
                            fontWeight: '100',
                        }
                    }
                },
                itemStyle: {
                    color: 'rgba(255, 36, 74,.3)',
                    borderColor: 'rgba(255, 36, 74,1)',
                },
                data: [{
                    value: item.value
                }]},
                {
                name: item.name,
                type: 'gauge',
                radius: '47.10%',
                startAngle: 225,
                endAngle: -45,
                min: 0,
                max: 100,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: 0,
                },
                splitLine: {
                    show: 0,
                },
                axisLabel: {
                    show: 0
                },
                pointer: {
                    show: true,
                    width: 1,
                    length: '100%'
                },
                detail: {
                    show: false,
                },
                itemStyle: {
                    color: 'rgba(255, 36, 74,1)',
                },
                data: [{
                    value: item.value
                }]}, 
                {
                type: 'gauge',
                radius: '63.33%',
                splitNumber: 10,
                min: 0,
                max: 100,
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 3,
                        shadowBlur: 10,
                        color: [
                            [0, 'transparent'],
                            [0.1, '#0894f6'],
                            [0.11, 'transparent'],
                            [0.2, '#0894f6'],
                            [0.21, 'transparent'],
                            [0.3, '#0894f6'],
                            [0.31, 'transparent'],
                            [0.4, '#0894f6'],
                            [0.41, 'transparent'],
                            [0.5, '#0894f6'],
                            [0.51, 'transparent'],
                            [0.6, '#0894f6'],
                            [0.61, 'transparent'],
                            [0.7, '#0894f6'],
                            [0.71, 'transparent'],
                            [0.8, '#fd0001'],
                            [0.81, 'transparent'],
                            [0.9, '#fd0001'],
                            [0.91, 'transparent'],
                            [1, '#fd0001']
                        ]
                    }
                },
                axisLabel: {
                    formatter: function(e) {
                        switch (e + "") {
                            case "20":
                                return "较小";
                            case "80":
                                return "较大";
                            default:
                                return e;
                        }
                    },
                    textStyle: {
                        fontSize: 12,
                        fontWeight: ""
                    }
                },
                splitLine: {
                    length: 20,
                    lineStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    length: 10,
                    lineStyle: {
                        color: 'auto'
                    }
                },
                pointer: {
                    show: 0
                },
                detail: {
                    show: 0
                }
            }, );
        });

        return result;
    })()
};