位置: IT常识 - 正文

Echarts y轴相关配置(echarts y轴设置)

编辑：rootadmin

Echarts y轴相关配置目录1 简介2 y轴配置2.1 y轴主要属性2.2 y轴刻度设置3.总结1 简介

推荐整理分享Echarts y轴相关配置(echarts y轴设置)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts y轴属性,echarts设置y轴的间距,echarts调整y轴数值,echarts调整y轴数值,echarts y轴设置,echart y轴name位置,echart y轴name位置,echart y轴name位置,内容如对您有帮助，希望把文章链接给更多的朋友！

本篇介绍我们在使用Echarts画图时常用的一些y轴坐标设置，如y轴位置，y轴偏移量、y轴刻度、y轴最大最小值等；

2 y轴配置2.1 y轴主要属性

只有一个纵坐标的情况下，常用y轴配置参数如下：

属性类型值showbooleantrue：展示 false: 不展示typestring‘value’: 数值轴，适用于连续数据。 ‘category’ 类目轴，适用于离散的类目数据。‘time’ 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。‘log’ 对数轴。适用于对数数据。namestring坐标轴名称nameLocationstring坐标轴名称显示位置。‘start’：起始位置（底部）‘middle’ 或者 ‘center’：中间‘end’：末尾（默认值）nameGapnumber坐标轴名称与轴线之间的距离。inverseboolean是否是反向坐标轴。minnumber\string\Function坐标轴刻度最小值。maxnumber\string\Function坐标轴刻度最大值scaleboolean是否是脱离 0 值比例。在设置 min 和 max 之后该配置项无效。splitNumbernumber坐标轴的分割段数minIntervalnumber坐标轴最小间隔大小。maxIntervalnumber坐标轴最大间隔大小。intervalnumber强制设置坐标轴分割间隔logBasenumber对数轴的底数，只在对数轴中（type: ‘log’）有效。默认值为10。axisLineObject坐标轴轴线相关设置,axisLine.show:控制坐标轴是否展示。axisTickObject坐标轴刻度相关设置，详情见2.2minorTickObject坐标轴次刻度线相关设置，详情见2.2dataArray在类目轴（type: ‘category’）中有效splitLineObject坐标轴在 grid 区域中的分隔线，默认展示；minorSplitLineObject坐标轴在 grid 区域中的次分隔线,默认不展示2.2 y轴刻度设置axisTick：坐标轴刻度相关设置属性类型含义axisTick.showboolean是否显示坐标轴刻度axisTick.alignWithLabelboolean刻度线是否和标签对齐axisTick.intervalnumber坐标轴刻度的显示间隔，默认为1axisTick.insideboolean坐标轴刻度是否朝内，默认朝外axisTick.lengthnumber坐标轴刻度的长度 Echarts y轴相关配置(echarts y轴设置)

示例：设置展示刻度，刻度线与标签对齐，每间隔两个显示一个刻度，坐标走刻度朝内，刻度长度为10的y轴：

代码如下：

axisTick: { show: true, alignWithLabel: true, interval: 0, inside: false, length: 20}minorTick:坐标轴次刻度线相关设置属性类型含义minorTick.showboolean是否显示坐标轴刻度minorTick.splitNumbernumber次刻度线分割数，默认会分割成 5 段minorTick.lengthnumber坐标轴刻度的长度

示例：设置展示次刻度，刻度线与标签对齐，次刻度线分割数10，坐标轴刻度的长度5：

代码如下：

minorTick: { show: true, splitNumber: 10, length: 5}

通常设置次刻度线会使得刻度密度发生变化，各位调整参数按需使用使用。

3.总结

大部分情况下，Echarts提供的默认配置能满足基本的需求，但是要想达到自己想要的效果，熟悉参数的使用必不可少。除此之外，Echarts还提供了更为丰富的属性，本片只介绍一些常用的参数属性，若想了解更多，可以移步官网。