创新互联ECharts教程：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 设定。

分享题目：创新互联ECharts教程：ECharts关于雷达图的一些属性设置
URL网址：http://www.shufengxianlan.com/qtweb/news32/351982.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联