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

深碍√TFBOYSˉ_ 2022-12-02 13:57 221阅读 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 条评论，221人围观）

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

相关阅读

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

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

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

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

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

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

相关 Echarts 多个地区地图可视化显示

在实际的前端开发工作中，有时候需要显示不相关的两个地区在地图上，例如：显示京津冀地区的地图，需要同时显示北京、天津和河北省，但是我们经常使用的获得各个省份，地市的地理信息的网站

旧城等待，/ 2023年10月08日 20:43/ 0 赞/ 53 阅读

相关 Superset可视化之制作地图

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

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

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

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

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

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

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

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

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

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

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

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

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

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

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