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

深碍√TFBOYSˉ_ 2022-12-02 13:57 169阅读 0赞

## 实现效果 ##

项目分布地图效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]  
鼠标悬停效果

![在这里插入图片描述][20200831152526847.png_pic_center]

## 需求分析 ##

1.  显示陕西省省份地图
2.  显示地市的名称
3.  根据项目数量，动态调整气球浮标的大小

## 准备步骤 ##

1.  下载echarts，[官网下载][Link 1]
2.  下载echarts中的省份信息，可以通过 `npm i echarts` 或者 `cnpm i echarts` 下载整个echarts的资源包。京省份数据的具体路径`node_modules\_echarts@4.9.0@echarts\map\js\province` 其中echarts的版本号可能略有不同，需要修改。
3.  将所需的省份拷贝到相关路径下保存即可

PS:因为现在echarts不再提供除中国以外的标准地图，所以省份地图的数据需要单独下载，不知道这个地图数据还能用多久，建议长期保存、

## 实现步骤 ##

### html代码 ###

<div id="e_map" style="width:100%;height:610px;"></div>

### 引入js资源 ###

<script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/shanxi1.js"></script>

### js代码 ###

function echart_map() {
           // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_map'));
    
            var mapName = '陕西'
            option = {
                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: []
                    }
                ]
            };
            myChart.setOption(option);
        }

## 注意 ##

你在看echarts源码的时候，里面显示中国地图的时候，mapName用的是`china`，但是如果想显示省份地图，需要用对应的**中文**。就说坑爹不坑爹吧，这么一个bug，我调了一上午

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]

你可以看到，空白的陕西地图已经显示出来了，后续的章节，我们将通过配置参数，在省份地图上增加其他数据。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/28d40ab9c91b4840ae523f9bad0978cc.png
[20200831152526847.png_pic_center]: /images/20221123/95fd21d8269d4f0d8d5ae7806a83fa14.png
[Link 1]: https://echarts.apache.org/zh/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a809261c451b4b4eab77ce0fbcd877b6.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 Seaborn（二）之数据集分布可视化

Seaborn（二）之数据集分布可视化当处理一个数据集的时候，我们经常会想要先看看特征变量是如何分布的。这会让我们对数据特征有个很好的初始认识，同时也会影响后续数据分析

水深无声/ 2023年08月17日 17:44/ 0 赞/ 72 阅读

相关 Superset可视化之制作地图

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

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

相关 echarts地图列表_利用Python画中国地图，实现各省数据可视化

第一步：安装pyecharts pyecharts是一款将python与echarts结合的强大的数据可视化工具，本文使用了0.1.9.4版本 pip inst

Myth丶恋晨/ 2023年01月04日 14:37/ 0 赞/ 117 阅读

相关 react hooks（dva） echarts 实现中国地图省份数据分布显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

﹏ヽ暗。殇╰゛Y/ 2022年12月13日 14:17/ 0 赞/ 166 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 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 赞/ 577 阅读