在这里我们讨论两个例子:
正常下(x是类目轴,y是数值轴),而如果把x,y变成非正常轴,series
下的data仍是一维数组时候,就会使用图表出现异常
我们详细说说解决方法
当x,y轴都是类目轴怎么办?
xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }]
演示:
x,y都是数值轴
option = { xAxis: { type: 'value', data: [1, 2, 3, 4, 5, 6, 7], name: 'x轴' }, yAxis: { type: 'value', name: 'y轴' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] };
使用上述代码,可以发现柱状图的左上角那个点的x和y的值是相等的,从左往右分别是70,80,110,120,130,150,200
本以为这能过渡给y轴,实则不然。
上面我们也说了这是 series.data的问题,
通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』
特别地,当只有一个轴为类目轴(axis.type 为
'category'
)的时候,数据可以简化用一个一维数组表示
那么也就是说,需要在xAxis.type='value'的时候,把x轴的数据存放到series.data里面去。本来正常应该y是value,x是category
option = { xAxis: { type: 'value', name: 'x轴' }, yAxis: { type: 'value', name: 'y轴' }, series: [{ data: [ [1,120], [2,200], [3,150], [4,80], [5,70], [6,110], [7,130] ], type: 'bar' }] };
还可以使用新特性dataset来设置,代码如下,效果和上图一致
option = { xAxis: { type: 'value', name: 'x轴' }, yAxis: { type: 'value', name: 'y轴' }, series: [{ type: 'bar' }], dataset: { source: [ [1, 120], [2, 200], [3,150], [4,80], [5,70], [6,110], [7,130] ] } };
通过上面案例,我们明白,
如果是type是value
类型,是无法通过series.data的索引去访问xAis里面的值的,data的第一个写啥值就是啥
反之,如果是category
,就可以通过索引去访问类目轴里的data
dataset这个新特性也是这样适用规则。
因此我们就能很好举一反三了!