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

渐变色

      let data = {
    name: '应用',
    value: 66
};
let posCenter = ['50%', '60%'];
option = {
    backgroundColor: '#000',
    series: [{
            // 外围刻度
            type: 'gauge',
            radius: '80%',
            center: posCenter,
            splitNumber: 4,
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(1,50,140)'
                                },
                                {
                                    offset: 0.1,
                                    color: 'rgba(1,192,229,1)'
                                },
                                {
                                    offset: 0.9,
                                    color: 'rgba(1,192,229,1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1,50,140)'
                                }
                            ])
                        ]
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: 0
            }
        },
        {
            // 内侧指针、数值显示
            name: '',
            type: 'gauge',
            radius: '70%',
            center: posCenter,
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 300,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(1,192,229,0.2)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(219,100,159,0.5)'
                                }
                            ])
                        ]
                    ]
                }
            },
            axisTick: {
                show: 0
            },
            splitLine: {
                show: 0
            },
            axisLabel: {
                show: 0
            },
            pointer: {
                show: true,
                length: '105%',
                width: 3
            },
            detail: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: '#fff'
                }
            },
            data: [{
                value: data.value
            }],
            z: 9
        },
        {
            type: 'gauge',
            radius: '40%',
            center: posCenter,
            splitNumber: 4,
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(1,192,229)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(219,100,159)'
                                }
                            ])
                        ]
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: 0
            },
            detail: {
                show: 0
            }
        },
        {
            type: 'gauge',
            radius: '70%',
            center: posCenter,
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 15,
                    color: [
                        [
                            data.value / 100,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#508cff'
                                },
                                {
                                    offset: 1,
                                    color: '#77f0ff'
                                }
                            ])
                        ],
                        [1, 'transparent']
                    ]
                }
            },
            //分隔线样式。
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            pointer: {
                show: false
            },
            title: {
                show: false
            },
            //仪表盘详情，用于显示数据。
            detail: {
                show: false
            },
            data: [{
                value: data.value
            }]
        },
        {
            //指针外环
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            center: posCenter,
            radius: ['4%', '6%'],
            z: 10,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 100,
                itemStyle: {
                    normal: {
                        color: '#00fffc'
                    }
                }
            }]
        },
        {
            //指针内环
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            center: posCenter,
            radius: ['0%', '4%'],
            z: 10,
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 100,
                itemStyle: {
                    normal: {
                        color: '#bbfdff'
                    }
                }
            }]
        }
    ]
};