Console Chart

指南组件文档国内镜像 Github 

数据格式

什么是数据列

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

[
  {
    name: '',
    data: [],
  },
];

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

数据列中的属性

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

基础数据格式

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

普通的柱状图数据如下：

const data = [
  {
    name: '2018',
    data: [['亚洲', 59], ['欧洲', 13], ['美洲', 19], ['中东', 7], ['南非', 7]],
  },
];

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

const data = [
  {
    name: '2018',
    data: [['亚洲', 59], ['欧洲', 13], ['美洲', 19], ['中东', 7], ['南非', 7]],
  },
  {
    name: '2019',
    data: [['亚洲', 69], ['欧洲', 18], ['美洲', 10], ['中东', 17], ['南非', 20]],
  },
];

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

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

多个坐标轴设置

let data = [
  {
    name: '产品A',
    yAxis: 0,
    data: [
      ['2018-10', 5],
      ['2018-11', 6],
      ['2018-12', 2],
      ['2019-01', 11],
      ['2019-02', 12],
    ],
  },
  {
    name: '增长率',
    yAxis: 1,
    data: [
      ['2018-10', 95.97],
      ['2018-11', 47.88],
      ['2018-12', 20.85],
      ['2019-01', 49.2],
      ['2019-02', 29.65],
    ],
  },
];
  • 通过指定坐标轴上的yAxis为数据指定Y坐标轴

混合图指定图类型

let data = [
  {
    name: '产品A',
    yAxis: 0,
    type: 'bar',
    data: [
      ['2018-10', 5],
      ['2018-11', 6],
      ['2018-12', 2],
      ['2019-01', 11],
      ['2019-02', 12],
    ],
  },
  {
    name: '增长率',
    yAxis: 1,
    type: 'line',
    data: [
      ['2018-10', 95.97],
      ['2018-11', 47.88],
      ['2018-12', 20.85],
      ['2019-01', 49.2],
      ['2019-02', 29.65],
    ],
  },
];
  • 通过设置type 字段指定当前分组的展示类型, 目前只支持bar, line