雷达图

2021-11-09 21:01:17 阅读：330 来源： 互联网

1> ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/echarts.min.js"></script>
</head>
<body>
    <div id="box" style="width: 600px; height: 400px;"></div>
    <script>
        var box=echarts.init(document.getElementById("box"))
        var option={
            
        }　　　　　　
        box.setOption(option)
    </script>
</body>
</html>

2>定义各个维度的最大值

  var data = [
                {name: '价格', max: 100},
                {name: '功能', max: 100},
                {name: '拍照', max: 100},
                {name: '跑分', max: 100},
                {name: '续航', max: 100}
            ]

3>准备具体产品的数据

 var vivo = [80, 90, 80, 82, 90]
 var oppo = [70, 82, 75, 70, 78]

4>在 series 下设置 type:radar

var option={
            radar:{     //配置各个维度的最大值
                indicator:data
            },
            series:[
                {
                    type:'radar',   //radar，表示此图表是雷达图
                    data:[
                        {
                            name:'vivo',
                            value:vivo,
                        },
                        {
                            name:'opp',
                            value:opp
                        }
                    ]
                }
            ]
        }

显示数值 label

var option={
            radar:{
                indicator:data
            },
            series:[
                {
                    type:'radar',
                    label:{
                        show:true
                    },
                    data:[
                        {
                            name:'vivo',
                            value:vivo,
                        },
                        {
                            name:'opp',
                            value:opp
                        }
                    ]
                }
            ]
        }

区域面积 areaStyle

将每一个产品的雷达图形成阴影的面积

series:[
                {
                    type:'radar',
                    label:{
                        show:true
                    },
                    areaStyle: {},
                    data:[
                        {
                            name:'vivo',
                            value:vivo,
                        },
                        {
                            name:'opp',
                            value:opp
                        }
                    ]
                }
            ]

绘制类型 shape

雷达图最外层绘制类型，支持 'polygon' 和 'circle'

默认是多边形效果

'polygon' : 多边形

'circle' 圆形

var option={
            radar:{
                indicator:data,
                shape: 'circle'
            },
            series:[
                {
                    type:'radar',
                    label:{
                        show:true
                    },
                    areaStyle: {},
                    data:[
                        {
                            name:'vivo',
                            value:vivo,
                        },
                        {
                            name:'opp',
                            value:opp
                        }
                    ]
                }
            ]
        }

标签：opp,name,value,radar,vivo,var,雷达
来源： https://www.cnblogs.com/keyeking/p/15530896.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

雷达图

显示数值 label

区域面积 areaStyle

绘制类型 shape