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

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

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

相关阅读

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

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

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

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

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

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

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

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

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

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

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

相关计算机地图综合制图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 赞/ 627 阅读