Skip to content
产品中心
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是否显示该轴booleantrue / falsetrue
name轴名称string不显示
min / max截断范围。X 为数据时间(与 dateTime 同一写法),Y 为高度number / string数据范围
paddingname 内边距。数字、[上下, 左右][上, 右, 下, 左]。百分比相对容器number / string / array0
axisLabel刻度文字object显示
axisLine轴线。X 画底边,Y 画左边object不显示
axisTick刻度短线object不显示
splitLine分割线。X 为竖线,Y 为横线object不显示

Y 轴 paddingbottom 会加大名称到下方刻度的间距。增大 right 则名称左移。

axisLabel

字段说明类型可选值默认
show是否显示刻度文字booleantrue / falsetrue
showMinLabel是否显示最小刻度booleantrue / falsetrue
showMaxLabel是否显示最大刻度booleantrue / falsetrue
diluteX 轴是否抽稀。默认按绘图区宽度和文字宽度估算刻度数;false 则视窗内全部取样,仍会避开叠字。只作用于 Xbooleantrue / falsetrue
fontFamily字体stringsans-serif
fontSize字号,像素number14
color文字颜色string#6b7280
format自定义刻度文字。入参为刻度原始值,返回值按 HTML 写入functionX 用 dateTime 原文

X 轴默认显示数据里的 dateTime 原文,库不会再格式化时间。长时次会按绘图区宽度抽稀;Y 轴数据上限若紧贴整步刻度(如 10000 旁的 10888)则不再重复画,避免叠字。

axisLine / axisTick / splitLine

字段说明类型可选值默认
show是否显示。默认不画,设为 true 才画booleantrue / falsefalse
color颜色。轴线 / 短线 #d1d5db,分割线 #e5e7ebstring见左
width线宽,像素number / string1

在线示例

在线体验见 示例 · 轴配置