配置属性

图表容器

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 上的配置将同时影响所有组件的文本信息。

默认配置： 无

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 方向位置映射所对应的数据字段名，一般对应一个分类字段。

默认配置： 无

colorField

可选, string

功能描述：条形颜色映射对应的数据字段名。从基础条形图的使用场景来说，我们不推荐进行额外的颜色映射。

默认配置： 无

图形样式

color

可选, string | string[] | Function

功能描述： 指定条形颜色，如没有配置 colorField,指定一个单值即可。对 colorFiled 进行了配置的情况下，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。

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

用法示例：

// 指定单值
color: '#000000'
// 配合颜色映射，指定多值
colorField:'type',
color:['blue','yellow','green']
//配合颜色映射，使用回调函数指定色值
colorField:'type',
color:(d)=>{
    if(d==='a') return 'red';
    return 'blue';
}

barSize ✨

可选, number

功能描述： 设置条形高度。对于一般场景来说，条形高度会根据数据自行计算，不需特别指定。

默认配置： 无

barStyle ✨

可选, object

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

默认配置： 无

图表组件

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',
}

yAxis

可选, object

DEMOS

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

默认配置：

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

xAxis

可选, object

DEMOS

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

默认配置：

visible: true,
line: {
    visible: false,
},
title: {
    visible: true,
},
label: {
    visible: false,
},
tickLine: {
    visible: false,
},
grid: {
    visible: false,
},

legend

可选, object

DEMOS

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

默认配置：

visible: true,
position: 'top',
flipPage: true

tooltip

可选, object

功能描述：信息提示框

默认配置：

visible: true,
offset: 20,

label

功能描述： 标签文本

DEMO1 DEMO2

默认配置：

visible: false
position: 'left'
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
},
adjustColor: true,
adjustPosition: false

conversionTag ✨

可选, object

DEMO

功能描述： 转化率组件

默认配置：

visible: false,
size: 32,
spacing: 8,
offset: 32,
arrow:{
  headSize: 12
}

事件

图形事件

图表区域事件

图例事件

坐标轴事件

图形标签事件

标题事件

描述事件

交互

scrollBar ✨

可选, object

DEMO

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

示例代码：

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 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。

数据类型

用法建议

元素

• X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
• Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
• 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
• 标签：用来解释数据点的值。
• 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。