Gauge - 仪表盘
G2Plot 仪表盘分为Gauge (基础仪表盘)、MeterGauge（刻度仪表盘）、FanGauge（扇形仪表盘）三种类型。
快速上手
基础仪表盘
import { Gauge } from '@antv/g2plot';
const gaugePlot = new Gauge(document.getElementById('container'), {
value: 64,
min: 0,
max: 100,
range: [0, 25, 50, 75, 100],
color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'],
});
gaugePlot.render();指针仪表盘
import { MeterGauge } from '@antv/g2plot';
const gaugePlot = new MeterGauge(document.getElementById('container'), {
value: 64,
min: 0,
max: 100,
range: [0, 25, 50, 75, 100],
color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3'],
});
gaugePlot.render();扇形仪表盘
import { FanGauge } from '@antv/g2plot';
const gaugePlot = new FanGauge(document.getElementById('container'), {
value: 34,
min: 0,
max: 100,
range: [0, 70],
format: (v) => {
return v + '%';
},
color: ['l(0) 0:#b0d0ff 1:#5f92f9'],
});
gaugePlot.render();配置属性
图表容器
width
可选, number
功能描述： 设置图表宽度。
默认配置： 400
height
可选, number
功能描述： 设置图表高度。
默认配置： 400
forceFit
可选, boolean
功能描述： 图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。
默认配置： true
pixelRatio
可选, number
功能描述： 设置图表渲染的像素比
默认配置： 2
renderer
可选, string
功能描述: 设置图表渲染方式为 canvas 或 svg
默认配置： canvas
数据映射
value 📌
必选, number
功能描述： 配置仪表盘当前数值。
默认配置： 无
min ✨
可选, number
功能描述： 仪表盘刻度最小值
默认配置： 0
max ✨
可选, number
功能描述： 仪表盘刻度最大值。
默认配置： 1
range 📌
必选, number[]
功能描述： 仪表盘的色条范围区间，数组的前后两项组成的元组将对应一个颜色区间，例如：[0, 40, 60, 100]。
默认配置： 无
图形样式
color
可选, string[]
功能描述：配置仪表盘色条颜色
默认配置： 采用 theme 中的默认色板
rangeSize ✨
可选, number
功能描述： 配置仪表盘色条宽度。
默认配置：Gauge（基础仪表盘）24，MeterGauge（刻度仪表盘）24，FanGauge（扇形仪表盘）70
rangeStyle ✨
可选, object
功能描述： 配置仪表盘色条样式，详细配置请参考绘图属性文档。
默认配置：无
rangeBackgroundStyle ✨
可选, object
功能描述：配置仪表盘色条背景(空白区域)样式，详细配置请参考绘图属性文档。
默认配置：
{
fill: '#f0f0f0',
}
组件
title
可选, optional
功能描述： 配置图表的标题，默认显示在图表左上角。
默认配置：
visible: false,
alignTo: 'left',
text:'',
style:{
fontSize: 18,
fill: 'black',
}| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| alignTo | string | 位置，支持三种配置： 'left' |
| style | object | 样式： - fontSize: number 文字大小 - fill: string 文字颜色 - stroke: string 描边颜色 - lineWidth: number 描边粗细 - lineDash: number 虚线描边 - opacity: number 透明度 - fillOpacity: number 填充透明度 - strokeOpacity: number 描边透明度 |
description
可选, optional
功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。
默认配置：
visible: false,
alignTo: 'left',
text:'',
style:{
fontSize: 12,
fill: 'grey',
}| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| alignTo | string | 位置，支持三种配置： 'left' |
| style | object | 样式： - fontSize: number 文字大小 - fill: string 文字颜色 - stroke: string 描边颜色 - lineWidth: number 描边粗细 - lineDash: number 虚线描边 - opacity: number 透明度 - fillOpacity: number 填充透明度 - strokeOpacity: number 描边透明度 |
axis ✨
可选, object
功能描述：配置仪表盘刻度轴
| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| offset | number | 刻度偏移值，可以设正负值。正直显示在色条外圈，负值显示在色条内圈。Gauge、MeterGauge默认-10，FanGauge默认5。 |
| tickCount | number | 刻度数。Gauge默认21，MeterGauge默认25，FanGauge默认10。 |
| subTickCount | number | 副刻度数。默认4。 |
| tickLine | object | 配置刻度线 - visible:boolean 是否可见，默认true - length:number 刻度线长度，默认2 - style:object 刻度线样式 |
| label | object | 配置刻度标签 - visible: boolean 是否可见，默认true - style: object 配置标签样式 |
pivot ✨
功能描述： 配置仪表盘指针
| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示，默认true |
| thickness | number | 指针宽度，默认6 |
| pointer | object | 配置指针针头 - visible:boolean 是否显示，默认true - style: object 针头样式 |
| base | object | 配置指针基座 - visible:boolean 是否显示，默认true - size:number 基座大小，默认不配置，自动计算 - style: objecy 基座样式 |
| pin | object | 配置指针旋钮 - visible:boolean 是否显示，默认true - size:number 旋钮大小，默认不配置，自动计算 - style: objecy 旋钮样式 |
statistic ✨
可选, object
功能描述： 配置仪表盘指标卡
| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| position | [string, string] | 指标卡的位置。以百分比的形式进行配置，分别对应[x-position, y-position] |
| text | string | 指标卡文字内容 |
| color | string | 指标卡文字颜色 |
事件
事件
仪表盘色带事件
| onRangeClick 色带点击事件 | onRangeDblClick 色带双击事件 | onRangeDblClick 色带双击事件 | onRangeMouseleave 色带鼠标离开事件 |
|---|---|---|---|
| onRangeMousemove 色带鼠标移动事件 | onRangeMousedown 色带鼠标按下事件 | onRangeMouseup 色带鼠标松开事件 | onRangeMouseenter 色带鼠标进入事件 |
指标卡事件
| onStatisticClick 指标卡点击事件 | onStatisticDblClick 指标卡双击事件 | onStatisticDblClick 指标卡双击事件 | onStatisticMouseleave 指标卡鼠标离开事件 |
|---|---|---|---|
| onStatisticMousemove 指标卡鼠标移动事件 | onStatisticMousedown 指标卡鼠标按下事件 | onStatisticMouseup 指标卡鼠标松开事件 | onStatisticMouseenter 指标卡鼠标进入事件 |
图表区域事件
| onPlotClick 图表区域点击事件 | onPlotDblClick 图表区域双击事件 | onPlotDblClick 图表区域双击事件 | onPlotMouseleave 图表区域鼠标离开事件 |
|---|---|---|---|
| onPlotMousemove 图表区域鼠标移动事件 | onPlotMousedown 图表区域鼠标按下事件 | onPlotMouseup 图表区域鼠标松开事件 | onPlotMouseenter 图表区域鼠标进入事件 |
标题事件
| onTitleClick 标题点击事件 | onTitleDblClick 标题双击事件 | onTitleDblClick 标题双击事件 | onTitleMouseleave 标题鼠标离开事件 |
|---|---|---|---|
| onTitleMousemove 标题鼠标移动事件 | onTitleMousedown 标题鼠标按下事件 | onTitleMouseup 标题鼠标松开事件 | onTitleMouseenter 标题鼠标进入事件 |
描述事件
| onDescriptionClick 标题点击事件 | onDescriptionDblClick 标题双击事件 | onDescriptionDblClick 标题双击事件 | onDescriptionMouseleave 标题鼠标离开事件 |
|---|---|---|---|
| onDescriptionMousemove 标题鼠标移动事件 | onDescriptionMousedown 标题鼠标按下事件 | onDescriptionMouseup 标题鼠标松开事件 | onDescriptionMouseenter 标题鼠标进入事件 |
图表方法
render() 📌
必选
渲染图表。
updateConfig()
可选
更新图表配置项。
plot.updateConfig({
width: 500,
height: 600,
legend: {
visible: false,
},
});
plot.render();repaint()
可选
图表画布重绘。
destroy()
可选
销毁图表。
getData()
获取图表数据。
getPlotTheme()
获取图表 theme。