Liquid - 水波图
|
|
别名 水波球、进度球 |
|
定义 |
|
|
视觉通道 |
|
|
分析目的 比较 |
|
|
数据准备 1 个「数值」字段 |
快速上手
import { Liquid } from '@antv/g2plot';
const liquidPlot = new Liquid(document.getElementById('container'), {
title: {
visible: true,
text: '水波图',
},
min: 0,
max: 10000,
value: 5639,
});
liquidPlot.render();配置属性
图表容器
width
可选, number
功能描述： 设置图表宽度。
默认配置： 400
height
可选, number
功能描述： 设置图表高度。
默认配置： 400
forceFit
可选, boolean
功能描述： 图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。
默认配置： true
pixelRatio
可选, number
功能描述： 设置图表渲染的像素比
默认配置： 2
renderer
可选, string
功能描述: 设置图表渲染方式为 canvas 或 svg
默认配置： canvas
数据映射
value 📌
必选, number
功能描述： 设置水波图的当前值
默认配置： 无
max 📌
必选, number
功能描述： 设置水波图的最大值
默认配置： 无
min 📌
必选, number
功能描述： 设置水波图的最小值
默认配置： 无
图形样式
color
可选， string
功能描述： 配置水波图的颜色
默认配置： 使用默认色板的颜色
liquidStyle ✨
可选, object
功能描述： 配置水波图的样式
默认配置：
lineWidth: 4
strokeOpacity: 1| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| stroke | string | 配置边框颜色 |
| lineWidth | number | 配置边框宽度 |
| lineDash | [number,number] | 配置边框虚线样式 |
| strokeOpacity | number | 配置边框透明度 |
| fill | string | 配置填充颜色 |
示例代码：
liquidStyle:{
lineWidth: 10,
strokeOpacity: 0.7,
lineDash:[3,5],
fill:'#1C11FE',
stroke:'#FA342C',
}效果：
图表组件
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 描边透明度 |
statistic ✨
可选, object
功能描述： 指标卡组件，用于显示位于位于水波图中心的文本
默认配置：
visible: true,
adjustColor: true| 细分配置 | 类型 | 功能描述 |
|---|---|---|
| visible | boolean | 是否显示 |
| adjustColor | boolean | 是否根据水波图颜色自动调整颜色 |
| formatter | function | 对指标卡文本进行格式化，默认值为value |
| style | object | 配置指标卡文字样式 |
| htmlContent | function | 配置指标卡html字符串 |
事件
图形事件
| onLiquidClick 图形点击事件 | onLiquidDblClick 图形双击事件 | onLiquidDblClick 图形双击事件 | onLiquidMouseleave 图形鼠标离开事件 |
|---|---|---|---|
| onLiquidMousemove 图形鼠标移动事件 | onLiquidMousedown 图形鼠标按下事件 | onLiquidMouseup 图形鼠标松开事件 | onLiquidMouseenter 图形鼠标进入事件 |
指标卡事件
| 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。