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

仪表盘颜色渐变

      var data = [{
        name: '今日拥堵指数',
        value: 55.2
    },
    {
        name: '昨日拥堵指数',
        value: 20.2
    }
]

option = {
    backgroundColor: '#000',
    series: [{
            data: [data[0]],
            type: 'gauge',
            name: data[0].name,
            title: {
                show: true,
                offsetCenter: [0, '180%'],
                color: '#fff',
                fontSize: 14
            },
            center: ['25%', '35%'],
            radius: '60%',
            startAngle: '220',
            endAngle: '-40',
            splitNumber: '12',
            pointer: {
                show: true,
                length: '80%'
            },
            itemStyle: {
                normal: {
                    color: {
                        x: '0.00',
                        y: '0.00',
                        x2: '1.00',
                        y2: '1.00',
                        type: 'linear',
                        global: false,
                        colorStops: [{
                                offset: 1,
                                color: '#AF6030'
                            },
                            {
                                offset: 0,
                                color: '#EED25F'
                            }
                        ]
                    }
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 8,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#2081DF'
                                },
                                {
                                    offset: 0.5,
                                    color: '#91FCC1'
                                },
                                {
                                    offset: 1,
                                    color: '#2081DF'
                                }
                            ])
                        ]
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 8,
                lineStyle: {
                    color: '#031544',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: true,
                offsetCenter: [0, '110%'],
                color: '#65FDF9',
                fontSize: 28,
                fontWeight: 'bold',
                fontFamily: 'hkxzyW7'
            }
        },
        {
            data: [data[1]],
            type: 'gauge',
            name: data[1].name,
            title: {
                show: true,
                offsetCenter: [0, '195%'],
                color: '#fff',
                fontSize: 14
            },
            center: ['75%', '40%'],
            radius: '50%',
            startAngle: '220',
            endAngle: '-40',
            splitNumber: '12',
            pointer: {
                show: true,
                length: '80%'
            },
            itemStyle: {
                normal: {
                    color: {
                        x: '0.00',
                        y: '0.00',
                        x2: '1.00',
                        y2: '1.00',
                        type: 'linear',
                        global: false,
                        colorStops: [{
                                offset: 1,
                                color: '#AF6030'
                            },
                            {
                                offset: 0,
                                color: '#EED25F'
                            }
                        ]
                    }
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 8,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#2081DF'
                                },
                                {
                                    offset: 0.5,
                                    color: '#91FCC1'
                                },
                                {
                                    offset: 1,
                                    color: '#2081DF'
                                }
                            ])
                        ]
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 8,
                lineStyle: {
                    color: '#031544',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: true,
                offsetCenter: [0, '125%'],
                color: '#B7EBFE',
                fontSize: 20,
                fontFamily: 'hkxzyW7'
            }
        }
    ]

}