配置属性

图表容器

width

可选, number

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

默认配置： 400

height

可选, number

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

默认配置： 400

forceFit

可选, boolean

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

默认配置： true

pixelRatio

可选, number

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

默认配置： 2

renderer

可选, string

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

默认配置： canvas

数据映射

data 📌

必选, array object

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

默认配置： 无

数据源为对象集合，例如：[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]。

meta

可选, object

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

默认配置： 无

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();

xField 📌

必选, string

功能描述： 图形在 x 方向（横向延伸）对应的数据字段名，一般对应一个连续字段。

默认配置： 无

yField 📌

必选, string

功能描述： 图形在 y 方向对应的数据字段名，一般对应一个离散字段。

默认配置： 无

stackField 📌

必选, string

功能描述： 面积堆叠的字段名，通过该字段的值，面积图将会被分割为堆积的多个部分，通过颜色进行区分。

默认配置： 无

图形样式

color

可选, string[] | Function

功能描述： 指定图形颜色，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。

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

areaStyle ✨

可选, object

功能描述： 设置 area 图形的样式。areaStyle 中的fill会覆盖color的设置。sreaStyle 可以直接指定，也可以通过 callback 的方式，根据数据为每个形状指定单独的样式。

smooth ✨

可选, boolean

功能描述： 是否使用曲线形态描绘。

默认配置: false

line ✨

可选, object

功能描述：配置辅助折线，分组及颜色映射方式与面积图形保持一致。

默认配置：

visible: true
size: 2
style:{
    opacity: 1,
    lineJoin: 'round',
    lineCap: 'round',
}

point ✨

可选, object

功能描述： 配置数据点，分组及颜色映射方式与面积图形保持一致。

默认配置：

visible: false,
shape: 'circle',
size: 3,
style: {
    stroke: '#fff',
}

图表组件

title

可选, optional

DEMOS

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

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}

description

可选, optional

DEMOS

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

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}

xAxis

可选, object

功能描述： x 方向上的坐标轴，用于展示 xField 对应的映射信息

DEMOS

默认配置：

visible: true,
grid: {
    visible: false,
},
line: {
    visible: true
},
tickLine: {
     visible: false,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: true,
    offset: 12,
},

yAxis

可选, object

DEMOS

功能描述： y 方向上的坐标轴，用于展示 yField 对应的映射信息

默认配置：

visible: true,
autoHideLabel: false,
autoRotateLabel: false,
autoRotateTitle: true,
grid: {
    visible: true,
},
line: {
    visible: false,
},
tickLine: {
    visible: false,
},
label: {
    visible: true,
},
title: {
    visible: false,
    offset: 12,
},

legend

可选, object

DEMOS

功能描述：图例，配置了 seriesField 时显示，用于展示颜色分类信息

默认配置：

visible: true,
position: 'bottom',
flipPage: true

tooltip

可选, object

功能描述：信息提示框

默认配置：

visible: true,
shared: true,
showCrosshairs: true,
crosshairs: {
  type: 'y'
},
offset: 20,

label

可选, object

DEMO1 DEMO2

功能描述： 标签文本

默认配置：

visible: false;
type: 'area';

guideLine

可选, object[]

DEMOS

功能描述： 配置图表辅助线，支持同时配置多条。

默认配置： 无

配置统计辅助线示例代码：

{
  guideLine: [
    {
      type: 'mean',
      lineStyle: {},
      text: {},
    },
  ],
}

配置自定义辅助线示例代码：

{
  guideLine: [
    {
      start: ['2010-01-01', 100] || ['0%', '50%'],
      end: ['2010-01-10', 50] || ['100%', '80%'],
      lineStyle: {},
      text: {},
    },
  ],
}

事件

面积事件

折线事件

数据点事件

图表区域事件

图例事件

坐标轴事件

图形标签事件

标题事件

描述事件

交互

slider ✨

可选, object

DEMO

功能描述： 缩略轴 (slider) 交互适用于折线数据较多，用户希望关注数据集中某个特殊区间的场景。

scrollBar ✨

可选, object

功能描述： 配置横向滚动条，适用于数据较多的场景。

示例代码：

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

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

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

plot.render();

changeData()

可选

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

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。

何时使用

面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。 堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。

数据类型

用法建议

元素

• X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
• Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
• 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
• 标签：用来解释数据点的值。
• 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。