echarts配置项图文介绍——xAxis

本文仅用于个人学习笔记，文中出现错误或不恰当请在评论区指出。本文仅介绍稍有难度的配置项，极其简单易懂的配置项请自行移步官网查阅文档。

一、用途

直角坐标系 grid 中的 x 轴，单个grid支持多个x轴。

二、配置项

1.gridIndex：x 轴所在的 grid 的索引，默认位于第一个 grid。
例如：当grid（直角坐标系）有多个时，使用该配置项表明当前x轴对应的是哪个grid组件。
2.nameLocation ：坐标轴名称显示位置。
      可选：‘start’、‘middle’ 、 ‘center’或者’end’。
3. nameGap ：坐标轴名称与轴线之间的距离。

4.inverse:是否是反向坐标轴。
      默认值即为false时如下图

为true时如下图(注意name的位置也跟随变换)

5.boundaryGap：坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
          类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。如下图所示。
为false时如下图

为true时如下图

非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
不设置时

设置为boundaryGap: [‘70%’, ‘100%’]时(注：此处的数据并不是准确的echarts为了美观会自行取近似值，比如此处就不允许15、10等距离不相等的数据出现，boundaryGap: [‘100%’, ‘100%’]效果其实也是相同的)

6.min、max：坐标轴刻度最小最大值。（与boundaryGap冲突且优先级更大）

7.scale:是否是脱离 0 值比例。(只在数值轴中有效,且在设置 min 和 max 之后该配置项无效。)

8.splitNumber:坐标轴的分割段数，(只是个预估值)

9. minInterval、maxInterval:自动计算的坐标轴最小、最大间隔大小。例如可以设置成1保证坐标轴分割刻度显示成整数。

10.interval：强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

11.axisLine:坐标轴轴线相关设置。
(1).axisLine. onZero :X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
设置为false时

设置为true时

(2).axisLine. onZeroAxisIndex：当有双轴时（两个Y轴），可以用这个属性手动指定，在哪个y轴的 0 刻度上。
(3).axisLine. symbol :轴线两边的箭头
默认不显示箭头，即 ‘none’。两端都显示箭头可以设置为 ‘arrow’，只在末端显示箭头可以设置为 [‘none’, ‘arrow’]。
(4).axisLine. symbolSize:轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
(5).axisLine. symbolOffset :轴线两边的箭头的偏移。
(6).axisLine. lineStyle：坐标轴线的样式
12.axisTick：坐标轴刻度相关设置。
(1).axisTick. alignWithLabel:类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如下图。

(2).axisTick. interval ：坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
(3).axisTick. inside:坐标轴刻度是否朝内，默认朝外。
为true时

为false时

(4).axisTick. length :坐标轴刻度的长度。

(5).axisTick. lineStyle:刻度线的样式设置。
13.** minorTick**：坐标轴次刻度线相关设置。
坐标轴次刻度线如下图：

（1）minorTick. splitNumber ：次刻度线分割数，默认会分割成 5 段。（用法同上文中的 splitNumber）
14.** axisLabel**：坐标轴刻度标签的相关设置。
下图中若设置为false则横坐标下没有文字

（1）axisLabel. interval：坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。（函数用法请见官方文档）
值为0时：显示所有横坐标。

值为1时，隔一个显示一个

（2）axisLabel. inside：刻度标签是否朝内，默认朝外。

(3).axisLabel. rotate:刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。

(4).axisLabel. margin :刻度标签与轴线之间的距离。

(5).axisLabel. formatter:刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
函数使用方法自行查看文档

(6)axisLabel. showMinLabel、axisLabel. showMaxLabel:是否显示最小、最大 tick 的 label。

15.splitLine:坐标轴在 grid 区域中的分隔线。

(1).splitLine. interval :坐标轴分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式参考文档。
设置为1时如下图：

（2）splitLine. lineStyle：分割线的样式。
16.minorSplitLine：坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线

17.splitArea:坐标轴在 grid 区域中的分隔区域，默认不显示。

(1)splitArea. interval :坐标轴分隔区域的显示间隔，在类目轴中有效。
逻辑与splitLine. interval一样

（2）splitArea. areaStyle：分隔区域的样式设置。

18.data:类目数据，在类目轴（type: ‘category’）中有效。
如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。
如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{value: '周一',// 突出周一textStyle: {fontSize: 20,color: 'red'}
}, '周二', '周三', '周四', '周五', '周六', '周日']

可以为某个data单独设置样式

19.axisPointer:坐标轴指示器配置项。(其子配置项与grid.tooltip. axisPointer相同，请翻阅往期文章)

echarts配置项图文介绍——xAxis相关推荐

【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍) 参考文章: (1)Mysql的Root密码忘记,查看或修改的解决方法(图文介绍) (2)https://www.cnblogs.com/ ...
联想拯救者y7000p加内存条_怎么给笔记本升级内存和硬盘联想Y7000P加装内存和硬盘图文介绍...
一般目前新买的笔记本电脑,大都是标配8GB内存和单块固态硬盘,内存和硬盘容量适中,但对于一些制图设计.偏大型游戏,又或者对硬盘存储要求比较高的用户来说,显然就不太够用,这时候我们一般会通过升级内存和硬 ...
图文介绍--光纤接口类型
图文介绍--光纤接口类型ST.SC.FC.LC ST.SC.FC光纤接头是早期不同企业开发形成的标准,使用效果一样,各有优缺点. ST.SC连接器接头常用于一般网络.ST头插入后旋转半周有一卡口固定, ...
注销苹果id 显示联系服务器时出现问题,帮您还原连接appleid服务器时出错【图文介绍】的处理办法_...
近日有小伙伴发现电脑出现问题了,在突然遇到连接appleid服务器时出错时不知所措了,对于连接appleid服务器时出错带来的问题,其实很好解决连接appleid服务器时出错带来的问题,下面小编 ...
VM虚拟机安装篇·VMware Workstation Pro（虚拟机）安装Win10操作系统（图文介绍超详细）
VMware Workstation Pro(虚拟机)安装Win10操作系统(图文介绍适合小白) 文章目录 VMware Workstation Pro(虚拟机)安装Win10操作系统(图文介绍适合小 ...
无限法则服务器角色操作忙,无限法则海岛地图决赛圈打药及火山灰伤害测试图文介绍[多图]...
<无限法则>中海岛图玩家在好不容易来到决赛圈的时候,可能会遇到火山灰.这个时候大家会手忙脚乱,药包不够怎么办?火山灰毒性毒死我怎么办?今天小编就为大家带来无限法则海岛地图决赛圈打药及火山灰 ...
php 导出mysql 数据库表结构图_导入和导出数据表的图文介绍（phpMyAdmin的使用教程5）...
导入和导出数据表的图文介绍(phpMyAdmin的使用教程5) 导入和导出数据是互逆的两个操作,导入数据是通过扩展名为.sql的文件导入到数据库中,导出数据是将数据表结构,表记录储存为.sql的文件, ...
设计师：设计师知识储备之室内设计风格图文介绍大全(中式风格、清新风格、现代简约、现代风格、后现代风格、田园风格-中式田园-欧式田园-美式田园-美式乡村风格)之详细攻略
设计师:设计师知识储备之室内设计风格图文介绍大全(中式风格.清新风格.现代简约.现代风格.后现代风格.田园风格-中式田园-欧式田园-美式田园-美式乡村风格)之详细攻略目录

echarts配置项图文介绍——xAxis

echarts配置项图文介绍——xAxis

一、用途

二、配置项

echarts配置项图文介绍——xAxis相关推荐

最新文章

热门文章