什么是数据列

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

  1. [
  2.   {
  3.     name: '',
  4.     data: [],
  5.   },
  6. ];

提示：数据列配置是个数组，根据数组中的数据列数量，展示不同类型的图。

数据列中的属性

属性名称 说明 类型 必填项
name 数据列的名字，并且会显示在提示框（Tooltip）及图例（Legend）中 String YES
data 该数据列的数据，是个二维数据 Array YES
yAxis 对于需要展示双轴的情况下，需要指定该数据列使用的坐标轴，0：左Y，1：右Y Number NO
type 针对混合图，需要制定数据列展示对应图的形态 String NO
color 自定义该数据列的对应图的颜色 String NO
dodge 对数据列进行分组, 分组堆叠柱状图会用到 String NO

基础数据格式

  1. const data = [{ name, data }, { name, data }];

普通的柱状图数据如下：

  1. const data = [
  2.   {
  3.     name: '2018',
  4.     data: [['亚洲', 59], ['欧洲', 13], ['美洲', 19], ['中东', 7], ['南非', 7]],
  5.   },
  6. ];

分组柱状图数据格式如下：

  1. const data = [
  2.   {
  3.     name: '2018',
  4.     data: [['亚洲', 59], ['欧洲', 13], ['美洲', 19], ['中东', 7], ['南非', 7]],
  5.   },
  6.   {
  7.     name: '2019',
  8.     data: [['亚洲', 69], ['欧洲', 18], ['美洲', 10], ['中东', 17], ['南非', 20]],
  9.   },
  10. ];

给分组的柱状图指定不同的颜色

  1. const data = [
  2.   {
  3.     name: '2018',
  4.     color: '#ff0000',
  5.     data: [['亚洲', 59], ['欧洲', 13], ['美洲', 19], ['中东', 7], ['南非', 7]],
  6.   },
  7.   {
  8.     name: '2019',
  9.     color: '#00ff00',
  10.     data: [['亚洲', 69], ['欧洲', 18], ['美洲', 10], ['中东', 17], ['南非', 20]],
  11.   },
  12. ];
  • 指定color字段， 可以给当前分组的图形设置颜色

多个坐标轴设置

  1. let data = [
  2.   {
  3.     name: '产品A',
  4.     yAxis: 0,
  5.     data: [
  6.       ['2018-10', 5],
  7.       ['2018-11', 6],
  8.       ['2018-12', 2],
  9.       ['2019-01', 11],
  10.       ['2019-02', 12],
  11.     ],
  12.   },
  13.   {
  14.     name: '增长率',
  15.     yAxis: 1,
  16.     data: [
  17.       ['2018-10', 95.97],
  18.       ['2018-11', 47.88],
  19.       ['2018-12', 20.85],
  20.       ['2019-01', 49.2],
  21.       ['2019-02', 29.65],
  22.     ],
  23.   },
  24. ];
  • 通过指定坐标轴上的yAxis为数据指定Y坐标轴

混合图指定图类型

  1. let data = [
  2.   {
  3.     name: '产品A',
  4.     yAxis: 0,
  5.     type: 'bar',
  6.     data: [
  7.       ['2018-10', 5],
  8.       ['2018-11', 6],
  9.       ['2018-12', 2],
  10.       ['2019-01', 11],
  11.       ['2019-02', 12],
  12.     ],
  13.   },
  14.   {
  15.     name: '增长率',
  16.     yAxis: 1,
  17.     type: 'line',
  18.     data: [
  19.       ['2018-10', 95.97],
  20.       ['2018-11', 47.88],
  21.       ['2018-12', 20.85],
  22.       ['2019-01', 49.2],
  23.       ['2019-02', 29.65],
  24.     ],
  25.   },
  26. ];
  • 通过设置type 字段指定当前分组的展示类型, 目前只支持bar, line