实训——多雷达图

Hadint。
已于 2024-04-02 14:58:17 修改
阅读量633
点赞数 20
文章标签： arcgis
于 2024-04-02 14:45:35 首次发布
本文链接：https://blog.youkuaiyun.com/h_adint/article/details/137270108
版权
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script> <!-- 导入 ECharts 库 -->
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div> <!-- 创建一个具有指定宽高的 div，用于展示图表 -->
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main")); <!-- 初始化 ECharts 实例，绑定到指定的 DOM 节点上 -->
        //指定图表的配置项和数据
        var option = {
            backgroundColor:'rgba(0,0,0,0.2)', <!-- 设置图表背景色 -->
            radar:[{ <!-- 雷达图配置 -->
                nameGap:3, <!-- 名称和指示器之间的距离 -->
                shape:'polygon', <!-- 雷达图形状 -->
                name:{ <!-- 指示器名称配置 -->
                    textStyle:{ <!-- 文字样式配置 -->
                    fontSize:17, <!-- 字体大小 -->
                    color:'black', <!-- 字体颜色 -->
                    backgroundColor:'green', <!-- 背景颜色 -->
                    borderRadius:3, <!-- 边框圆角 -->
                    padding:[5,5] <!-- 内边距 -->
                    }
                },
                indicator: [ <!-- 指示器配置 -->
                    { name: '外观', max: 100 }, <!-- 指示器名称及最大值 -->
                    { name: '拍照', max: 100 },
                    { name: '系统', max: 100 },
                    { name: '性能', max: 100 },
                    { name: '屏幕', max: 100 }
                ],
                center:['75%','50%'], <!-- 雷达图中心位置 -->
                radius:90 <!-- 雷达图半径 -->
            },
            {
                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:['25%','50%'],
                radius:90
            }

            ],
            

            series: [ <!-- 系列数据配置 -->
                {
                type: 'radar',
                radarIndex:0, <!-- 指定使用的雷达图配置索引 -->
                tooltip:{trigger:'item'}, <!-- 鼠标悬停提示配置 -->
                data: [ <!-- 数据项配置 -->
                    {
                        value: [80, 70, 85, 90, 75], // 对应 indicator 中的维度
                         name: '小米' <!-- 数据项名称 -->
                    },
                    {
                        value: [95,80,95,90,93], // 对应 indicator 中的维度
                        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]
                    },
                ]
                }
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); <!-- 将配置项和数据设置给图表实例，显示图表 -->
    </script>
</body>
 
</html>