logoCreated with Sketch.

G2Plot

Treemap - 矩形树图

阅读时间约 7 分钟

快速上手

const mobileData = [...];
const treemapPlot = new Treemap(document.getElementById('container'), {
    data: mobileData,
    colorField: 'brand',
});
treemapPlot.render();

配置属性

图表容器

width

可选, number

功能描述： 设置图表宽度。

默认配置： 400

height

可选, number

功能描述： 设置图表高度。

默认配置： 400

forceFit

可选, boolean

功能描述： 图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。

默认配置： true

pixelRatio

可选, number

功能描述： 设置图表渲染的像素比

默认配置： 2

renderer

可选, string

功能描述: 设置图表渲染方式为 canvas 或 svg

默认配置： canvas

数据映射

data 📌

必选, object

功能描述： 设置图表数据源

矩形树图的数据源为json格式的层级嵌套数据，除叶子节点之外，每一层级的数据都需要具备三个属性：

细分配置类型定义
namestring该层级数据的名称
valuenumber该层级数据的数值
childrenobject []该层级数据的子级

当某一层级的数据没有子级(children)时，该层级即为叶子节点。

示例：

{
    name:'root',
    value:100,
    children:[
        {
            name:'a',
            value:10,
            children:[]
        },
        {
            name:'b',
            value:5,
            children:[]
        }
    ]
}

meta

可选, object

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

细分配置项名称类型功能描述
aliasstring字段的别名
formatterfunctioncallback方法，对该字段所有值进行格式化处理
valuesstring[]枚举该字段下所有值
rangenumber[]字段的数据映射区间，默认为[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();

maxLevel ✨

可选, number

功能描述： 矩阵树图的最大嵌套层级

默认配置： 2

colorField 📌

必选, string

功能描述: 矩形颜色映射对应的数据字段名，一般对应一个连续字段或一个分类字段。

图形样式

color

可选, string[]

功能描述： 指定矩形颜色。如不进行配置则采用 theme 中的配色。

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

color: ['#295599', '#3e94c0', '#78c6d0', '#b4d9e4', '#fffef0', '#f9cdac', '#ec7d92', '#bc448c']

rectStyle ✨

可选, object

功能描述： 设置treemap中的矩形样式。rectStyle中的fill会覆盖 color 的配置。pointtyle可以直接指定，也可以通过callback的方式，根据数据指定单独的样式。

细分配置类型功能描述
fillstring填充颜色
strokestring描边颜色
lineWidthnumber线宽
lineDashnumber虚线显示
opacitynumber透明度
fillOpacitynumber填充透明度
strokeOpacitynumber描边透明度

图表组件

title

可选, optional

DEMOS

功能描述： 配置图表的标题，默认显示在图表左上角。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}
细分配置类型功能描述
visibleboolean是否显示
alignTostring位置，支持三种配置：
'left'
styleobject样式：
- fontSize: number 文字大小
- fill: string 文字颜色
- stroke: string  描边颜色
- lineWidth: number 描边粗细
- lineDash: number 虚线描边
- opacity: number 透明度
- fillOpacity: number 填充透明度
- strokeOpacity: number 描边透明度

description

可选, optional

DEMOS

功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}
细分配置类型功能描述
visibleboolean是否显示
alignTostring位置，支持三种配置：
'left'
styleobject样式：
- fontSize: number 文字大小
- fill: string 文字颜色
- stroke: string  描边颜色
- lineWidth: number 描边粗细
- lineDash: number 虚线描边
- opacity: number 透明度
- fillOpacity: number 填充透明度
- strokeOpacity: number 描边透明度

tooltip

可选, object

功能描述：信息提示框

默认配置：

visible: true,
offset: 20,
细分属性类型功能描述
visibleboolean是否显示
offsetnumber距离鼠标位置偏移值
domStylesobject配置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样式
fieldsstring设置tooltip内容字段，默认为[ name, value ]
formatterobject对tooltip items进行格式化，入参为tooltip fields对应数值，出参为格式为{name:'a',value:1}

label

可选, object

DEMO

功能描述： 标签文本

默认配置：

visible: false
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
}
细分配置类型功能描述
visibleboolean是否显示
formatterfunction对文本标签内容进行格式化
offsetXnumber在 label 位置的基础上再往 x 方向的偏移量
offsetYnumber在 label 位置的基础上再往 y 方向的偏移量
styleobject配置文本标签样式。

事件

矩形事件

onRectClick
矩形点击事件		onRectDblClick
矩形双击事件		onRectDblClick
矩形双击事件		onRectMouseleave
矩形鼠标离开事件
onRectMousemove
矩形标移动事件		onRectMousedown
矩形鼠标按下事件		onRectMouseup
矩形鼠标松开事件		onRectMouseenter
矩形鼠标进入事件

面包屑事件

(如配置了drilldown交互)

onBreadcrumbClick
面包屑点击事件		onBreadcrumbDblClick
面包屑双击事件		onBreadcrumbDblClick
面包屑双击事件		onBreadcrumbMouseleave
面包屑鼠标离开事件
onBreadcrumbMousemove
面包屑标移动事件		onBreadcrumbMousedown
面包屑鼠标按下事件		onBreadcrumbMouseup
面包屑鼠标松开事件		onBreadcrumbMouseenter
面包屑鼠标进入事件

图表区域事件

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

图例事件

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

图例标签事件

onLegendLabelClick
图例标签点击事件		onLegendLabelDblClick
图例标签双击事件		onLegendLabelDblClick
图例标签双击事件		onLegendLabelMouseleave
象限标签鼠标离开事件
onLegendLabelMousemove
图例标签鼠标移动事件		onLegendLabelMousedown
图例标签鼠标按下事件		onLegendLabelMouseup
图例标签鼠标松开事件		onLegendLabelMouseenter
图例标签鼠标进入事件

图形标签事件

onLabelClick
图形标签点击事件		onLabelDblClick
图形标签双击事件		onLabelDblClick
图形标签双击事件		onLabelMouseleave
图形标签鼠标离开事件
onLabelMousemove
图形标签鼠标移动事件		onLabelMousedown
图形标签鼠标按下事件		onLabelMouseup
图形标签鼠标松开事件		onLabelMouseenter
图形标签鼠标进入事件

标题事件

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

描述事件

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

交互

drilldown ✨

可选, object

DEMO

数据钻取交互，通过矩形的点击事件及面包屑组件完成数据的上卷下钻。点击矩形下钻至该分类的子级数据，而点击面包屑各节点则可以跳转至当前层级的任一上级节点。

简单使用：

interactions: [
    {
        type: 'drilldown',
    },
],

在钻取过程中，支持配置不同层级的映射。例如在上文的DEMO中，当钻取到第三个层级（某品类所有商品名录）时，数据量非常大，此时再采用分类颜色映射已经失去了认知信息有效性。因此例子中第一层及第二层使用了不同值域的分类映射，而第三层则根据数值大小采用了连续映射。

细分配置类型定义
keynumber层级的深度(depth)，从1开始
fieldstring必选，映射字段
valuesstring []function
interactions: [
    {
        type: 'drilldown',
        cfg: {
            mapping: {
              1: {
                field: 'name',
              },
              2: {
                field: 'name',
                values: ['#f5bc32', '#e66557', '#71c8ea', '#9362b7', '#fd984f', '#279493', '#fd9bc3'],
              },
              3: {
                field: 'value',
                values: (parent) => {
                  const parentColor = parent.shape.attr('fill');
                  return ['#ffffff', parentColor];
                },
              },
            },
        },
    },
],

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

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

plot.render();

changeData()

可选

更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。