ECharts 入门教程 ECharts关于雷达图的一些属性设置

2024-02-25 开发教程 ECharts 入门教程 匿名 7

使用 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 设定。