雷达图的代码实现echarts

最新推荐文章于 2024-06-28 10:54:54 发布

昭昭a

最新推荐文章于 2024-06-28 10:54:54 发布

阅读量768

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/l15972865175/article/details/137225956

版权

雷达图的含义：（非常适合性能分析）
雷达图（Radar Chart），也被称为蛛网图或极坐标图，是一种用于可视化多个维度数据的图表形式。雷达图通过在一个圆形的坐标系上绘制多个半径相等的轴线（通常是5个或更多），每个轴线代表一个特定的数据维度。
雷达图的含义在于通过展示多个维度的数据并将其以图形方式呈现，帮助人们直观地理解和比较各个维度之间的差异和关系。

一、基本雷达图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据            
            option = {
                title: {
                text: '销售经理能力考核表'
                },
                legend: {
                    type:'scroll',
                    width:'20%',
                    pageButtonItemGap:4,
                    
                    data: ['王斌', '刘倩','袁波'],
                    
                },
                radar: {
                // shape: 'circle',
                indicator: [
                    { name: '销售', max: 120 },
                    { name: '沟通', max: 120 },
                    { name: '服务', max: 120 },
                    { name: '协作', max: 120 },
                    { name: '培训', max: 120 },
                   
                ],
                
                },
                tooltip:{
                    

                },
                series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    itemStyle:{
                        emphasis:{lineStyle:{width:6},opacity:1}
                    },
                    data: [
                    {
                        value: [87.5, 87.5, 90, 91.25, 85],
                        name: '王斌'
                    },
                    {
                        value: [90, 88.75, 85, 87.5, 88.75],
                        name: '刘倩'
                    },
                    {
                        value:[92.5,91.25,88.75,92.5,91.25],
                        name:'袁波'
                    }
                    ]
                }
                ]
            };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

二、浏览器占比

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        option = {
            title: {
                text: '销售经理能力考核表',
                subtext: '浏览器占比',
                top: 10,
                left: 10
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type: 'scroll',
                bottom: 10,
                data: (function () {
                var list = [];
                for (var i = 1; i <= 28; i++) {
                    list.push(i + 2000 + '');
                }
                return list;
                })()
            },
            visualMap: {
                top: 'middle',
                right: 10,
                color: ['red', 'yellow'],
                calculable: true
            },
            radar: {
                indicator: [
                    { name: '销售', max: 400 },
                    { name: '沟通', max: 400 },
                    { name: '服务', max: 400 },
                    { name: '协作', max: 400 },
                    { name: '培训', max: 400 },
                ]
            },
            series: (function () {
                var series = [];
                for (var i = 1; i <= 28; i++) {
                series.push({
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                    width: 1
                    },
                    emphasis: {
                    areaStyle: {
                        color: 'rgba(0,250,0,0.3)'
                    }
                    },
                    data: [
                    {
                        value: [
                        (40 - i) * 10,
                        (38 - i) * 4 + 60,
                        i * 5 + 10,
                        i * 9,
                        (i * i) / 2
                        ],
                        name: i + 2000 + ''
                    }
                    ]
                });
                }
                return series;
            })()
            };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

三、多雷达图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        option = {
            title: {
                text: '销售经理能力考核表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                type:'scroll',
                    width:'20%',
                    pageButtonItemGap:1,
                left: 'center',
                data: ['王斌','刘倩','袁波','降水量','蒸发量']
            },
            radar: [
                {
                indicator: [
                    { name: '销售', max: 120 },
                    { name: '沟通', max: 120 },
                    { name: '服务', max: 120 },
                    { name: '协作', max: 120 },
                    { name: '培训', max: 120 },
                   
                ],
                center: ['40%', '30%'],
                radius: 80
                },
      
                {
                indicator: (function () {
                    var res = [];
                    for (var i = 1; i <= 12; i++) {
                    res.push({ text: i + '月', max: 100 });
                    }
                    return res;
                })(),
                center: ['80%', '30%'],
                radius: 80
                }
            ],
            series: [
                {
                type: 'radar',
                
                tooltip: {
                    trigger: 'item'
                },
                areaStyle: {},
                itemStyle:{
                        emphasis:{lineStyle:{width:6},opacity:1}
                },
                data: [
                {
                         value: [87.5, 87.5, 90, 91.25, 85],
                         name: '王斌'
                     },
                     {
                         value: [90, 88.75, 85, 87.5, 88.75],
                         name: '刘倩'
                     },
                     {
                         value:[92.5,91.25,88.75,92.5,91.25],
                         name:'袁波'
                     }
                ]
                },
   
                 {
                type: 'radar',
                radarIndex: 1,
                areaStyle: {},
                data: [
                    {
                    name: '降水量',
                    value: [5,6,9,65,69,73,77,88,50,22,7,5]
                    },
                    {
                    name: '蒸发量',
                    value: [3,5,8,34,45,77,68,65,36,23,7,4]
                    }
                    
                ]
                }
            ]
            };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

四、注意项

1.雷达图样式设置

type:'radar'

2.设置滚动需要用到scroll，滚不动就把间距设置大一点

type:'scroll',

width:'20%',

pageButtonItemGap:4,

3.线条加粗用到了高亮时的样式emphasis

itemStyle:{

emphasis:{lineStyle:{width:6},opacity:1}

4.rader:[] 雷达图坐标系组件，只适用于雷达图

5.多雷达图通过设置属性center:['xx%','yy%'],radius:zz,来指定每个雷达图的位置和大小

昭昭a

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
雷达图的代码实现echarts

雷达图的含义：（非常适合性能分析）雷达图（Radar Chart），也被称为蛛网图或极坐标图，是一种用于可视化多个维度数据的图表形式。雷达图通过在一个圆形的坐标系上绘制多个半径相等的轴线（通常是5个或更多），每个轴线代表一个特定的数据维度。雷达图的含义在于通过展示多个维度的数据并将其以图形方式呈现，帮助人们直观地理解和比较各个维度之间的差异和关系。
复制链接

扫一扫