进度环图

阅读时间约 1 分钟

图表容器

width

optional number default: 400

设置图表宽度。

height

optional number default: 400

设置图表高度。

autoFit

optional boolean default: true

图表是否自适应容器宽高。当 autoFit 设置为 true 时,widthheight 的设置将失效。

padding

optional number[] | number | 'auto'

画布的 padding 值,代表图表在上右下左的间距,可以为单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向,或者开启 auto,由底层自动计算间距。

appendPadding

optional number[] | number

额外增加的 appendPadding 值,在 padding 的基础上,设置额外的 padding 数值,可以是单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向。

renderer

optional string default: canvas

设置图表渲染方式为 canvassvg

pixelRatio

optional number default: window.devicePixelRatio

设置图表渲染的像素比,和底层的 devicePixelRatio 含义一致,一般不用设置,除非在页面有整体 scale 的情况下,可以自定义。

limitInPlot

optional boolean

是否对超出坐标系范围的 Geometry 进行剪切。

数据映射

percent

required number

设置百分比数值 [0-1],表示进度条图的进度情况。

图形样式

radius

optional number

外环的半径 [0-1],相对于画布宽高的最小值来计算的。

innerRadius

optional number

内环的半径 [0-1],相对于内半径 radius 来计算的。

progressStyle

optional StyleAttr | Function

柱子样式配置。

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

color

optional string | string[] | Function

指定点的颜色。如没有配置 colorField,指定一个单值即可。对 colorFiled 进行了配置的情况下,即可以指定一系列色值,也可以通过回调函数的方法根据对应数值进行设置。

默认配置:采用 theme 中的色板。

// 设置单一颜色
{
  color: '#a8ddb5'
}
// 设置多色
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

图表组件

tooltip

fields
可选 string[]

指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。

tooltip: {
  fields: ['x', 'y'],
}
formatter
可选 Function

格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)

tooltip: {
  formatter: (datum: Datum) => {
    return { name: datum.x, value: datum.y + '%' };
  },
}
follow
可选 boolean default: true

设置 tooltip 内容框是否跟随鼠标移动。

enterable
可选 boolean default: false

tooltip 是否允许鼠标滑入。

showTitle
可选 boolean default: false

是否展示 tooltip 标题。

title
可选 string

设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。

position
可选 top | bottom | left | right

设置 tooltip 的固定展示位置,相对于数据点。

shared
可选 boolean

true 表示合并当前点对应的所有数据并展示,false 表示只展示离当前点最逼近的数据内容。

showCrosshairs
可选 boolean default: false

是否展示 crosshairs。

crosshairs
可选 object

配置 tooltip 的 crosshairs,当且仅当 showCrosshairs 为 true 时生效。

细分配置项名称类型功能描述
typex | y | xycrosshairs 的类型: x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助项
linelineStyle线的配置项,详细可见 ShapeAttrs
texttextStyle辅助线文本配置,支持回调
textBackgroundtextBackgroundStyle辅助线文本背景配置
followboolean辅助线是否跟随鼠标移动,默认为 false,即定位到数据点

textStyle

属性名类型介绍
fontSizenumber文字大小
fontFamilystring文字字体
fontWeightnumber字体粗细
lineHeightnumber文字的行高
textAlignstring设置文本内容的当前对齐方式, 支持的属性:center | end | left | right | start,默认值为start
fillstring文字的填充色
fillOpacitynumber文字的填充透明度
strokestring文字的描边
lineWidthnumber文字描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber文字的整体透明度
shadowColorstring文字阴影颜色
shadowBlurnumber文字阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距文字的水平距离
shadowOffsetYnumber设置阴影距文字的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码,以 label.style 配置为例:

{
  label: {
    style:{
      fontSize: 80,
      fontWeight: 300,
      textAlign: 'center',
      textBaseline: 'middle',
      shadowColor: 'white',
      shadowBlur: 10,
    }
  }
}

textBackgroundStyle

细分配置项名称类型功能描述
paddingnumber | number[]文本背景周围的留白
styleshapeStyle线的配置项, 详细可见 ShapeAttrs
showMarkers
可选 boolean default: true

是否渲染 tooltipMarkers。

marker
可选 ShapeAttrs

tooltipMarker 的样式配置。

样式配置类型,详细可见: ShapeAttrs

showContent
可选 boolean default: false

是否展示 tooltip 内容框。

container
可选 string|HTMLElement

自定义 tooltip 的容器。

containerTpl
可选 string

用于指定图例容器的模板,自定义模板时必须包含各个 dom 节点的 class。

itemTpl
可选 string

每项记录的默认模板,自定义模板时必须包含各个 dom 节点的 class。

domStyles
可选 TooltipDomStyles

传入各个 dom 的样式。

dom-styles
/** Tooltip 内容框的 css 样式定义 */
{
  domStyles: {
    'g2-tooltip'?: CSSProperties;
    'g2-tooltip-title'?: CSSProperties;
    'g2-tooltip-list'?: CSSProperties;
    'g2-tooltip-list-item'?: CSSProperties;
    'g2-tooltip-marker'?: CSSProperties;
    'g2-tooltip-value'?: CSSProperties;
    'g2-tooltip-name'?: CSSProperties;
  }
}
offset
可选 number

tooltip 偏移量。

reversed
optional boolean

是否将 tooltip items 逆序.

showNil
optional boolean

是否显示空值的 tooltip 项

customItems
可选 Function

在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等)。

{
  tooltip: {
    customItems: (originalItems: TooltipItem[]) => {
      // process originalItems, 
      return originalItems;
    };
  }
}
customContent
可选 Function

支持自定义模板。

{
  tooltip: {
    customContent: (title, data) => {
      return `<div>${title}</div>`;
    };
  }
}

尝试一下:

annotations

type
required string

标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html.

position
required object

标注位置。

  • 第一种,object 使用图表 x, y 对应的原始数据例如:{ time: '2010-01-01', value: 200 };
  • 第二种,数组来配置位置 [ x, y ],根据数组中的值的存在以下几种形式: 1、对应数据源中的原始数据; 2、关键字:'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束; 3、x, y 都是百分比的形式,如 30%,在绘图区域定位(即坐标系内)。 1 和 2 两种类型的数据可以混用,但是使用百分比形式时 x 和 y 必须都是百分比形式。
  • 第三种,回调函数,可以动态得确定辅助元素的位置,应用于数据动态更新,辅助元素的位置根据数据变化的场景。
top
optional boolean default: false

是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层。

animate
optional boolean

是否进行动画。

offsetX
optional number

x 方向的偏移量。

offsetY
optional number

y 方向的偏移量。

start
optional Array

起始位置,一般用于 line、region 等。

end
optional Array

结束位置,一般用于 line、region 等。

{
  type: 'line',
  start: ['min', 'median'],
  end: ['max', 'median'],
},
style
optional object

图形样式属性,参考绘图属性。

src
optional string

图片路径,用于 image 中。

content
optional string

文本内容,用于 text 中。

rotate
optional number

文本的旋转角度,弧度制。

maxLength
optional number

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

文本在二维坐标系的显示位置,是沿着 x 轴显示 还是沿着 y 轴显示。

background
optional object

文字包围盒样式设置。

参数名类型默认值描述
styleobject-文本背景的样式, 参考绘图属性
paddingnumber | number[]-文本背景周围的留白
color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

设定 regionFilter 只对特定 geometry 类型起作用,如 apply: ['area'],一般用于 regionFilter。

autoAdjust
optional boolean

文本超出绘制区域时,是否自动调节文本方向。

direction
optional upward | downward

朝向。

lineLength
optional number

line 长度,用于 dataRegion。

render
optional string

自定义标记的绘制 render 函数,其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数,其他 parserPosition 可以用来计算数据点对应的坐标位置,用于 shape。

container
optional string | HTMLElement

自定义 HTML 图形标记的容器元素,用于 html

html
optional string | HTMLElement

自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数,用于 html

alignX
optional 'left' | 'middle' | 'right'

DOM 元素在 X 方向的对齐方式,用于 html

alignY
optional left' | 'middle' | 'right'

DOM 元素在 Y 方向的对齐方式,用于 html

图表主题

推荐使用 💄 ThemeSet 在线自定义自己的主题配置。

内置主题

目前默认的内置主要有两套:defaultdark

{
  theme: 'default', // 'dark',
}

主题属性

除了使用内置的 defaultdark 主题之外,还可以通过设置主题属性来修改部分主题内容:

下表列出了组成主题的大配置项上的具体属性:

主题属性类型描述
defaultColorstring主题色
paddingnumbernumber[]
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber玫瑰图占比,0 - 1 范围数值
multiplePieWidthRationumber多层饼图/环图占比,0 - 1 范围数值
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

使用方式:

{
  theme: {
    colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA']
  }
}

主题属性(主题样式表)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

使用方式:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir'
    }
  }
}

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
fontFamilystring字体

更新主题

使用方式:

// 示例1:
plot.update({ theme: 'dark' });

// 示例2:
plot.update({ theme: { defaultColor: '#FF6B3B' } })

自定义注册主题

另外,还可以通过 G2 提供了自定义主题机制来定义全新的主题结构,以允许用户切换、定义图表主题。前往 G2 | 自定义主题 查看详情。

🌰 自定义主题 DEMO 示例

statistic

optional object

统计内容组件,主要包含 title、content 来部分内容。

配置项类型描述
titlefalse | StatisticText标题
contentfalse | StatisticText主体内容

StatisticText

配置项类型描述
styleCSSStyleDeclaration统计文本的样式 (css 样式)
customHtml(container: HTMLElement, view: View, datum: object, data: object[]) => string;自定义主体文本的 html,优先级高于 formatter
formatterFunction主体文本的格式化内容
rotatenumber旋转角度
offsetXnumberX 偏移值
offsetYnumberY 偏移值