PUE 能源效率的指标echarts gauge配置项内容和展示

能源效率的指标

      var bgColor = "#222939",
    highlight = '#03b7c9';
    
option = {
    backgroundColor: bgColor,
    title: {
        text: 'PUE',
        textStyle: {
            fontSize: 30,
            color: '#fff'
        }
    },
    series: [
        {
            name: '刻度',
            type: 'gauge',
            center: ['50%', '55%'], // 默认全局居中  
            splitNumber: 4, //刻度数量
            min: 0,
            max: 4,
            startAngle: 180,
            endAngle: 0,
            clockwise: true,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [1, highlight]
                    ]
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: highlight,
                    width: 1
                },
                length: -4,
                splitNumber: 10
            },
            splitLine: {
                show: true,
                length: -7,
                lineStyle: {
                    color: highlight,
                }
            },
            axisLabel: {
                distance: -20,
                textStyle: {
                    color: highlight,
                    fontSize: "14",
                    fontWeight: "bold"
                }
            },
            pointer: { //仪表盘指针
                show: 0
            },
            detail: {
                show: false
            }
        },
        {
            name: '渐变标尺',
            center: ['50%', '55%'], // 默认全局居中 
            type: 'gauge',
            radius: '70%',
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                lineStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 15,
                    color: [
                        [0.25, ['#9b9e9b']],
                        [
                            0.45, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#6fed5c'
                                    },
                                    {
                                        offset: 1,
                                        color: '#b2f268'
                                    }
                                ]
                            )
                        ],
                        [
                            0.48, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#b2f268'
                                    },
                                    {
                                        offset: 1,
                                        color: '#d8d563'
                                    }
                                ]
                            )
                        ],
                        [
                            0.66, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#d8d563'
                                    },
                                    {
                                        offset: 1,
                                        color: '#edb168'
                                    }
                                ]
                            )
                        ],
                        [
                            0.83, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#edb168'
                                    },
                                    {
                                        offset: 1,
                                        color: '#eb7742'
                                    }
                                ]
                            )
                        ],
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#eb7742'
                                    },
                                    {
                                        offset: 1,
                                        color: '#e8412e'
                                    }
                                ]
                            )
                        ]
                    ]
                }
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            detail: {
                show: false
            },
            pointer: {
                show: true
            }
        },
        {
            name: '数值',
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: '40%',
            center: ['50%', '55%'], // 默认全局居中  
            min: 0,
            max: 4,
            splitNumber: 0,
            axisLine: { // 坐标轴线  
                lineStyle: {
                    color: [
                        [1, highlight]
                    ], // 属性lineStyle控制线条样式  
                    width: '1%'
                }
            },

            axisLabel: { // 坐标轴小标记  
                show: false
            },
            splitLine: { // 分隔线  
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式  
                    width: 0
                }
            },
            pointer: { // 分隔线 指针  
                color: highlight,
                width: '30%',
                length: '170%'
            },
            detail: {
                show: true
            },
            data: [{
                name: "",
                value: 1.9
            }]
        },
        {
            name: '遮罩',
            tooltip:{
                show:false
            },
            type: 'pie',
            radius: '38%',
            center: ['50%', '55%'], // 默认全局居中
            hoverAnimation:false,
            itemStyle:{
                normal:{
                    color: bgColor
                },
                emphasis:{
                    color: bgColor
                }
            },
            labelLine:{
                normal:{
                    show:false
                }
            },
            animation:false,
            data: [1.9]
        }
    ]
};