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

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.mzph.cn/bicheng/64904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jo-im开发:用于WebRTC的ICE中继服务器Coturn搭建

前言 本人计划开发一套具备文本、语音、视频通话功能的IM demo,同时具备多人在线会议功能,按习惯大概会开源版定义名称为Duihao jo-im,本案主要用于实现语音视频通话的基础组件支撑。因为我们选择基于WebRTC实现IM中语音、视频通话&#xff…

【CVE-2024-53375】TP-Link Archer系列路由器认证操作系统命令注入(内附远离和代码利用)

CVE-2024-53375 TP-Link Archer系列路由器认证操作系统命令注入 受影响的设备 使用 HomeShield 功能的 TP-Link 设备容易受到此漏洞的影响。这包括 TP-Link Archer 系列的多款路由器。 经过测试 Archer AXE75(EU)_V1_1.2.2 Build 20240827(发布日期 2024 年 11 月 4 日)…

程控电阻箱应用中需要注意哪些安全事项?

程控电阻箱是一种用于精确控制电路中电流和电压的电子元件,广泛应用于电子实验、测试设备以及精密测量仪器中。在应用程控电阻箱时,为确保安全和设备的正常运行,需要注意以下几个安全事项: 1. 正确连接:确保电阻箱与电…

Promise链式调用

Promise链式调用 上一篇我们实现了通过promise的方式实现获取国家基本信息,本次我们来使用promise链式调用来实现邻国的展现 首先,我们从第一个国家中获取到邻国的国家代码名称 const neighbour data[0].borders[0];然后我们通过fetch来获取邻国信息&a…

Elasticsearch相关知识@1

目录标题 Lucene1. **什么是 Lucene?**2. **Lucene 在 Elasticsearch 中的作用**3. **Lucene 的核心功能**(1) **倒排索引**(2) **分词**(3) **查询解析**(4) **相关性评分** 4. **为什么 Elasticsearch 使用 Lucene?**5. **Lucene 和 Elasticsearch 的区别**6. **总结** 分片…

UE5 渲染管线 学习笔记

兰伯特 SSS为散射的意思 带Bias的可以根据距离自动切换mip的卷积值 而带Level的值mipmaps的定值 #define A8_SAMPLE_MASK .a 这样应该就很好理解了 这个只采样a通道 带Level的参考上面的 朝左上和右下进行模糊 带Bias参考上面

canvas绘制仪表盘刻度盘

canvas画布可以实现在网页上绘制图形的方法,比如图表、图片处理、动画、游戏等。今天我们在vue模板下用canvas实现仪表盘的绘制。 对canvas不熟悉的同学可以先了解下canvas的API文档:canvas API中文网 - Canvas API中文文档首页地图 一、创建模板&#…

Spring Boot 中实现自定义注解记录接口日志功能

👨🏻‍💻 热爱摄影的程序员 👨🏻‍🎨 喜欢编码的设计师 🧕🏻 擅长设计的剪辑师 🧑🏻‍🏫 一位高冷无情的全栈工程师 欢迎分享 / 收藏 / 赞 / 在看…

【超详细实操内容】django的身份验证系统之限制用户访问的三种方式

目录 1、使用request.user.is_authenticated属性 2、装饰器login_required 3、LoginRequiredMixin类 通常情况下,网站都会对用户限制访问,例如,未登录的用户不可访问用户中心页面。Django框架中使用request.user.isauthenticated属性、装饰器loginrequired和LoginRequire…

scss配置全局变量报错[sass] Can‘t find stylesheet to import.

路径没有错误,使用别名即可 后又提示Deprecation Warning: Sass import rules are deprecated and will be removed in Dart Sass 3.0.0. 将import改为use 使用时在$前添加全局变量所在文件,即variable.

基于Qlearning强化学习的机器人路线规划matlab仿真

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下(完整代码运行后无水印): 训练过程 测试结果 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论…

9 RCC使用HSE、HSI配置时钟

一、时钟树 RCC:reset clock control,复位和时钟控制器。HSE是外部的高速时钟信号,可以由有源晶振或者无源晶振提供。如果使用HSE或者HSE经过PLL倍频之后的时钟作为系统时钟SYSCLK,当HSE故障时候,不仅HSE会被关闭,PLL…

认识数据结构之——排序

一、 插入排序: 直接插入排序(以排升序为例): 排序思想: 单趟:记录某个位置的值,一个一个和前面的值比较,碰到更大的就往后覆盖,碰到更小的或者相等的就结束,最后将记录的值插入到…

uniapp 微信小程序 功能入口

单行单独展示 效果图 html <view class"shopchoose flex jsb ac" click"routerTo(要跳转的页面)"><view class"flex ac"><image src"/static/dyd.png" mode"aspectFit" class"shopchooseimg"&g…

苍穹外卖-day05redis 缓存的学习

苍穹外卖-day05 课程内容 Redis入门Redis数据类型Redis常用命令在Java中操作Redis店铺营业状态设置 学习目标 了解Redis的作用和安装过程 掌握Redis常用的数据类型 掌握Redis常用命令的使用 能够使用Spring Data Redis相关API操作Redis 能够开发店铺营业状态功能代码 功能实…

Linux之系统管理

一、相关命令 筛选 grep&#xff0c;可以用来进行筛选&#xff0c;例如对目录筛选课写成 # 过滤出带serv的 ls /usr/sbin | grep serv2. 对服务的操作 2.1 centos6版本 service 服务名 start|stop|restart|status # start&#xff1a;开启 # stop&#xff1a;停止 # restart…

什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap

在刚刚过去的 FlutterInProduction 活动里&#xff0c;Flutter 官方除了介绍「历史进程」和「用户案例」之外&#xff0c;也着重提及了未来相关的 roadmap &#xff0c;其中就有 3.27 里的 Swift Package Manager 、 Widget 实时预览 和 Dart 与 native 平台原生语言直接互操作…

Unity录屏插件-使用Recorder录制视频

目录 1.Recorder的下载 2.Recorder面板 2.1常规录制属性 2.2录制器配置 2.2.1添加录制器 2.2.2配置Input属性 2.2.3配置 Output Format 属性 2.2.4配置 Output File 属性 3.Recorder的使用 3.1录制Game View视频 3.1.1Recorder配置与场景搭建 3.1.2开始录制 3.1.3…

Android Vendor Overlay机制

背景介绍&#xff1a; 看Android 15版本更新时&#xff0c;"Android 15 deprecates vendor overlay"。 猜想这个vendor overlay是之前用过的settings overlay&#xff0c; 不过具体是怎么回事呢&#xff1f; 目录 Vendor Overlay介绍 Vendor Overlay工作原理 Ven…

Python 绘图魔法:用turtle库开启你的编程艺术之旅

&#x1f3e0;大家好&#xff0c;我是Yui_&#xff0c;目标成为全栈工程师~&#x1f4ac; &#x1f351;如果文章知识点有错误的地方&#xff0c;请指正&#xff01;和大家一起学习&#xff0c;一起进步&#x1f440; &#x1f680;如有不懂&#xff0c;可以随时向我提问&#…