基础饼图
饼图主要用于表示不同分类的占比情况。饼图中的每个扇形切片表现一个分类，扇形切片的弧度表示该分类在整体中的占比，所有切片构成一个整体，即 100%。
饼图是一个饱受争议的图表类型，有人认为饼图看起来难以阅读，我们的视觉系统只能判断出一个切片比一个切片要大，但很难确定大多少。在一些极端的情况下，饼图各切片大小相近，饼图将变得失去其功能性。如果你也有这种担心的话，可以使用条形图代替。
配置属性
图表容器
width
可选, number
功能描述： 设置图表宽度。
默认配置： 400
height
可选, number
功能描述： 设置图表高度。
默认配置： 400
forceFit
可选, boolean
功能描述： 图表是否自适应容器宽高。当 forceFit 设置为 true 时，width 和 height 的设置将失效。
默认配置： true
pixelRatio
可选, number
功能描述： 设置图表渲染的像素比
默认配置： 2
renderer
可选, string
功能描述: 设置图表渲染方式为 canvas 或 svg
默认配置： canvas
数据映射
data 📌
必选, array object
功能描述： 设置图表数据源
默认配置： 无
数据源为对象集合，例如：[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]。
meta
可选, object
功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。
默认配置： 无
| 细分配置项名称 | 类型 | 功能描述 |
|---|---|---|
| alias | string | 字段的别名 |
| formatter | function | callback 方法，对该字段所有值进行格式化处理 |
| values | string[] | 枚举该字段下所有值 |
| range | number[] | 字段的数据映射区间，默认为[0,1] |
const data = [
{ country: 'Asia', year: '1750', value: 502,},
{ country: 'Asia', year: '1800', value: 635,},
{ country: 'Europe', year: '1750', value: 163,},
{ country: 'Europe', year: '1800', value: 203,},
];
const areaPlot = new PercentageStackArea(document.getElementById('container'), {
title: {
visible: true,
text: '百分比堆叠面积图',
},
data,
meta: { year: { alias:'年份' range: [0, 1], }, value: { alias: '数量', formatter:(v)=>{return `${v}个`} } }, xField: 'year',
yField: 'value',
stackField: 'country',
});
areaPlot.render();angleField 📌
必选, string
功能描述： 扇形切片大小（弧度）所对应的数据字段名。。
默认配置： 无
colorField
可选, string
功能描述：扇形颜色映射对应的数据字段名。
默认配置： 无
图形样式
radius ✨
可选, number
功能描述： 饼图的半径，原点为画布中心。配置值域为 [0,1]，0 代表饼图大小为 0，即不显示，1 代表饼图撑满绘图区域。
默认配置： 0.8, 即 width / 2 * 0.8。
color
可选, string | string[] | Function
功能描述： 指定扇形颜色，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。
默认配置：采用 theme 中的色板。
用法示例：
// 配合颜色映射，指定多值
colorField:'type',
color:['blue','yellow','green']
//配合颜色映射，使用回调函数指定色值
colorField:'type',
color:(d)=>{
if(d==='a') return 'red';
return 'blue';
}pieStyle ✨
可选, object
功能描述： 设置扇形样式。pieStyle 中的fill会覆盖 color 的配置。pieStyle 可以直接指定，也可以通过 callback 的方式，根据数据为每个扇形切片指定单独的样式。
默认配置： 无
| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| fill | string | 填充颜色 |
| stroke | string | 描边颜色 |
| lineWidth | number | 描边宽度 |
| lineDash | number | 虚线描边 |
| opacity | number | 整体透明度 |
| fillOpacity | number | 填充透明度 |
| strokeOpacity | number | 描边透明度 |
图表组件
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 描边透明度 |
legend
可选, object
功能描述：图例，配置 colorField 时显示，用于展示颜色分类信息
默认配置：
visible: true,
position: 'top',
flipPage: true| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否可见 |
| position | string | 位置，支持 12 方位布局 top-left, top-center,top-right bottom-left,bottom-center,bottom-right left-top,left-center,left-bottom right-top,right-center,right-bottom |
| formatter | function | 对图例显示信息进行格式化 |
| offsetX | number | 图例在 position 的基础上再往 x 方向偏移量，单位 px |
| offsetY | number | 图例在 position 的基础上再往 y 方向偏移量，单位 px |
| title | object | 图例标题 - visible: boolean 是否显示 - text: string 图例文本，如不配置则自动取对应字段名 - style: object 标题样式 |
| marker | object | 图例 marker - symbol: string marker 符号，默认为 'circle'。可选类型：circle,square,diamond,triangle,triangleDown,hexagon,bowtie,cross,tick,plus,hyphen,line,hollowCircle,hollowSquare,hollowDiamond - style: object marker 样式，其中 r 配置 marker 的大小，其余样式参数参考绘图属性文档。 |
| text | object | 图例文本 - style: object 配置图例文本样式 - formatter:(text,cfg)=>string 格式化图例文本 |
tooltip
可选, object
功能描述：信息提示框
默认配置：
visible: true,
offset: 20,| 细分属性 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| offset | number | 距离鼠标位置偏移值 |
| domStyles | object | 配置 tooltip 样式 - g2-tooltip: object 设置 tooltip 容器的 CSS 样式 - g2-tooltip-title: object 设置 tooltip 标题的 CSS 样式 - g2-tooltip-list: object 设置 tooltip 列表容器的 CSS 样式 - g2-tooltip-marker: object 设置 tooltip 列表容器中每一项 marker 的 CSS 样式 - g2-tooltip-value: object 设置 tooltip 列表容器中每一项 value 的 CSS 样式 |
| fields | string | 设置 tooltip 内容字段，默认为[ angleField,colorField] |
| formatter | object | 对 tooltip items 进行格式化，入参为 tooltip fields 对应数值，出参为格式为{name:'a',value:1} |
label
功能描述： 标签文本
默认配置：
visible: false;
type: 'inner';
autoRotate: false;| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| type | string | label 的类型 - inner label 显示于扇形切片内 - outer label 显示于饼外 - outer-center label 呈圆形排布于饼外 - spider 蜘蛛布局 label |
| autoRotate | boolean | 是否自动旋转 |
| formatter | function | 对文本标签内容进行格式化 |
| offsetX | number | 在 label 位置的基础上再往 x 方向的偏移量 |
| offsetY | number | 在 label 位置的基础上再往 y 方向的偏移量 |
| style | object | 配置文本标签样式。 |
spider label formatter 用法示例：
当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。
label: {
type: 'spider',
formatter: (angleField, colorField) => {
return [ 'value1','value2' ];
}
}事件
图形事件
| onPieClick 图形点击事件 |
onPieDblClick 图形双击事件 |
onPieDblClick 图形双击事件 |
onPieMouseleave 图形鼠标离开事件 |
|---|---|---|---|
| onPieMousemove 图形鼠标移动事件 |
onPieMousedown 图形鼠标按下事件 |
onPieMouseup 图形鼠标松开事件 |
onPieMouseenter 图形鼠标进入事件 |
图表区域事件
| onPlotClick 图表区域点击事件 |
onPlotDblClick 图表区域双击事件 |
onPlotDblClick 图表区域双击事件 |
onPlotMouseleave 图表区域鼠标离开事件 |
|---|---|---|---|
| onPlotMousemove 图表区域鼠标移动事件 |
onPlotMousedown 图表区域鼠标按下事件 |
onPlotMouseup 图表区域鼠标松开事件 |
onPlotMouseenter 图表区域鼠标进入事件 |
图例事件
| onLegendClick 图例点击事件 |
onLegendDblClick 图例双击事件 |
onLegendMouseenter 图例鼠标进入事件 |
onLegendMouseleave 图例鼠标离开事件 |
|---|---|---|---|
| onLegendMousemove 图例鼠标移动事件 |
onLegendMousedown 图例鼠标按下事件 |
onLegendMouseup 图例鼠标松开事件 |
onLegendMouseenter 图例鼠标进入事件 |
图形标签事件
| onLabelClick 图形标签点击事件 |
onLabelDblClick 图形标签双击事件 |
onLabelDblClick 图形标签双击事件 |
onLabelMouseleave 图形标签鼠标离开事件 |
|---|---|---|---|
| onLabelMousemove 图形标签鼠标移动事件 |
onLabelMousedown 图形标签鼠标按下事件 |
onLabelMouseup 图形标签鼠标松开事件 |
onLabelMouseenter 图形标签鼠标进入事件 |
标题事件
| 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();changeData()
可选
更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。
plot.changeData(newData);repaint()
可选
图表画布重绘。
destroy()
可选
销毁图表。
getData()
获取图表数据。
getPlotTheme()
获取图表 theme。
何时使用
饼图通过扇形区块的面积，弧度和颜色等视觉标记，展现数据的分类和占比情况。它的特点是展现部分与部分之间，以及部分与整体的关系。部分相加之和等于整体的 100%，用整圆表示。
数据类型
| 适合的数据 | 一个「分类维度字段」和一个「数值度量字段」 |
|---|---|
| 功能 | 对比分类数据的数值大小 |
| 数据与图形的映射 | 「维度字段」的计数映射区块颜色和数量；「度量字段」的聚合值映射区块弧长和面积 |
| 适合的数据条数 | 建议区块数目不超过 9 种，超出的部分可以考虑合并显示为“其它” |
用法建议
分类数不超过 9 个
将多个极小值合并展示
排列顺序
如果每个数值的差异不大，那么不建议使用饼图
何时将标签放在内部/外部
所有的项目相加之和为 100%
元素
- 图形(Element)：饼图由扇形组成，环图由滑块组成。
- 图形标签(Label)：显示各个区块的占比（%），名称（华东、华南、华北）和实际数值（123.45）。
- 复合指标：在环图中心位置处显示，或以指标卡形式显示在图表上部分，。
- 图形辅助组件(Info Component)：图例，tooltip 或者指标卡等的组件支持。