本节开始将详细来讲述在 ECharts 图表中是如何设置径向轴的属性的。ECharts径向轴常见的属性包括其所在极坐标系的索引、径向轴的类型、判断径向轴是否反向、径向轴名称的显示、径向轴的刻度最值等等,这里就不一一列举了,想要知道更加具体的内容,您可以往下阅读。
[ default: 0 ]
径向轴所在的极坐标系的索引,默认使用第一个极坐标系。
[ default: 'value' ]
径向轴的类型。
可选:
径向轴的名称。在下节内容中我们会对径向轴名称的文本样式进行设置。
[ default: 'end' ]
径向轴名称的显示位置。
可选:
[ default: 15 ]
径向轴名称与轴线之间的距离。
[ default: null ]
径向轴名称旋转,角度值。
[ default: false ]
是否是反向径向轴。该属性在 ECharts 3 中新加。
径向轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。 示例:
boundaryGap: ['20%', '20%']
[ default: null ]
径向轴刻度的最小值。
可以设置成特殊值 'dataMin',此时取数据在该轴上的最小值作为最小刻度。
不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
在类目轴中,也可以设置为类目的序数(如类目轴 data: ['类A', '类B', '类C'] 中,序数 2 表示 '类C'。也可以设置为负数,如 -3)。
当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:
min: function(value) { return value.min - 20;}
其中 value 是一个包含 min 和 max 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最小值。
[ default: null ]
径向轴刻度的最大值。
可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
在类目轴中,也可以设置为类目的序数(如类目轴 data: ['类A', '类B', '类C'] 中,序数 2 表示 '类C'。也可以设置为负数,如 -3)。
当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:
max: function(value) { return value.max - 20;}
其中 value 是一个包含 min 和 max 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。
[ default: false ]
只在数值轴中(type: 'value')有效。
是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
在设置 min 和 max 之后该配置项无效。
[ default: 5 ]
径向轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
在类目轴中无效。
[ default: 0 ]
自动计算的径向轴最小间隔大小。
例如可以设置成1保证坐标轴分割刻度显示成整数。
{
minInterval: 1
}
只在数值轴或时间轴中(type: 'value' 或 'time')有效。
自动计算的径向轴最大间隔大小。
例如,在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
{
maxInterval: 3600 * 24 * 1000
}
只在数值轴或时间轴中(type: 'value' 或 'time')有效。
强制设置径向轴分割间隔。
因为 splitNumber 是预估的值,实际根据策略计算出来的刻度可能无法达到想要的效果,这时候可以使用 interval 配合 min、max 强制设定刻度划分,一般不建议使用。
无法在类目轴中使用。在时间轴(type: 'time')中需要传时间戳,在对数轴(type: 'log')中需要传指数值。
[ default: 10 ]
对数轴的底数,只在对数轴中(type: 'log')有效。
[ default: false ]
径向轴是否是静态无法交互。
[ default: false ]
径向轴的标签是否响应和触发鼠标事件,默认不响应。
事件参数如下:
{
// 组件类型,xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
[ default: 0 ]
径向轴所有图形的 zlevel 值。
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
[ default: 0 ]
径向轴组件的所有图形的z值。控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖。
z 相比 zleve l优先级更低,而且不会创建新的 Canvas。
在本节,我们将要学习如何对 ECharts 极坐标系中的角度轴的刻度标签进行属性的设置,这些设置大致包含了刻度标签之间的显示间隔...
angleAxis.axisPointer.label |Object角度轴指示器的文本标签设置。angleAxis.axisPointer.label.show |boolean[ default: false...
radar雷达图坐标系组件,只适用于雷达图。该组件等同 ECharts 2 中的 polar 组件。因为 ECharts 3 中的 polar 被重构为标准的极...
visualMap[i]visualMap是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。视觉元素可以是:symbo...
JavaScript reverse() 方法 JavaScript Array 对象实例颠倒数组中元素的顺序:var fruits = ["Banana", "Orange", "Apple",...