setOptionxAxis / yAxis
坐标轴。X 按数据时间,Y 按高度数值。刻度显示计算值,库不换算单位。
调用
ts
chart.setOption({
xAxis: {
show: true,
name: '时间'
},
yAxis: {
show: true,
name: '高度(m)',
min: 0,
max: 15000
}
})name 写了才显示:X 在轴右侧,Y 在轴顶部,右缘对齐绘图区左缘。单位写在 name 里,不要传 unit。
字段
| 字段 | 说明 | 类型 | 可选值 | 默认 |
|---|---|---|---|---|
show | 是否显示该轴 | boolean | true / false | true |
name | 轴名称 | string | — | 不显示 |
min / max | 截断范围。X 为数据时间(与 dateTime 同一写法),Y 为高度 | number / string | — | 数据范围 |
padding | name 内边距。数字、[上下, 左右] 或 [上, 右, 下, 左]。百分比相对容器 | number / string / array | — | 0 |
axisLabel | 刻度文字 | object | — | 显示 |
axisLine | 轴线。X 画底边,Y 画左边 | object | — | 不显示 |
axisTick | 刻度短线 | object | — | 不显示 |
splitLine | 分割线。X 为竖线,Y 为横线 | object | — | 不显示 |
Y 轴 padding 的 bottom 会加大名称到下方刻度的间距。增大 right 则名称左移。
axisLabel
| 字段 | 说明 | 类型 | 可选值 | 默认 |
|---|---|---|---|---|
show | 是否显示刻度文字 | boolean | true / false | true |
showMinLabel | 是否显示最小刻度 | boolean | true / false | true |
showMaxLabel | 是否显示最大刻度 | boolean | true / false | true |
dilute | X 轴是否抽稀。默认按绘图区宽度和文字宽度估算刻度数;false 则视窗内全部取样,仍会避开叠字。只作用于 X | boolean | true / false | true |
fontFamily | 字体 | string | — | sans-serif |
fontSize | 字号,像素 | number | — | 14 |
color | 文字颜色 | string | — | #6b7280 |
format | 自定义刻度文字。入参为刻度原始值,返回值按 HTML 写入 | function | — | X 用 dateTime 原文 |
X 轴默认显示数据里的 dateTime 原文,库不会再格式化时间。长时次会按绘图区宽度抽稀;Y 轴数据上限若紧贴整步刻度(如 10000 旁的 10888)则不再重复画,避免叠字。
axisLine / axisTick / splitLine
| 字段 | 说明 | 类型 | 可选值 | 默认 |
|---|---|---|---|---|
show | 是否显示。默认不画,设为 true 才画 | boolean | true / false | false |
color | 颜色。轴线 / 短线 #d1d5db,分割线 #e5e7eb | string | — | 见左 |
width | 线宽,像素 | number / string | — | 1 |
在线示例
在线体验见 示例 · 轴配置。