子弹图

title	string	标题
measures	number[]	进度值，支持阶段性的进度值
targets	number	目标值
ranges	number[]	进度条的色条范围区间，取值范围为[0, 1]

细分配置项名称	类型	功能描述
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();

细分配置	类型	功能描述
width	number	marker 的宽度，默认为 1。
fill	string	marker 的填充色

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 描边透明度

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 描边透明度

visible: false,
position: 'before',
tickCount: 6,
formatter: (text, idx) => `${idx}`,
style: {
    fill: 'rgba(0, 0, 0, 0.25)',
    textBaseline: 'middle',
    textAlign: 'center',
    fontSize: 12,
    lineHeight: 16,
},
tickLine: {
    visible: true,
    lineWidth: 1,
    stroke: '#FFF',
    lineDash: [4, 2],
},

细分配置	类型	功能描述
visible	boolean	是否可见
position	string	坐标轴位置。可选值： `before \| after`。默认为 `before` ，代表坐标轴在上方
tickCount	number	坐标轴刻度数量
tickInterval	number	坐标轴刻度间隔
label	object	坐标轴标签 - visible: boolean 是否可见 - formatter: function 坐标轴标签格式化 - suffix: string 后缀 - precision：number 标签精度，如配置为 2，则格式化为 2 位小数 - mask: string 为日期文本添加格式化遮罩，当坐标轴 type 为 time 时生效 - offsetX: number 位置在 x 方向上的偏移量 - offsetY：number 位置在 y 方向上的偏移量 - style：object 样
tickLine	object	坐标轴刻度 - visible：boolean 是否可见 - style: object 样式

visible: true,
position: 'bottom',
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 格式化图例文本

visible: true,
offset: 20,

细分属性	类型	功能描述
visible	boolean	是否显示
offset	number	距离鼠标位置偏移值
shared	boolean	是否同时显示多条数据
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 样式

onBulletClick 实际值图形点击事件	onBulletDblClick 实际值图形双击事件	onBulletDblClick 实际值图形双击事件	onLineMouseleave 实际值图形鼠标离开事件
onBulletMousemove 实际值图形鼠标移动事件	onBulletMousedown 实际值图形鼠标按下事件	onBulletMouseup 实际值图形鼠标松开事件	onBulletMouseenter 实际值图形鼠标进入事件

onBulletTargetClick 目标值图形点击事件	onBulletTargetDblClick 目标值图形双击事件	onBulletTargetDblClick 目标值图形双击事件	onBulletTargetMouseleave 目标值图形鼠标离开事件
onBulletTargetMousemove 目标值图形鼠标移动事件	onBulletTargetMousedown 目标值图形鼠标按下事件	onBulletTargetMouseup 目标值图形鼠标松开事件	onBulletTargetMouseenter 目标值图形鼠标进入事件

onPlotClick 图表区域点击事件	onPlotDblClick 图表区域双击事件	onPlotDblClick 图表区域双击事件	onPlotMouseleave 图表区域鼠标离开事件
onPlotMousemove 图表区域鼠标移动事件	onPlotMousedown 图表区域鼠标按下事件	onPlotMouseup 图表区域鼠标松开事件	onPlotMouseenter 图表区域鼠标进入事件

onLegendClick 图例点击事件	onLegendDblClick 图例双击事件	onLegendMouseenter 图例鼠标进入事件	onLegendMouseleave 图例鼠标离开事件
onLegendMousemove 图例鼠标移动事件	onLegendMousedown 图例鼠标按下事件	onLegendMouseup 图例鼠标松开事件	onLegendMouseenter 图例鼠标进入事件

onAxisClick 坐标轴点击事件	onAxisDblClick 坐标轴双击事件	onAxisDblClick 坐标轴双击事件	onAxisMouseleave 坐标轴鼠标离开事件
onAxisMousemove 坐标轴鼠标移动事件	onAxisMousedown 坐标轴鼠标按下事件	onAxisMouseup 坐标轴鼠标松开事件	onAxiMouseenter 坐标轴鼠标进入事件

onTitleClick 标题点击事件	onTitleDblClick 标题双击事件	onTitleDblClick 标题双击事件	onTitleMouseleave 标题鼠标离开事件
onTitleMousemove 标题鼠标移动事件	onTitleMousedown 标题鼠标按下事件	onTitleMouseup 标题鼠标松开事件	onTitleMouseenter 标题鼠标进入事件

onDescriptionClick 标题点击事件	onDescriptionDblClick 标题双击事件	onDescriptionDblClick 标题双击事件	onDescriptionMouseleave 标题鼠标离开事件
onDescriptionMousemove 标题鼠标移动事件	onDescriptionMousedown 标题鼠标按下事件	onDescriptionMouseup 标题鼠标松开事件	onDescriptionMouseenter 标题鼠标进入事件

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

plot.changeData(newData);

G2可视化引擎

G6图可视化引擎

F2移动可视化方案

L7地理空间数据可视化

G2Plot开箱即用的图表库

Graphin

ChartCube图表魔方

墨者学院

BizCharts

Viser

代码演示(7)

API

设计指引

配置属性

图表容器

width

height

forceFit

pixelRatio

renderer

数据映射

data 📌

meta

rangeMax 📌

measureSize ✨

图形样式

measureColors ✨

rangeSize ✨

rangeColors ✨

markerSize ✨

markerColors ✨

markerStyle ✨

图表组件

title

description

axis

legend

tooltip

事件

实际值图形事件

目标值图形事件

图表区域事件

图例事件

坐标轴事件

标题事件

描述事件

图表方法

render() 📌

updateConfig()

changeData()

repaint()

destroy()

getData()

getPlotTheme()

代码演示⁽⁷⁾