【数据可视化】项目分布地图设计之修改地图样式

曾经终败给现在 2022-12-02 13:59 222阅读 0赞

## 上文效果 ##

上文[【数据可视化】项目分布地图设计之显示省份地图（点击可查看原文）][Link 1] 中，我们实现了一个空白的陕西省地图，在接下来的步骤中，我们将调整地图的样式，让其符合可视化整体风格。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]

## 本节目标 ##

1.  增加鼠标悬停事件，能够显示项目数量（toolTip）

## 实现步骤 ##

基于[上文代码（点击查看）][Link 1]，逐个实现功能

### 1. 增加鼠标悬停事件，高亮显示，并且能够显示项目数量 ###

1.  创建一个含有陕西地市划分的数组。本阶段其实有没有经纬度都可以。只是为了方便后续，我们把经纬度加上了。

var shanxiCity = [{"cp":[108.948024,34.263161],"name":"西安市"},
                            {"cp":[108.979608,34.916582],"name":"铜川市"},
                            {"cp":[107.14487,34.369315],"name":"宝鸡市"},
                            {"cp":[108.705117,34.333439],"name":"咸阳市"},
                            {"cp":[109.502882,34.499381],"name":"渭南市"},
                            {"cp":[109.49081,36.596537],"name":"延安市"},
                            {"cp":[107.028621,33.077668],"name":"汉中市"},
                            {"cp":[109.741193,38.290162],"name":"榆林市"},
                            {"cp":[109.029273,32.6903],"name":"安康市"},
                            {"cp":[109.939776,33.868319],"name":"商洛市"}]

1.  遍历数组，创建一个地图上项目分布的数据

var data = []
    
            shanxiCity.forEach(function(v) {
                // 地区名称
                var name = v.name;
                data.push({
                    name: name,
                    value: Math.round(Math.random() * 10 + 10)
                })
            });

1.  将data添加到series中的map系列中，并且声明toolTip的显示方式
2.  全部代码如下所示

function echart_map() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_map'));
    
            var mapName = '陕西'
            
            var data = []
    
            shanxiCity.forEach(function(v) {
                // 地区名称
                var name = v.name;
                data.push({
                    name: name,
                    value: Math.round(Math.random() * 10 + 10)
                })
            });
            
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        var toolTiphtml = ''
                        toolTiphtml += params.name+':<br>'
                        toolTiphtml+='项目数：'+params.value+"<br>"
                        return toolTiphtml;
                    }
                },
                geo: {
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#fff',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        }
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#0227ad',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: data
                    }
                ]
            };
            myChart.setOption(option);
        }

## 实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]  
下一篇中，我们将实现根据项目，用一个符号通过大小变换，显示项目数量的多少。

[Link 1]: https://blog.csdn.net/xuexiiphone/article/details/108322125
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/426b39cf3498409bb192da68c307b5fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/449470f359e54e83a16ce662c5fb322e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 Tableau可视化进阶实践-地图

各类地图符号地图与背景图地图符号地图的特点二者区别填充地图与多边形地图填充地图的特点多边形地图

小灰灰/ 2024年03月24日 23:02/ 0 赞/ 80 阅读

相关探索规律：Python地图数据可视化艺术

文章目录一基础地图使用二国内疫情可视化图表 2.1 实现步骤 2.2 完整代码 2.3 运行结果一基础

今天药忘吃喽~/ 2024年03月23日 20:56/ 0 赞/ 49 阅读

相关数据可视化——如何绘制地图

![在这里插入图片描述][e9f63fe2bd42450d98a53c5204694c53.gif_pic_center] 文章目录前言如何绘制地

素颜马尾好姑娘i/ 2023年10月13日 20:57/ 0 赞/ 50 阅读

相关 Superset可视化之制作地图

1 制作地图 1.1 配置Table ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

蔚落/ 2023年01月07日 07:09/ 0 赞/ 579 阅读

相关【数据可视化】项目分布地图设计之增加项目数量标识

上文效果上文[【数据可视化】项目分布地图设计之修改地图样式（点击可查看原文）][Link 1] 中，我们实现了陕西省地图上鼠标悬停显示数据的效果，在接下来的步骤中，我们

素颜马尾好姑娘i/ 2022年12月03日 01:32/ 0 赞/ 164 阅读

相关【数据可视化】项目分布地图设计之修改地图样式

上文效果上文[【数据可视化】项目分布地图设计之显示省份地图（点击可查看原文）][Link 1] 中，我们实现了一个空白的陕西省地图，在接下来的步骤中，我们将调整地图的样

曾经终败给现在/ 2022年12月02日 13:59/ 0 赞/ 223 阅读

相关【数据可视化】项目分布地图设计之显示省份地图

实现效果项目分布地图效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

深碍√TFBOYSˉ_/ 2022年12月02日 13:57/ 0 赞/ 215 阅读

相关【数据分析师---数据可视化】第二章：plotly绘图进阶篇（地图可视化，动态数据可视化）

plotly绘图进阶篇 1 地图可视化 1.1 模块安装与地理数据基础知识 1.2 地图数据GeoJSON数据生成 1.3

Love The Way You Lie/ 2022年09月03日 12:29/ 0 赞/ 473 阅读

相关计算机地图综合制图gdp,GDP地图可视化01: 加载地图数据

本节主要完成地图的初始化加载。 ![d17c870619fd364639a9d659849b5aea.png][] 主要思路将摄像头调整好。读取坐标文件; 绘制；

你的名字/ 2022年08月31日 01:00/ 0 赞/ 3 阅读

相关 Python可视化-地图染色

一、数据文件准备 1、value.txt 0,3.19 1,2.7 2,2.51 3,2.78 4,2.61 5,3.1

短命女/ 2022年05月26日 04:05/ 0 赞/ 628 阅读