logoCreated with Sketch.

G2Plot

仪表盘

仪表盘 (Gauge) 是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。目前很多的管理报表或报告上都是用这种图表，以直观的表现出某个指标的进度或实际情况。

仪表盘的好处在于它能跟人们的常识结合，使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化，正确使用可以提升用户体验。仪表盘的圆形结构，可以更有效的利用空间。

为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 3 根。

基础仪表盘个性化仪表盘样式刻度仪表盘扇形仪表盘

配置属性

图表容器

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

DEMOS

功能描述： 配置图表的标题，默认显示在图表左上角。

默认配置：

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

DEMOS

功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。

默认配置：

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。

设计规范