仪表图

[配置项]

简介

仪表图是一种拟物化的图表，就像汽车的速度表一样，刻度表示度量，指针角度表示当前数值。

图表构成

仪表图由扇区图元和具有进度指向性的仪表图指针等基本元素构成。

从数据系列角度而言，仪表图由gauge和gaugePointer系列封装而成，他们绘制仪表盘扇形区域和指针。利用这一特性，您可以以组合图的方式声明仪表图，以更灵活的方式调整仪表图绘制效果。

扇区图元和仪表图指针为仪表图的基本要素，相关的绘制配置必不可少:

gaugeChart.type: 图表类型，仪表图的类型为'gauge'
gaugeChart.data: 图表绘制的数据源
gaugeChart.categoryField: 分类字段，映射不同的扇区
gaugeChart.valueField: 数值字段，映射指针角度
gaugeChart.innerRadius: 指定仪表图表盘的内半径
gaugeChart.outerRadius: 指定仪表图表盘的外半径
gaugeChart.startAngle: 指定仪表图表盘的开始角度
gaugeChart.endAngle: 指定仪表图表盘的结束角度

快速上手

关键配置

categoryField、valueField 属性分别用于指定数据类别与指针角度字段
innerRadius、outerRadius 属性用于指定仪表盘的内外半径
startAngle、endAngle 属性用于指定仪表盘的开始、结束角度

仪表图特性

数据

一个离散 字段，如: type ，表示数据类别，也可以理解为仪表盘所展示的是何种项目的进度
一个数值字段，如: value ，表示指针角度，也可以理解为要展示的进度值

由于一个仪表盘通常只展示一个项目的进度，所以数据通常只有一条。

data: [
  {
    id: 'gauge',
    values: [
      {
        type: 'targetA',
        value: 0.6
      }
    ]
  }
];

以组合图的形式声明更灵活的仪表图

为了让仪表图有更拟物化的效果，可以以组合图的形式同时声明gauge和gaugePointer系列，并配置动画从而达到动态展示进度的效果。

下面这个例子应用当前获取的时间作为源数据，巧妙的拟合出动态表盘效果，充分证明 VChart 的灵活性、实用性。

图元及样式

扇区渐变

在 VChart 中，您可以使用fill.gradient: 'conical'为图元添加环形渐变效果，这将提高图表表现力。同理，仪表图的扇区图元为progress, 所以只需gaugeChart.progress.style.fill中进行配置即可, 具体配置请见VChart 图元渐变详细配置

仪表图

简介