ECharts关于雷达图的一些属性设置
使用 series[i]-radar 可以设置 ECharts 雷达图,雷达图主要用于表现多变量的数据,例如球员的各个属性分析,依赖 radar 组件。
下面是 AQI 数据用雷达图表现的示例。
series[i]-radar.type
将 type 设置为 radar 以将图表表现为雷达图。
series[i]-radar.name
设置 ECharts 雷达图的名称,用于 tooltip 的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
series[i]-radar.radarIndex
雷达图所使用的 radar 组件的 index,取值类型为 number。
series[i]-radar.symbol
设置用于在雷达图中使用的标记图形,默认为 circle。
ECharts 提供的标记类型包括:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'。
雷达图的标记图形可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI,也可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
series[i]-radar.symbolSize
雷达图标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。
如果需要每个数据的图形大小不一样,还可以设置为如下格式的回调函数:
(value: Array|number, params: Object) => number|Array
其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
series[i]-radar.symbolRotate
雷达图标记的旋转角度。注意:在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
series[i]-radar.symbolOffset
标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。
例如 [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。
series[i]-radar.label
图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label 被拿出来跟 itemStyle 平级,并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。
series[i]-radar.itemStyle
折线拐点标志的样式。
series[i]-radar.lineStyle
线条样式。
series[i]-radar.areaStyle
区域填充样式。
series[i]-radar.data[i]
雷达图的数据是多变量(维度)的,如下示例:
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配(Allocated Budget)'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销(Actual Spending)'
}
]
其中的 value 项数组是具体的数据,每个值跟 radar.indicator 一一对应。
series[i]-radar.zlevel
雷达图所有图形的 zlevel 值,取值类型为 number,默认值为0。
zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
series[i]-radar.z
雷达图组件的所有图形的 z 值,用于控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。取值类型为 number,默认值为2。
z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
series[i]-radar.silent
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
series[i]-radar.animation
是否开启动画,取值类型为 boolean,默认值为 true。
series[i]-radar.animationThreshold
是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。取值类型为 number,默认值为 2000。
series[i]-radar.animationDuration
初始动画的时长,取值类型为 number,默认值为 1000。支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:
animationDuration: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
series[i]-radar.animationEasing
初始动画的缓动效果,默认值为 cubicOut。不同的缓动效果可以参考 缓动示例。
series[i]-radar.animationDelay
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series[i]-radar.animationDurationUpdate
数据更新动画的时长,支持 number 类型,默认值为 300。
数据更新动画的时长还支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:
animationDurationUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
series[i]-radar.animationEasingUpdate
数据更新动画的缓动效果,默认值为 cubicOut。
series[i]-radar.animationDelayUpdate
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series[i]-radar.tooltip
本系列特定的 tooltip 设定。