codecamp

yAxis的基本属性

在 ECharts 中直角坐标系的 y 轴有可能是不显示的,如果我们要配置 yAxis 的属性,首先就需要将 y 轴显示出来。那么,就存在以下的问题:

要怎么操作能够显示 y 轴?y 轴显示后,它在 grid 组件中的索引是怎样的?它处于什么样的位置?与默认的位置有发生偏移吗?它是什么类型的坐标轴?怎么定义它的名称及名称的位置?

上述的问题都针对了 yAxis 的一些基本属性的设置,下面让我们一一来解决。 

yAxis.show   |   boolean

[ default: true ]

表示是否显示 yAxis 的 y 轴。

yAxis.gridIndex   |   number

[ default: 0 ]

得到 y 轴所在的 grid 的索引,默认位于第一个 grid。

yAxis.position   |   string

得到 y 轴的位置。

可以选择的值:

  • 'left'
  • 'right'
注意:默认 grid 中的第一个 y 轴在 grid 的左侧('left'),第二个 y 轴视第一个 y 轴的位置放在另一侧。

yAxis.offset   |   number

[ default: 0 ]

显示 Y 轴相对于默认位置的偏移,该属性在相同的 position 上有多个 Y 轴的时候会使用到。

yAxis.type   |   string

[ default: 'value' ]

得到 y 坐标轴的类型。

以下是可选的 y 轴类型:

  • 'value' :数值轴,适用于连续数据。
  • 'category' :类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
  • 'time' :时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
  • 'log' :对数轴。适用于对数数据。

yAxis.name   |   string

显示坐标轴的名称。

yAxis.nameLocation   |   string

[ default: 'end' ]

得到坐标轴名称的显示位置。

可以选择:

  • 'start'
  • 'middle'
  • 'end'

yAxis.nameGap   |   number

[ default: 15 ]

坐标轴名称与轴线之间的距离。

yAxis.nameRotate   |   number

[ default: null ]

坐标轴名字旋转,是个角度值。


ECharts设置x轴图形的zlevel和z值
自定义yAxis中坐标轴名称的富文本样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }