配置属性

图表容器

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 方向对应的数据字段名，一般对应一个离散字段。

默认配置： 无

seriesField 📌

必选, string

DEMO

功能描述： 多折线必选。 数据集中的分组字段名，一般对应一个分类字段。通过该字段的值，折线图将会被分为多个组，通过颜色进行区分，视觉上呈现为多条折线。

默认配置： 无

step ✨

可选, string

功能描述： 阶梯折线的阶梯转折形态，可选配置为 'hv' | 'vh' | 'vhv' | 'hvh'。

默认配置： hv

图形样式

color

可选, string[] | Function

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

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

DEMO1

DEMO2

lineSize

可选, number

功能描述： 设置折线宽度

默认配置： 2

lineStyle

可选, object

DEMO

功能描述： 设置折线样式。linsStyle 中的lineWidth会覆盖 lineSize 的配置，stroke会覆盖color的设置。lineStyle 可以直接指定，也可以通过 callback 的方式，根据数据为每一条折线指定单独的样式。

默认配置：

smooth

可选, boolean

DEMO

功能描述： 是否将折线绘制为曲线 (spline)。

默认配置: false

point

可选, object

DEMO1 DEMO2

功能描述： 配置折线上的点

默认配置：

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,
    autoHide: true,
    autoRotate: true
},
title: {
    visible: true,
    offset: 12,
},

yAxis

可选, object

DEMOS

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

默认配置：

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

legend

可选, object

DEMOS

功能描述：图例，多折线时显示，用于展示颜色分类信息

默认配置：

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

tooltip

可选, object

功能描述：信息提示框

默认配置：

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

label

功能描述： 标签文本

默认配置：

visible: false
type:'point'
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
}

type 类型	表现
type: 'point'
type: 'line'

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: {},
    },
  ],
}

事件

折线图形事件

数据点事件

图表区域事件

图例事件

坐标轴事件

图形标签事件

标题事件

描述事件

theme

交互

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 轴。
• 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
• 标签：用来解释数据点的值。
• 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。