仪表盘(Gauge)实现

仪表盘(Gauge)实现

仪表盘是一种常见的数据可视化形式，用于展示单个指标在特定范围内的当前值。ECharts提供了强大的仪表盘组件，支持多种自定义配置，能够满足不同场景下的数据展示需求。

基本仪表盘实现

最简单的仪表盘只需要配置一个系列(series)即可。以下是一个基础示例：

option = {
    series: [{
        type: 'gauge',
        data: [{
            value: 50,
            name: '完成率'
        }]
    }]
};

这个配置会生成一个0-100的默认仪表盘，指针指向50的位置。仪表盘会自动划分为10等份，显示刻度线和刻度标签。

自定义仪表盘外观

ECharts允许对仪表盘进行全方位的样式定制：

option = {
    series: [{
        type: 'gauge',
        radius: '100%',  // 半径
        startAngle: 180, // 起始角度
        endAngle: 0,     // 结束角度
        axisLine: {
            lineStyle: {
                width: 30,
                color: [
                    [0.3, '#67e0e3'],
                    [0.7, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        pointer: {
            length: '60%',
            width: 8
        },
        detail: {
            formatter: '{value}%',
            fontSize: 24
        },
        data: [{value: 70}]
    }]
};

这个配置创建了一个半圆形仪表盘，带有渐变色背景，指针长度和宽度都做了调整，并设置了数值显示格式。

多指针仪表盘

ECharts支持在一个仪表盘上显示多个指针，用于同时展示多个相关指标：

option = {
    series: [{
        type: 'gauge',
        axisLine: {
            lineStyle: {
                width: 20
            }
        },
        pointer: {
            length: '60%'
        },
        data: [
            {value: 45, name: 'CPU'},
            {value: 78, name: '内存'},
            {value: 32, name: '磁盘'}
        ]
    }]
};

这个仪表盘会显示三个指针，分别表示CPU、内存和磁盘的使用率。每个指针会自动分配不同的颜色。

分段仪表盘

通过配置axisTick和splitLine可以实现分段效果：

option = {
    series: [{
        type: 'gauge',
        min: 0,
        max: 100,
        splitNumber: 5,
        axisTick: {
            length: 12,
            lineStyle: {
                color: 'auto'
            }
        },
        splitLine: {
            length: 20,
            lineStyle: {
                color: 'auto'
            }
        },
        data: [{value: 65}]
    }]
};

这个配置将仪表盘分为5个大段，每个大段又细分为小刻度，增强了可读性。

动态更新仪表盘

仪表盘经常需要动态更新数据，ECharts提供了简单的方法：

let chart = echarts.init(document.getElementById('main'));
let option = {
    series: [{
        type: 'gauge',
        data: [{value: 0}]
    }]
};
chart.setOption(option);

// 模拟数据更新
setInterval(function() {
    let value = Math.random() * 100;
    chart.setOption({
        series: [{
            data: [{value: value}]
        }]
    });
}, 2000);

这段代码每2秒随机更新一次仪表盘数值，展示了如何动态更新仪表盘数据。

高级定制：带标题和单位的仪表盘

更复杂的仪表盘可以包含标题、单位等附加信息：

option = {
    series: [{
        type: 'gauge',
        title: {
            show: true,
            offsetCenter: [0, '80%'],
            fontSize: 16
        },
        detail: {
            formatter: '{value}°C',
            offsetCenter: [0, '60%'],
            fontSize: 24
        },
        data: [{
            value: 25,
            name: '温度'
        }]
    }]
};

这个仪表盘在指针下方显示了"温度"标题和"°C"单位，布局更加完整。

仪表盘与其它图表组合

ECharts支持将仪表盘与其它图表类型组合使用：

option = {
    series: [
        {
            type: 'gauge',
            center: ['25%', '50%'],
            data: [{value: 75}]
        },
        {
            type: 'pie',
            center: ['75%', '50%'],
            data: [
                {value: 335, name: 'A'},
                {value: 310, name: 'B'},
                {value: 234, name: 'C'}
            ]
        }
    ]
};

这个配置在左侧显示一个仪表盘，右侧显示一个饼图，展示了如何将不同图表类型组合在一个画布中。

响应式仪表盘

为了使仪表盘适应不同屏幕尺寸，可以监听窗口大小变化：

let chart = echarts.init(document.getElementById('main'));
let option = {
    series: [{
        type: 'gauge',
        radius: '80%',
        data: [{value: 50}]
    }]
};
chart.setOption(option);

window.addEventListener('resize', function() {
    chart.resize();
});

这段代码确保仪表盘在窗口大小变化时自动调整尺寸，保持最佳显示效果。

仪表盘动画效果

ECharts提供了丰富的动画配置选项：

option = {
    series: [{
        type: 'gauge',
        animationDuration: 2000,
        animationEasing: 'elasticOut',
        data: [{
            value: 68,
            name: '完成率'
        }]
    }]
};

这个配置使指针移动时具有弹性动画效果，持续时间为2秒，增强了用户体验。

仪表盘事件处理

可以为仪表盘添加交互事件：

chart.on('click', function(params) {
    console.log('点击了仪表盘', params);
});

chart.on('mouseover', function(params) {
    console.log('鼠标悬停在仪表盘上', params);
});

这些事件处理器可以在用户与仪表盘交互时触发，实现更丰富的交互功能。

仪表盘与地图结合

仪表盘经常与地图结合使用，展示区域指标：

option = {
    geo: {
        map: 'china',
        roam: true
    },
    series: [{
        type: 'gauge',
        center: ['50%', '60%'],
        radius: '30%',
        data: [{value: 75}]
    }]
};

这个配置在中国地图上叠加了一个仪表盘，可以用于展示全国性的综合指标。

仪表盘数据格式化

可以通过formatter函数自定义数据显示格式：

option = {
    series: [{
        type: 'gauge',
        detail: {
            formatter: function(value) {
                return '完成率: ' + value.toFixed(1) + '%';
            }
        },
        data: [{value: 75.5}]
    }]
};

这个配置将数值显示为带有一位小数的百分比格式，并添加了前缀文本。

仪表盘阈值标记

可以在仪表盘上标记重要阈值：

option = {
    series: [{
        type: 'gauge',
        axisLine: {
            lineStyle: {
                color: [
                    [0.6, 'green'],
                    [0.8, 'orange'],
                    [1, 'red']
                ]
            }
        },
        data: [{value: 75}]
    }]
};

这个配置在60%以下显示绿色，60-80%显示橙色，80%以上显示红色，直观地标示了不同区间的状态。

仪表盘指针样式定制

指针样式可以高度自定义：

option = {
    series: [{
        type: 'gauge',
        pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '50%',
            width: 16,
            itemStyle: {
                color: '#FF4500'
            }
        },
        data: [{value: 60}]
    }]
};

这个配置使用自定义SVG路径作为指针形状，设置了橙色填充，创建了独特的视觉效果。