ECharts y坐标轴(yAxis)使用详解

yAxis

说明:直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

1 yAxis.id

说明:组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。

默认:无。

参数类型:string。

2 yAxis.show

说明:是否显示 y 轴。

默认:true。

参数类型:boolean。

可选值:

        (1)true,显示y轴。

        (2)false,隐藏y轴。

3 yAxis.type

说明:坐标轴类型。

默认:'value'。

参数类型:string。

可选值:

        (1)'value',数值轴,适用于连续数据。

        (2)'category',类目轴,适用于离散的类目数据。为该类型时类目数据可自动从series.data或dataset.source中取,或者可通过yAxis.data设置类目数据。

        (3)'time',时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

        (4)'log',对数轴。适用于对数数据。

4 yAxis.axisLabel

说明:坐标轴刻度标签的相关设置。

4.1 yAxis.axisLabel.show

说明:是否显示刻度标签。

默认:true。

参数类型:boolean。

可选值:

        (1)true,显示刻度标签。

        (2)false,隐藏刻度标签。

4.2 yAxis.axisLabel.formatter

说明:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。

默认:'{value} '。

参数类型:string,Function

可选值:

        (1)'{value} 任意字符',使用字符串模板,模板变量为刻度默认标签 {value}。

        (2)function (value, index) {return value;},使用函数模板,函数参数分别为刻度数值(类目),刻度的索引。

实例:

ECharts 使用yAxis.axisLabel.formatter自定义Y轴刻度标签--两种方法(字符串模板和函数模板)icon-default.png?t=M85Bhttps://blog.csdn.net/qq_38974638/article/details/107824448

5 yAxis.splitLine

说明:坐标轴在 grid 区域中的分隔线。

5.1 yAxis.splitLine.show

说明:是否显示分隔线。默认数值轴显示,类目轴不显示。

默认:true。

参数类型:boolean。

可选值:

        (1)true,显示分割线。

        (2)false,不显示分割线。

实例:

ECharts 使用yAxis.splitLine.show不显示y坐标轴分隔线icon-default.png?t=M85Bhttps://blog.csdn.net/qq_38974638/article/details/108890469

旭东怪的个人空间_哔哩哔哩_Bilibili旭东怪,人生低谷不可怕,可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili,你感兴趣的视频都在B站。https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0 

  • 6
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值