玩转ECharts制作图表之雷达图

最新推荐文章于 2024-08-05 22:01:19 发布

Keven He

最新推荐文章于 2024-08-05 22:01:19 发布

阅读量2.5k

点赞数 2

分类专栏：数据开发

本文链接：https://blog.csdn.net/weixin_45462732/article/details/109745353

版权

数据开发专栏收录该内容

25 篇文章 4 订阅

订阅专栏

适用场景：

雷达图适用于多维数据（四维以上），且每个维度必须可以排序（国籍就不可以排序）。但是，它有一个局限，就是数据点最多6个，否则无法辨别，因此适用场合有限。

实现步骤：

ECharts基本代码结构
定义各个维度的最大值，通过radar属性配置
准备数据，设置给series下的data
将type的值设置为radar

<body>
    <div style="width: 600px;height:400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))    
        var option = {
        }
        mCharts.setOption(option)
    </script>
</body>

   // 各个维度的最大值
        var dataMax = [{
            name: '易用性',
            max: 100
        }, {
            name: '功能',
            max: 100
        }, {
            name: '拍照',
            max: 100
        }, {
            name: '跑分',
            max: 100
        }, {
            name: '续航',
            max: 100
        }]

data: [{
                    name: '华为手机1',
                    value: [80, 90, 80, 82, 90]
                }, {
                    name: '中兴手机1',
                    value: [70, 82, 75, 70, 78]
                }]

type：'radar'

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>radar</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height:400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var dataMax = [{
            name: '易用性',
            max: 100
        }, {
            name: '功能',
            max: 100
        }, {
            name: '拍照',
            max: 100
        }, {
            name: '跑分',
            max: 100
        }, {
            name: '续航',
            max: 100
        }]
        var option = {
            radar: {
                indicator: dataMax, // 配置各个维度的最大值
                shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
            },
            series: [{
                type: 'radar', // radar 此图表时一个雷达图
                label: { // 设置标签的样式
                    show: true // 显示数值
                },
                areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
                data: [{
                    name: '华为手机1',
                    value: [80, 90, 80, 82, 90]
                }, {
                    name: '中兴手机1',
                    value: [70, 82, 75, 70, 78]
                }]
            }]
        }
        mCharts.setOption(option)
    </script>
</body>
</html>

在这里插入图片描述

Keven He

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
玩转ECharts制作图表之雷达图

适用场景：雷达图适用于多维数据（四维以上），且每个维度必须可以排序（国籍就不可以排序）。但是，它有一个局限，就是数据点最多6个，否则无法辨别，因此适用场合有限。实现步骤：ECharts基本代码结构定义各个维度的最大值，通过radar属性配置准备数据，设置给series下的data将type的值设置为radar<body> <div style="width: 600px;height:400px"></div> <sc
复制链接

扫一扫

专栏目录