大数据可视化学习项目四

最新推荐文章于 2024-07-25 22:24:14 发布

贺知煜

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量153

点赞数 4

文章标签：信息可视化学习

本文链接：https://blog.csdn.net/a040607/article/details/137225894

版权

雷达图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        backgroundColor:'rgba(204,204,204,0.7)',//背景色
        title:{//标题
            text:'特殊的雷达图',//主标题
            top:'10',//与上边的距离
            left:'10',  //与左边的距离
            textStyle:{   //字体样式
                color:'blue', //颜色
                fontSize:18, //大小
            },
        },
        legend:{//图列组件
            show:true,//是否显示
            icon:'pin',//图像设置为气球
            top:"50",//与上边的距离
            left:"20",//与左边的距离
            itemWidth:10,//图列宽度
            itemHeight:10,//图列高度
            itemGap:30,//图列间隔
            orient:"horizontal",//图例列表的布局朝向
            textStyle:{//字体样式
                fontSize:15, //大小
                // color:"#fff",//颜色
            },
            data:['小米','苹果','蒸发量','降水量'],//图列显示数据
        }, 
        tooltip:{//提示框
            confine:true,//是否将 tooltip 框限制在图表的区域内
            enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
        },
        radar:[//雷达图坐标系组件，只适用于雷达图
            {
                nameGap:3,//指示器名称和指示坐标的距离
                shape:'circle',//雷达图绘制类型
                name:{//名称设置
                    textStyle:{//字体样式
                        fontSize:12,//字体大小
                        color:"#fff",//字体颜色
                        backgroundColor:'blue',//背景色
                        borderRadius:3,//圆角半径
                        padding:[2,2]    //内边距
                    }
                },
                indicator:[//雷达图的指示器，用来指定雷达图中的多个变量
                    {text:'外观',max:100},
                    {text:'拍照',max:100},
                    {text:'系统',max:100},
                    {text:'性能',max:100},
                    {text:'屏幕',max:100},
                ],
                center:['30%','60%'],//圆中心坐标，ｘy
                radius:80//半径
            },{
                nameGap:3,//指示器名称和指示坐标的距离
                shape:'polygon',//雷达图绘制类型
                name:{
                    textStyle:{
                        fontSize:12,
                        color:"red",
                        backgroundColor:'lightblue',
                        borderRadius:3,
                        padding:[2,2]    
                    }
                },
                indicator:(function(){//函数
                    var res=[];
                    for(var i=1;i<=12;i++){
                        res.push({text:i+'月',max:100});
                    }
                    return res
                })(),
                center:['70%','60%'],
                radius:80,
            }
        ],
        series:[//
            {
                type:'radar',//数据类型
                radarIndex:0,//雷达图所使用的 radar 组件的 index
                tooltip:{trigger:'item'},//提示框
                data:[
                    {value:[85,90,90,95,95],name:'小米'},
                    {value:[95,80,95,90,93],name:'苹果'},
                ]
            },
            {
                type:'radar',
                radarIndex:1,
                tooltip:{trigger:'item'},
                itemStyle:{
                    normal:{areaStyle:{type:'default'}}
                },
                data:[{name:'降水量',value:[5,6,9,56,69,73,77,88,50,22,7,5]},
                {name:'蒸发量',value:[3,5,8,34,45,77,68,65,36,23,7,4]}]
            }

        ]
            
        };
 myChar.setOption(option)
 </script>
 </body>
 </html>

样式