Dashboard (Gauge) implementation

Gauge Implementation

A gauge is a common data visualization component used to display the current value of a single metric within a specific range. ECharts provides a powerful gauge chart type with extensive customization options to meet data display requirements in various scenarios.

Basic Gauge Implementation

To implement a basic gauge in ECharts, configure the series type as 'gauge'. Here is the simplest gauge example:

option = {
    series: [{
        type: 'gauge',
        data: [{
            value: 50,
            name: 'Completion Rate'
        }]
    }]
};

This basic configuration generates a circular gauge ranging from 0 to 100, with the pointer pointing to 50. By default, the gauge consists of three parts: the scale dial, the pointer, and the value display.

Core Gauge Configuration Options

Scale Dial Configuration

The scale dial is the background part of the gauge and can be customized using configuration items such as axisLine, axisTick, and axisLabel:

option = {
    series: [{
        type: 'gauge',
        axisLine: {
            lineStyle: {
                width: 30,
                color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
                color: '#fff',
                width: 2
            }
        },
        axisLabel: {
            color: 'auto',
            distance: 40,
            fontSize: 20
        },
        data: [{value: 70}]
    }]
};

Pointer Style Configuration

The pointer style can be adjusted using the pointer configuration item:

series: [{
    type: 'gauge',
    pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '50%',
        width: 16,
        offsetCenter: [0, '-60%'],
        itemStyle: {
            color: 'auto'
        }
    },
    data: [{value: 70}]
}]

Value Display Configuration

The numerical display at the center of the gauge can be customized using the detail configuration item:

series: [{
    type: 'gauge',
    detail: {
        formatter: '{value}%',
        fontSize: 30,
        offsetCenter: [0, '40%'],
        color: 'auto'
    },
    data: [{value: 70}]
}]

Multi-Pointer Gauge

ECharts supports displaying multiple pointers in a single gauge to simultaneously show multiple related metrics:

option = {
    series: [{
        type: 'gauge',
        radius: '80%',
        center: ['50%', '55%'],
        axisLine: {
            lineStyle: {
                width: 20
            }
        },
        pointer: {
            length: '60%'
        },
        data: [
            {value: 45, name: 'CPU'},
            {value: 65, name: 'Memory'},
            {value: 30, name: 'Disk'}
        ]
    }]
};

Progress Gauge

By modifying the start and end angles of the gauge, you can create a progress bar-style gauge:

option = {
    series: [{
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
            show: false
        },
        progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgb(58,77,233)'
                    }, {
                        offset: 1,
                        color: 'rgb(187,75,255)'
                    }]
                }
            }
        },
        data: [{
            value: 75
        }]
    }]
};

Gauge Animation Effects

ECharts provides rich animation effect configurations for gauges:

option = {
    series: [{
        type: 'gauge',
        animationDuration: 2000,
        animationEasing: 'elasticOut',
        animationDelay: 0,
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        data: [{
            value: 68
        }]
    }]
};

Gauge Event Handling

You can add interactive events to gauges to enhance user experience:

myChart.on('click', function(params) {
    if(params.seriesType === 'gauge') {
        console.log('Clicked the gauge', params.dataIndex, params.data);
    }
});

myChart.on('mouseover', function(params) {
    if(params.seriesType === 'gauge') {
        console.log('Hovered over the gauge', params.dataIndex, params.data);
    }
});

Combining Gauges with Other Charts

Gauges can be combined with other chart types to create richer data dashboards:

option = {
    grid: [
        {left: '5%', top: '10%', width: '45%', height: '80%'},
        {right: '5%', top: '10%', width: '45%', height: '80%'}
    ],
    series: [
        {
            type: 'gauge',
            gridIndex: 0,
            data: [{value: 75}]
        },
        {
            type: 'pie',
            gridIndex: 1,
            data: [
                {value: 335, name: 'Direct Access'},
                {value: 310, name: 'Email Marketing'},
                {value: 234, name: 'Affiliate Ads'}
            ]
        }
    ]
};

Advanced Gauge Applications

Dynamic Data Updates

Gauge data can be updated dynamically to achieve real-time monitoring effects:

setInterval(function() {
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
}, 2000);

Custom Gauge Shapes

By modifying configuration items, you can create gauges of different shapes:

option = {
    series: [{
        type: 'gauge',
        radius: '120%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 10,
        axisLine: {
            lineStyle: {
                width: 30,
                color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%']
        },
        axisTick: {
            length: 12,
            lineStyle: {
                color: 'auto',
                width: 2
            }
        },
        splitLine: {
            length: 20,
            lineStyle: {
                color: 'auto',
                width: 5
            }
        },
        axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -60
        },
        detail: {
            valueAnimation: true,
            formatter: '{value} km/h',
            color: 'inherit'
        },
        data: [{
            value: 70
        }]
    }]
};

Combining Gauges with Maps

Gauges can be combined with maps to display regional metrics:

option = {
    geo: {
        map: 'china',
        roam: true,
        emphasis: {
            itemStyle: {
                areaColor: '#f3b329'
            }
        }
    },
    series: [{
        type: 'gauge',
        coordinateSystem: 'geo',
        geoIndex: 0,
        center: ['50%', '50%'],
        radius: '20%',
        data: [{
            value: 65,
            name: 'National Completion Rate'
        }]
    }]
};

Gauge Performance Optimization

For scenarios requiring the display of multiple gauges, the following optimization strategies can be adopted:

1. Disable unnecessary animations
2. Reduce the number of scale divisions
3. Simplify pointer styles
4. Use canvas rendering instead of SVG

option = {
    series: [{
        type: 'gauge',
        silent: true,
        animation: false,
        axisTick: {
            splitNumber: 5
        },
        data: [{
            value: 50
        }]
    }]
};

Gauge Theme Adaptation

ECharts gauges support theme switching, making it easy to adapt to different interface styles:

// Use the built-in dark theme
echarts.registerTheme('dark', {
    backgroundColor: '#333',
    gauge: {
        axisLine: {
            lineStyle: {
                color: [[1, 'rgba(255,255,255,0.3)']]
            }
        },
        axisLabel: {
            color: '#fff'
        },
        detail: {
            color: '#fff'
        }
    }
});

// Apply the theme
myChart.setOption({
    series: [{
        type: 'gauge',
        data: [{value: 50}]
    }]
}, 'dark');

Gauge Internationalization

Internationalization support for gauges can be achieved through configuration items:

option = {
    series: [{
        type: 'gauge',
        detail: {
            formatter: function(value) {
                return i18n.t('gauge.value', {value: value});
            }
        },
        data: [{
            value: 75,
            name: i18n.t('gauge.completionRate')
        }]
    }]
};

Gauge Accessibility

To enhance accessibility, ARIA labels can be added to gauges:

option = {
    aria: {
        enabled: true,
        description: 'Current completion rate is 75%, which is at a good level'
    },
    series: [{
        type: 'gauge',
        data: [{
            value: 75,
            name: 'Completion Rate'
        }]
    }]
};