ECharts数据可视化(图表)

番外剧.

已于 2024-04-10 17:03:16 修改

阅读量207

点赞数 3

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

于 2024-04-01 11:36:38 首次发布

本文链接：https://blog.csdn.net/2302_80385233/article/details/137226612

版权

文章详细介绍了如何使用ECharts库在HTML页面中创建和定制雷达图，包括单雷达图和多雷达图的应用，以及如何展示销售能力对比和特殊类型的雷达图，如带有不同形状和指标的数据可视化。

摘要由CSDN通过智能技术生成

雷达图

<!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"));
    //指定图表的配置项和数据
    var option = {
    title: {
        text: '销售能力对比分析'
    },
    tooltip: {},
    legend: {
        data: ['王斌', '刘倩', '袁波']
    },
    radar: {
        // 雷达图的指示器，即五个方面的考核评分
        indicator: [
            { name: '销售', max: 100},
            { name: '沟通', max: 190},
            { name: '服务', max: 185},
            { name: '培训', max: 130}
        ]
    },
    series: [{
        name: '销售能力对比',
        type: 'radar',
        // 销售代表的考核评分数据
        data : [
            {
                value : [87.50, 87.50, 90.00, 91.25, 85.00],
                name : '王斌'
            },
            {
                value : [90.00, 88.75, 85.00, 87.50, 88.75],
                name : '刘倩'
            },
            {
                value : [92.50, 91.25, 88.75, 92.50, 91.25],
                name : '袁波'
            }
        ]
    }]
};
         
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

多雷达图

<!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>