在这里我们讨论两个例子:
正常下(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 ]
]
}]
演示:https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard
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这个新特性也是这样适用规则。
因此我们就能很好举一反三了!