echarts x轴类型解析
程序员文章站
2022-05-27 09:34:15
...
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'
}]
};
type有四个值分别是:
value、category、time、log
1、‘value’ 数值轴,适用于连续数据。例如1、2、3、4、5,如果type设置成value,那么,xAxis.data里面设置的数据无效,因为xAxis.data是为category服务的。
类目数据,在类目轴(type: 'category')中有效。
如果没有设置 type,但是设置了 axis.data,则认为 type 是 'category'。
如果设置了 type 是 'category',但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。
解决办法:
通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』
特别地,当只有一个轴为类目轴(axis.type 为 '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'
}]
};
2、‘category’ 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。
3、‘time’ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
4、‘log’ 对数轴。适用于对数数据。