Vue Highcharts数据列的使用

一、什么是数据列（series，写在最外面）

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

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

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。

数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。

二、数据列中的数据

在数据列的 data 属性中，我们可以定义图表的数据数组，通常有三种定义方式：

1、数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置，要么自动计算，要么从 0 起自增，或者是根据 pointStart 及 pointInterval 自增；在分类轴中， X 值就是 categoies 配置，数值数组配置实例如下：

data : [1, 4, 6, 9, 10] 

在线试一试

2、包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X， 第二个值代表 Y；如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。数组集合的实例：

data ： [ [5, 2], [6,3], [8,2] ]

在线试一试 （注意例子是 x y 轴对调的）

3、数据点对象集合。在这种情况下，集合中元素都是数据点对象，对象中可以配置数据见 plotOptions.series(在这里可以有获取点击的点的数据的方法) 或 plotOptions.{图表类型} 所列。配置实例：

data : [{
    name : "point 1",
    color : "#00ff00",
    y : 0
}, {
    name : "Point 2",
    color : "#ff00ff",
    y : 5
}] 

在线试一试

另外，通过这种方式还可以增加额外变量，详见例子：增加额外变量