Echarts之yAxis属性超超超级详情版学习

ops/2024/12/26 16:22:35/

yAxis

属性说明类型
id组件idstring
show是否显示y轴boolean
alignTicks在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对'value''log'类型的轴有效boolean
positiony 轴的位置string
offsetY 轴相对于默认位置的偏移,在相同的 position 上有多个 Y 轴的时候有用。注:若未将 yAxis.axisLine.onZero 设为 false , 则该项无法生效number
type坐标轴类型string
nameLocation

坐标轴名称显示位置

string
nameTextStyle

坐标轴名称的文字样式.
yAxis.nameTextStyle.color:坐标轴名称的颜色
yAxis.nameTextStyle.fontStyle:坐标轴名称文字字体的风格

yAxis.nameTextStyle.fontWeight:坐标轴名称文字字体的粗细。

yAxis.nameTextStyle.align:文字水平对齐方式
yAxis.nameTextStyle.verticalAlign:文字垂直对齐方式,默认自动.
yAxis.nameTextStyle.lineHeight:行高
yAxis.nameTextStyle.backgroundColor:文字块背景色(可以使用颜色值或者也可以直接使用图片)
yAxis.nameTextStyle.borderColor:文字块边框颜色
yAxis.nameTextStyle.borderWidth:文字块边框宽度
yAxis.nameTextStyle.borderType:文字块边框描边类型
yAxis.nameTextStyle.borderDashOffset:用于设置虚线的偏移量
yAxis.nameTextStyle.borderRadius:文字块的圆角
yAxis.nameTextStyle.padding:文字块的内边距
yAxis.nameTextStyle.shadowColor:文字块的背景阴影颜色
yAxis.nameTextStyle.shadowBlur:文字块的背景阴影长度
yAxis.nameTextStyle.shadowOffsetX:文字块的背景阴影 X 偏移
yAxis.nameTextStyle.shadowOffsetY:文字块的背景阴影 Y 偏移
yAxis.nameTextStyle.width:文本显示宽度
yAxis.nameTextStyle.height:文本显示高度

yAxis.nameTextStyle.textBorderColor:文字本身的描边颜色
yAxis.nameTextStyle.textBorderWidth:文字本身的描边宽度
yAxis.nameTextStyle.textBorderType:文字本身的描边类型
yAxis.nameTextStyle.textBorderDashOffset:用于设置虚线的偏移量

yAxis.nameTextStyle.textShadowColor:文字本身的阴影颜色

yAxis.nameTextStyle.textShadowBlur:文字本身的阴影长度

yAxis.nameTextStyle.textShadowOffsetX:文字本身的阴影 X 偏移

yAxis.nameTextStyle.textShadowOffsetY:文字本身的阴影 Y 偏移
yAxis.nameTextStyle.overflow:文字超出宽度是否截断或者换行

yAxis.nameTextStyle.ellipsis:在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本

yAxis.nameTextStyle.rich:可以自定义富文本样式

-
nameGap坐标轴名称与轴线之间的距离
nameRotate坐标轴名字旋转,角度值
nameTruncate坐标轴名字的截断
yAxis.nameTruncate.maxWidth:截断文本的最大长度,超过此长度会被截断
yAxis.nameTruncate.ellipsis:截断后文字末尾显示的内容
inverse是否是反向坐标轴
boundaryGap坐标轴两边留白策略boolean
Array
min坐标轴刻度最小值number
string
Function
max坐标轴刻度最大值number
string
Function
scale是否是脱离 0 值比例

boolean

splitNumber坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整number
minInterval自动计算的坐标轴最小间隔大小number
maxInterval自动计算的坐标轴最大间隔大小number
interval强制设置坐标轴分割间隔number
logBase对数轴的底数,只在对数轴中(type: 'log')有效number
startValue用于指定轴的起始值number
silent坐标轴是否是静态无法交互boolean
triggerEvent坐标轴的标签是否响应和触发鼠标事件,默认不响应boolean
axisLine

坐标轴轴线相关设置
yAxis.axisLine.show:是否显示坐标轴轴线
yAxis.axisLine.onZero:X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效
yAxis.axisLine.onZeroAxisIndex:当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上

yAxis.axisLine.symbol:轴线两边的箭头

yAxis.axisLine.symbolSize:轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)

yAxis.axisLine.symbolOffset:轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。

yAxis.axisLine.lineStyle:坐标轴样式

yAxis.axisLine.lineStyle.color:坐标轴线线的颜色

yAxis.axisLine.lineStyle.width:坐标轴线线宽

yAxis.axisLine.lineStyle.type:线的类型

yAxis.axisLine.lineStyle.dashOffset:用于设置虚线的偏移量

yAxis.axisLine.lineStyle.cap:用于指定线段末端的绘制方式

yAxis.axisLine.lineStyle.join:用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)

yAxis.axisLine.lineStyle.miterLimit:用于设置斜接面限制比例

yAxis.axisLine.lineStyle.shadowBlur:图形阴影的模糊大小

yAxis.axisLine.lineStyle.shadowColor:阴影颜色

yAxis.axisLine.lineStyle.shadowOffsetX:阴影水平方向上的偏移距离。

yAxis.axisLine.lineStyle.shadowOffsetY:阴影垂直方向上的偏移距离

yAxis.axisLine.lineStyle.opacity:图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形

-
axisTick

坐标轴刻度相关设置
yAxis.axisTick.show:是否显示坐标轴刻度

yAxis.axisTick.alignWithLabel:类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐

yAxis.axisTick.interval:坐标轴刻度的显示间隔,在类目轴中有效

yAxis.axisTick.inside:坐标轴刻度是否朝内,默认朝外

yAxis.axisTick.length:坐标轴刻度的长度

yAxis.axisTick.lineStyle:刻度线的样式设置

yAxis.axisTick.lineStyle.color:刻度线的颜色

yAxis.axisTick.lineStyle.width:坐标轴刻度线宽

yAxis.axisTick.lineStyle.type:线的类型

yAxis.axisTick.lineStyle.dashOffset:用于设置虚线的偏移量

yAxis.axisTick.lineStyle.cap:用于指定线段末端的绘制方式

yAxis.axisTick.lineStyle.join:用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)

yAxis.axisTick.lineStyle.miterLimit:用于设置斜接面限制比例

yAxis.axisTick.lineStyle.shadowBlur:图形阴影的模糊大小

yAxis.axisTick.lineStyle.shadowColor:阴影颜色

yAxis.axisTick.lineStyle.shadowOffsetX:阴影水平方向上的偏移距离

yAxis.axisTick.lineStyle.shadowOffsetY:阴影垂直方向上的偏移距离

yAxis.axisTick.lineStyle.opacity:图形透明度

yAxis.axisTick.customValues:自定义要显示的坐标轴刻度位置

yAxis.axisTick.minorTick:坐标轴次刻度线相关设置

yAxis.axisTick.minorTick.show:是否显示次刻度线

yAxis.axisTick.minorTick.splitNumber:次刻度线分割数

yAxis.axisTick.minorTick.length:次刻度线的长度

yAxis.axisTick.minorTick.lineStyle.color:刻度线的颜色

yAxis.axisTick.minorTick.lineStyle.width:次刻度线线宽

yAxis.axisTick.minorTick.type:线的类型

yAxis.axisTick.minorTick.dashOffset:用于设置虚线的偏移量

yAxis.axisTick.minorTick.cap:用于指定线段末端的绘制方式

yAxis.axisTick.minorTick.join:用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)

yAxis.axisTick.minorTick.miterLimit:用于设置斜接面限制比例

yAxis.axisTick.minorTick.shadowBlur:图形阴影的模糊大小

yAxis.axisTick.minorTick.shadowColor:阴影颜色

yAxis.axisTick.minorTick.shadowOffsetX:阴影水平方向上的偏移距离

yAxis.axisTick.minorTick.shadowOffsetY:阴影垂直方向上的偏移距离

yAxis.axisTick.minorTick.opacity:图形透明度

yAxis.axisTick.axisLabel:坐标轴刻度标签的相关设置

yAxis.axisTick.axisLabel.show:是否显示刻度标签

yAxis.axisTick.axisLabel.interval:坐标轴刻度标签的显示间隔,在类目轴中有效

yAxis.axisTick.axisLabel.inside:刻度标签是否朝内,默认朝外

yAxis.axisTick.axisLabel.rotate:刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠

yAxis.axisTick.axisLabel.margin:刻度标签与轴线之间的距离

yAxis.axisTick.axisLabel.formatter:刻度标签的内容格式器,支持字符串模板和回调函数两种形式

yAxis.axisTick.axisLabel.showMinLabel:是否显示最小 tick 的 label

yAxis.axisTick.axisLabel.showMaxLabel:是否显示最大 tick 的 label

yAxis.axisTick.axisLabel.verticalAlignMinLabel:最小的坐标刻度标签的对齐方式

yAxis.axisTick.axisLabel.vercalAlignMaxLabel:最大的坐标刻度标签的对齐方式

yAxis.axisTick.axisLabel.hideOverlap:是否隐藏重叠的标签

yAxis.axisTick.axisLabel.customValues:自定义要显示的标签位置

yAxis.axisTick.axisLabel.color:刻度标签文字的颜色

yAxis.axisTick.axisLabel.fontStyle:文字字体的风格

yAxis.axisTick.axisLabel.fontWeight:文字字体的粗细

yAxis.axisTick.axisLabel.fontFamily:文字的字体系列

yAxis.axisTick.axisLabel.fontSize:文字的字体大小

yAxis.axisTick.axisLabel.align:文字水平对齐方式,默认自动

yAxis.axisTick.axisLabel.verticalAlign:文字垂直对齐方式

yAxis.axisTick.axisLabel.lineHeight:行高

yAxis.axisTick.axisLabel.backgroundColor:文字块背景色

yAxis.axisTick.axisLabel.borderColor:文字块边框颜色

yAxis.axisTick.axisLabel.borderWidth:文字块边框宽度

yAxis.axisTick.axisLabel.borderType:文字块边框描边类型

yAxis.axisTick.axisLabel.borderDashOffset:用于设置虚线的偏移量

yAxis.axisTick.axisLabel.borderRadius:文字块的圆角

yAxis.axisTick.axisLabel.padding:文字块的内边距

yAxis.axisTick.axisLabel.shadowColor:文字块的背景阴影颜色

yAxis.axisTick.axisLabel.shadowBlur:文字块的背景阴影长度

yAxis.axisTick.axisLabel.shadowOffsetX:文字块的背景阴影 X 偏移

yAxis.axisTick.axisLabel.shadowOffsetY:文字块的背景阴影 Y 偏移

yAxis.axisTick.axisLabel.width:文本显示宽度

yAxis.axisTick.axisLabel.height:文本显示高度

yAxis.axisTick.axisLabel.textBorderColor:文字本身的描边颜色

yAxis.axisTick.axisLabel.textBorderWidth:文字本身的描边宽度

yAxis.axisTick.axisLabel.textBorderType:文字本身的描边类型

yAxis.axisTick.axisLabel.textBorderDashOffset:用于设置虚线的偏移量

yAxis.axisTick.axisLabel.textShadowColor:文字本身的阴影颜色

yAxis.axisTick.axisLabel.textShadowOffsetX:文字本身的阴影 X 偏移

yAxis.axisTick.axisLabel.textShadowOffsetY:文字本身的阴影 Y 偏移

yAxis.axisTick.axisLabel.overflow:文字超出宽度是否截断或者换行

yAxis.axisTick.axisLabel.ellipsis:在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本

yAxis.axisTick.axisLabel.rich:可以自定义富文本样式

-
splitLine

坐标轴在 grid 区域中的分隔线
yAxis.splitLine.show:是否显示分隔线
yAxis.splitLine.interval:坐标轴分隔线的显示间隔,在类目轴中有效

yAxis.splitLine.lineStyle:分割线线段样式

-
minorSplitLine

坐标轴在 grid区域中的次分隔线。次分割线会对齐次刻度线 minorTick

yAxis.minorSplitLine.show:是否显示次分隔线

yAxis.minorSplitLine.lineStyle:此分割线线段样式

splitArea

坐标轴在 grid 区域中的区域,默认不显示

yAxis.splitArea.interval:是否显示次分隔区域的显示间隔

yAxis.splitArea.show:是否显示次分隔区域

yAxis.splitArea.lineStyle:此分割区域的样式

data类目数据
axisPointer

坐标轴指示器配置项

yAxis.axisPointer.label:坐标轴指示器的文本标签

yAxis.axisPointer.lineStyle:坐标轴指示器样式

yAxis.axisPointer.shadowStyle:坐标轴指示器阴影样式

yAxis.axisPointer.triggerEmphasis:坐标轴指示器是否触发系列强调功能

yAxis.axisPointer.triggerTooltip:坐标轴指示器是否触发 tooltip,如果不想触发 tooltip 可以关掉。

yAxis.axisPointer.value:坐标轴指示器当前的 value

yAxis.axisPointer.status:坐标轴指示器当前的状态

yAxis.axisPointer.handel:坐标轴指示器拖拽手柄,适用于触屏的环境

-
animation是否开启动画boolean
animationThreshold是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画number
animationDuration初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果number
animationEasing初始动画的缓动效果string
animationDelay初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果number
Function
animationDelayUpdate数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果
animationDurationUpdate数据更新动画的时长number
Function
zlevelY 轴所有图形的 zlevel 值
zY 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖


http://www.ppmy.cn/ops/145158.html

相关文章

各种网站(学习资源及其他)

欢迎围观笔者的个人博客~ 也欢迎通过RSS网址https://kangaroogao.github.io/atom.xml进行订阅~ 大学指南 上海交通大学生存手册中国科学技术大学人工智能与数据科学学院本科进阶指南USTC不完全入学指南大学生活质量指北科研论 信息搜集 AI信息搜集USTC飞跃网站计算机保研 技…

MFC/C++学习系列之简单记录5

MFC/C学习系列之简单记录5 前言控件位置设置实际说明C# Tab位置设定的相关使用C MFC中Tab位置设定的相关使用 总结 前言 需求提及不够清楚,没有详细的文档输入,甚至协议都是看代码,然后查文件才确认协议更改。这样对新来的开发人员很不友好。…

基于vue-popperjs的二次封装弹窗

前言&#xff1a; 基于vue-popperjs的二次封装代码 <template><!-- 1. :appendToBody"true"是否把位置加到body外层标签上饿了么UI和antD是true&#xff0c;iview和vuetifyjs是false2. trigger属性触发方式&#xff0c;常用hover悬浮触发、clickToOpen鼠标…

《机器学习》数据预处理简介

目录 1. 数据清洗&#xff08;Data Cleaning&#xff09; &#xff08;1&#xff09;处理缺失值 &#xff08;2&#xff09;处理异常值 &#xff08;3&#xff09;处理重复数据 2. 数据转换&#xff08;Data Transformation&#xff09; &#xff08;1&#xff09;特征缩…

Xcode 16 编译弹窗问题、编译通过无法,编译通过打包等问题汇总

问题1&#xff1a;打包的过程中不断提示 &#xff1a;codesign 想要访问你的钥匙串中的密钥“develop 或者distribution 证书” 解决&#xff1a;打开钥匙串&#xff0c;点击证书---显示简介---信任----改为始终信任 &#xff08;记住 &#xff1a;不能只修改钥匙的显示简介的…

《战神:诸神黄昏》游戏运行时提示找不到emp.dll怎么办?emp.dll丢失如何修复?

《战神&#xff1a;诸神黄昏》游戏运行时提示找不到emp.dll怎么办&#xff1f;emp.dll丢失的修复方法 在畅游《战神&#xff1a;诸神黄昏》这款史诗级游戏的过程中&#xff0c;如果突然遭遇“找不到emp.dll”的错误提示&#xff0c;无疑会打断你的冒险之旅。作为一名深耕软件开…

Java面试题,数据结构,图的最短路径算法应用于社交网络分析

图的最短路径算法应用于社交网络分析 在一个大型社交网络中&#xff0c;用户想要找到连接两个特定用户的最短路径。假设你已经有了这个社交网络的数据模型&#xff0c;其中节点代表用户&#xff0c;边代表用户之间的关系。请设计一个解决方案&#xff0c;以找出两个用户之间的…

Django models中的增删改查与MySQL SQL的对应关系

在 Django 中&#xff0c;models 提供了一种高层次的抽象来与数据库进行交互&#xff0c;使得开发者可以使用 Python 代码而非直接编写 SQL 来执行增删改查&#xff08;CRUD&#xff09;操作。下面将详细介绍 Django 的 ORM&#xff08;对象关系映射&#xff09;操作如何对应到…