Echarts入门（二）| 散点图地图雷达图_echarts散点雷达图-CSDN博客

本文链接：https://blog.csdn.net/SartinL/article/details/106996502

这里写目录标题

PS：所用数据纯属虚构

散点图

散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。

用两组数据构成多个坐标点，考察坐标点的分布，判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点。值由点在图表中的位置表示。类别由图表中的不同标记表示。散点图通常用于比较跨类别的聚合数据。

参数含义：

series-scatter. symbolSize = 10

number Array Function

标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
</head>
<body>
    <div id="scatter" style="width: 600px; height: 400px;"></div>
    <script>
        var scatter_chart = echarts.init(document.getElementById("scatter"));
        var scatter_option = {
            title:{
                text:"Echart scatter 入门"
            },
            xAxis:{},
            yAxis:{},
            series:[{
                symbolSize:20,
                data:[
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6, 7.24],
                    [4.2, 4.62],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.58],
                ],
                type:'scatter'
            }]
        };
        scatter_chart.setOption(scatter_option);
    </script>
</body>
</html>

如图所示：
在这里插入图片描述

GEO地图

geo是echarts渲染数据的格式，geo是数据基础，有基础数据就很容易实现上图效果了。

visualMap

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道），地图的渲染依赖于此配置。

参数含义：

geo. roam

boolean string

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启

seriesIndex

number Array

指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。

calculable

boolean

是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。

geo. aspectScale = 0.75

number

这个参数用于 scale 地图的长宽比。

最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale

代码如下（数据纯属虚构）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
    <script src="/static/js/china.js"></script>
</head>
<body>
    <div id="map" style="width: 600px; height: 400px;"></div>
    <script>
        var map_chart = echarts.init(document.getElementById("map"));
        var map_option = {
            tooltip:{
                trigger:'item',
                formatter:'数量<br> {b}:{c}'
            },
            visualMap:{
                seriesIndex: 0,    
                min: 0,
                max: 300,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],     // 文本
                calculable:true
            },
            grid:{
                height: 200,
                width: 8,
                right: 80,
                bottom: 10
            },
            geo:{
                map:'china',
                aspectScale:0.75,   // 长宽比
                top: 5,
                bottom: 15,
                label:{
                    normal:{
                        show: true,
                    },
                    emphasis:{
                        show: true,
                    },
                },
                // 是否开启鼠标缩放和平移漫游
                roam:false,
            },
            series:[
                {
                    zlevel:1,
                    name: 'china',
                    type: 'map',
                    mapType: 'china',
                    selectedMode: 'multiple',
                    roam:true,
                    left:0,
                    right:'15%',
                    geoIndex:0,
                    aspectScale:0.75,   // 长宽比
                    label:{
                        normal:{
                            show:true,
                        },
                        emphasis:{
                            show:true,
                        }
                    },
                    data:[
                        {name: '北京',value:100},
                        {name: '广东',value:200},
                        {name: '上海',value:300},
                        {name: '湖北',value:105},
                        {name: '黑龙江',value:90},
                        {name: '新疆',value:10},
                        {name: '天津',value:20},
                        {name: '重庆',value:30}, 
                        {name: '河北',value:40}, 
                        {name: '河南',value:50}, 
                        {name: '云南',value:60}, 
                        {name: '辽宁',value:70}, 
                        {name: '湖南',value:300}, 
                        {name: '安徽',value:210}, 
                        {name: '山东',value:220}, 
                        {name: '江苏',value:232}, 
                        {name: '浙江',value:250}, 
                        {name: '江西',value:134}, 
                        {name: '广西',value:156}, 
                        {name: '甘肃',value:89}, 
                        {name: '山西',value:113}, 
                        {name: '内蒙古',value:234}, 
                        {name: '陕西',value:234}, 
                        {name: '吉林',value:109}, 
                        {name: '福建',value:78}, 
                        {name: '贵州',value:58},  
                        {name: '青海',value:35}, 
                        {name: '西藏',value:89}, 
                        {name: '四川',value:189}, 
                        {name: '宁夏',value:68}, 
                        {name: '海南',value:256}, 
                        {name: '台湾',value:25}, 
                        {name: '香港',value:29}, 
                        {name: '澳门',value:280}
                    ]
                }
            ]
        };
        map_chart.setOption(map_option);
    </script>
</body>
</html>

如图所示：
在这里插入图片描述

雷达图

雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无信息的。雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。

参数含义：

radar. indicator

Array

雷达图的指示器，用来指定雷达图中的多个变量（维度）。

包括以下变量：

radar.indicator. name

string

指示器名称。

radar.indicator. max

number

指示器的最大值，可选，建议设置

radar.indicator. min

number

指示器的最小值，可选，默认为 0。

radar.indicator. color

string

标签特定的颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/js/echarts.min.js"></script>
    <!-- cdn -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> -->
    <script src="/static/js/china.js"></script>
</head>
<body>
    <div id="radar" style="width: 600px; height: 400px;"></div>
    <script>
        var radar_chart = echarts.init(document.getElementById("radar"));
        var radar_option = {
            title:{
                text:"基础雷达图"
            },
            tooltip:{},
            legend:{
                data:['预算分配', '实际开销']
            },
            radar:{
                shape:'circle',    // 形状  polyfon：六边形
                name:{
                    textStyle:{
                        color:'#fff',   
                        backgroundColor:'#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                // 最大值，根据实际数值进行设置
                indicator:[    
                    {name:'销售', max: 6500},
                    {name:'管理', max: 16000},
                    {name:'信息技术', max: 30000},
                    {name:'客服', max: 38000},
                    {name:'研发', max: 52000},
                    {name:'市场', max: 25000},
                ]
            },
            series:[
                {
                    name:'预算 VS 开销',
                    type: 'radar',
                    data:[
                        {
                            'value':[4300, 10000, 28000, 35000, 50000, 19000],
                            'name': '预算分配'
                        },
                        {
                            'value':[5000, 14000, 28000, 31000, 42000, 21000],
                            'name': '实际开销'
                        },
                    ]
                }
            ]
        };
        radar_chart.setOption(radar_option);
    </script>
</body>
</html>