Echarts 绘制地图（中国、省市、区县）

已于 2024-08-05 10:51:52 修改
阅读量804 收藏 10
点赞数 12
分类专栏： 大数据 文章标签： echart绘制地图 angular绘制地图
于 2024-08-05 05:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoPerson/article/details/140611460
版权

目录

前言

一、Apache Echarts

二、获取地图的GeoJSON

三、项目中引用

四、准备放地图的容器

五、配置地图option信息

六、初始化地图

往期回顾

前言

最近在搞大数据可视化的项目，需要用Echart来做可视化的图表，比如像地图，图表类，今天主要介绍下echart绘制地图如何使用，话不多说，直接上干货！

一、Apache Echarts

官网地址：https://echarts.apache.org/ 

npm install echarts --save

 

二、获取地图的GeoJSON

地址：DataV.地图GeoJSON数据

 左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（以中华人名共和国为例为例）

注意：地图点击可以下钻，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；右侧JSON数据的链接地址，可以选择下载下来（放在json文件夹中），也可以使用在线地址！（json API与geoJSON数据地址均可用）

三、项目中引用

import * as echarts from 'echarts';

四、准备放地图的容器

<div style="width:800px;height:600px" id="chartMap"></div>

五、配置地图option信息

let mapOption = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        let num
        let showHtml = ''
        if (isNaN(params.value)) {
          num = '0'
        } else {
          num = params.value
        }
        showHtml += `
              <span style="display: flex; font-size: 12px;">
                  ${'装机量'}：${params.name}</br>
              </span>
          `
        return showHtml
      },
    },

    legend: {
      orient: 'vertical',
      left: 'left',
      data: [],
    },
    series: [
      {
        name: '安装信息',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        emphasis: {
          scale: true,
          itemStyle: {
            areaColor: '#fff',
          },
        },
        symbolSize: function (val: any) {
          return val[2] / 15
        },
        showEffectOn: 'render',
        itemStyle: {
          areaColor: '#2043AA',
          borderColor: '#111',
          color: '#fff',
        },
        zlevel: 1,
        data: [
          {
            name: '北京',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '天津',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '上海',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '重庆',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          { name: '河北', value: Math.round(Math.random() * 100) },
          { name: '河南', value: Math.round(Math.random() * 100) },
          { name: '云南', value: Math.round(Math.random() * 100) },
          { name: '辽宁', value: Math.round(Math.random() * 100) },
          { name: '黑龙江', value: Math.round(Math.random() * 100) },
          { name: '湖南', value: Math.round(Math.random() * 100) },
          { name: '安徽', value: Math.round(Math.random() * 100) },
          { name: '山东', value: Math.round(Math.random() * 100) },
          { name: '新疆', value: Math.round(Math.random() * 100) },
          { name: '江苏', value: Math.round(Math.random() * 100) },
          { name: '浙江', value: Math.round(Math.random() * 100) },
          { name: '江西', value: Math.round(Math.random() * 100) },
          { name: '湖北', value: Math.round(Math.random() * 100) },
          { name: '广西', value: Math.round(Math.random() * 100) },
          { name: '甘肃', value: Math.round(Math.random() * 100) },
          { name: '山西', value: Math.round(Math.random() * 100) },
          { name: '内蒙古', value: Math.round(Math.random() * 100) },
          { name: '陕西', value: Math.round(Math.random() * 100) },
          { name: '吉林', value: Math.round(Math.random() * 100) },
          { name: '福建', value: Math.round(Math.random() * 100) },
          { name: '贵州', value: Math.round(Math.random() * 100) },
          { name: '广东', value: Math.round(Math.random() * 100) },
          { name: '青海', value: Math.round(Math.random() * 100) },
          { name: '西藏', value: Math.round(Math.random() * 100) },
          { name: '四川', value: Math.round(Math.random() * 100) },
          { name: '宁夏', value: Math.round(Math.random() * 100) },
          { name: '海南', value: Math.round(Math.random() * 100) },
          // {name: '台湾',value: Math.round(Math.random()*100)},
          { name: '香港', value: Math.round(Math.random() * 100) },
          { name: '澳门', value: Math.round(Math.random() * 100) },
        ],
      },
    ],
  }

六、初始化地图

我的地图Json文件是下载放到项目里assets下的，你可以使用在线的也可以引用本地的，如果你框架是vue可以使用axio获取到JSON信息。博主用的是Angular18框架，可以使用HttpClient获取

constructor(private http: HttpClient) {}
  initEcharts() {
    this.http.get('assets/json/china.json').subscribe((res: any) => {
      const echart = echarts.init(this.chartMap.nativeElement) // 获取视图的echarts的DOM节点，并初始化对象
      echarts.registerMap('china', res) // 注册china.json的数据到初始化的echarts对象
      echart.setOption(this.mapOption) // 绑定地图的配置参数对象，参考第二步
      echart.resize()
    })
  }

vue的不难，同理，这里我就不多说了。

完整代码（我的是angular18写法，仅供参考，其他框架大同小异）：

import { HttpClient } from '@angular/common/http'
import {
  Component,
  ElementRef,
  Input,
  NgModule,
  OnInit,
  ViewChild,
} from '@angular/core'
import { SharedModule } from '@shared'
import * as echarts from 'echarts/core'
@Component({
  selector: 'china-map',
  template: `<div #chartMap class="china-map" [ngStyle]="styles"></div>`,
  standalone: true,
  imports: [SharedModule],
  styleUrls: ['./china-map.component.less'],
})
export class ChinaMapComponent implements OnInit {
  @Input() styles: any = {
    width: '100%',
    height: '100%',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  }
  @ViewChild('chartMap')
  chartMap!: ElementRef // 获取DOM节点的对象
  constructor(private http: HttpClient) {}
  mapOption = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        let num
        let showHtml = ''
        if (isNaN(params.value)) {
          num = '0'
        } else {
          num = params.value
        }
        showHtml += `
              <span style="display: flex; font-size: 12px;">
                  ${'装机量'}：${params.name}</br>
              </span>
          `
        return showHtml
      },
    },

    legend: {
      orient: 'vertical',
      left: 'left',
      data: [],
    },
    series: [
      {
        name: '项目信息',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          normal: {
            show: true,
          },
          emphasis: {
            show: true,
          },
        },
        emphasis: {
          scale: true,
          itemStyle: {
            areaColor: '#fff',
          },
        },
        symbolSize: function (val: any) {
          return val[2] / 15
        },
        showEffectOn: 'render',
        itemStyle: {
          areaColor: '#2043AA',
          borderColor: '#111',
          color: '#fff',
        },
        zlevel: 1,
        data: [
          {
            name: '北京',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '天津',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '上海',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          {
            name: '重庆',
            value: Math.round(Math.random() * 100),
            warn: 10,
            problem: 12,
          },
          { name: '河北', value: Math.round(Math.random() * 100) },
          { name: '河南', value: Math.round(Math.random() * 100) },
          { name: '云南', value: Math.round(Math.random() * 100) },
          { name: '辽宁', value: Math.round(Math.random() * 100) },
          { name: '黑龙江', value: Math.round(Math.random() * 100) },
          { name: '湖南', value: Math.round(Math.random() * 100) },
          { name: '安徽', value: Math.round(Math.random() * 100) },
          { name: '山东', value: Math.round(Math.random() * 100) },
          { name: '新疆', value: Math.round(Math.random() * 100) },
          { name: '江苏', value: Math.round(Math.random() * 100) },
          { name: '浙江', value: Math.round(Math.random() * 100) },
          { name: '江西', value: Math.round(Math.random() * 100) },
          { name: '湖北', value: Math.round(Math.random() * 100) },
          { name: '广西', value: Math.round(Math.random() * 100) },
          { name: '甘肃', value: Math.round(Math.random() * 100) },
          { name: '山西', value: Math.round(Math.random() * 100) },
          { name: '内蒙古', value: Math.round(Math.random() * 100) },
          { name: '陕西', value: Math.round(Math.random() * 100) },
          { name: '吉林', value: Math.round(Math.random() * 100) },
          { name: '福建', value: Math.round(Math.random() * 100) },
          { name: '贵州', value: Math.round(Math.random() * 100) },
          { name: '广东', value: Math.round(Math.random() * 100) },
          { name: '青海', value: Math.round(Math.random() * 100) },
          { name: '西藏', value: Math.round(Math.random() * 100) },
          { name: '四川', value: Math.round(Math.random() * 100) },
          { name: '宁夏', value: Math.round(Math.random() * 100) },
          { name: '海南', value: Math.round(Math.random() * 100) },
          // {name: '台湾',value: Math.round(Math.random()*100)},
          { name: '香港', value: Math.round(Math.random() * 100) },
          { name: '澳门', value: Math.round(Math.random() * 100) },
        ],
      },
    ],
  }
  ngOnInit() {
    this.initEcharts() // 初始化地图
  }
  initEcharts() {
    this.http.get('assets/json/china.json').subscribe((res: any) => {
      const echart = echarts.init(this.chartMap.nativeElement) // 获取视图的echarts的DOM节点，并初始化对象
      echarts.registerMap('china', res) // 注册china.json的数据到初始化的echarts对象
      echart.setOption(this.mapOption) // 绑定地图的配置参数对象，参考第二步
      echart.resize()
    })
  }
}

欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表（Normalize.css）

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御

富朝阳
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用echarts完成中国省市区县镇地图展示
JCat的博客
11-19 3万+
前言 很长时间没有写博客了，最近在做一个大数据面板，记录一下如何使用echarts完成地图特效展示；echarts关于地图代码只有案例，并没有数据，尤其是区县地图，此篇详细介绍书写过程； 一、中国地图 ...
echarts世界省市区县地图（基本全请看说明）
08-03
本资源包含的是ECharts用于绘制世界中国省市区县地图的相关文件，对于需要进行地理分布数据可视化的开发者来说，这是一个非常实用的工具。 首先，我们要了解ECharts地图的使用方式。在ECharts中，地图图表是通过...
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
Echarts 绘制地图（中国、省市、区县），保姆级教程！
共同学习，共同成长
06-11 7840
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
Vue中使用Echarts地图实现某省市区县地图的展示功能
qq_39891453的博客
12-28 9445
Vue中使用Echarts地图实现某省市区县地图的展示功能。
echarts自定义，绘制区县地图
wulincoo
01-30 2080
echsrts自定义区县地图
echarts 省市区县地图展示
世界太浮夸
04-22 2453
获取json文件 1、通过高德数据可视化平台获取 2、POI下载JSON文件 根据json文件加载地图 <div id="myChart"></div> 引用echarts var myChart=echarts.init(document.getElementById('myChart')) //通过JQuery 加载json文件 $.get('js/json/chongqing.json', function (geoJson) { echarts.registerM
Vue结合ECharts绘制省市地图：数据驱动区域颜色展示，支持省市下钻与经纬度打点功能
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-17 5523
通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系，能够标示地球上的任何一个位置。经度和纬度常合称为经纬度，把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。本文以吉林省地图为例，来实现吉林省及所有市的切换效果。
echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）
weixin_42762167的博客
01-07 5916
前言：最近公司项目有个需求，展示河南省各省市区县的地图，并展示相应的数据，看了些资料决定用echarts实现。 一、完成之后的效果图 点击市的模块显示对应的市，并显示对应市的数据 点击区县的模块显示对应的区县，并显示对应区县的数据 二、实现方法 1、首先要确定已经引入的echart的文件,vue项目和html项目的引入方法不一样，在此不再赘述，童鞋们自行百度。 2、把需要用到的json文件放到本地（json文件获取的方法后续我会上传，童鞋们自行下载），在此我放到了static目录下，如下图： 3、页
Echarts地图省市联动
yhlhelloworld的博客
05-29 226
因为我的需求是只需要下钻到省份，所以只写了省份的逻辑，若还要下转市或者区县可自行更改，或我参考我提供的思路。南海群岛太大，占用了地图很大的空间，想替换未缩略图。3. 直接复制我封装好的组件即可运行。2. 引入中国地图JSON数据。（复制JSON链接下载下来）1.安装echarts。
Echarts 中国各个省市地图
02-10
这个压缩包中的资源可能包含了一个预处理好的中国地图数据集，可以让你快速地在Echarts中展示出完整的中国地图。使用这些资源时，开发者需要根据自己的需求对数据进行适当的处理和整合，以便在Echarts的环境中顺利...
echarts全国、地市、区县地图js文件
01-04
// 其他省市区县的数据... ] } ] }; myChart.setOption(option); ``` 这个例子展示了如何创建一个颜色分段的中国地图，根据数据值显示不同颜色。通过修改data数组和visualMap配置，你可以轻松地调整地图显示的...
echarts全国省市区县地图json数据
11-07
总之，“echarts全国省市区县地图json数据”为开发者提供了绘制中国全面、精细的地图图表的能力。通过理解和使用这些数据，我们可以创建出富有洞察力和吸引力的可视化应用，帮助用户更好地理解和解读地理分布数据。
Echarts全国各省市地图数据
01-23
在实际应用中，ECharts的地理信息功能不仅可以用于展示中国地图，还可以扩展到世界地图，或者自定义特定区域的地图。同时，ECharts地图组件支持GeoJSON、TopoJSON等多种地图数据格式，使得地图数据的获取和处理更加...
煎蛋.rar
08-04
小程序的设计源码通常包含多个文件和文件夹，组织结构清晰，以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括： 页面文件夹：存放小程序的各个页面，每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构，类似于HTML；WXSS文件负责样式，类似于CSS；JS文件负责页面的逻辑和交互；JSON文件用于页面的配置，如导航栏标题等。 组件文件夹：存放可复用的UI组件。组件与页面类似，也由.wxml、.wxss、.js和.json文件组成。通过组件化设计，可以提高代码的复用性和维护性，减少重复工作。 静态资源文件夹：存放图片、音频、视频等静态资源，便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件：小程序的根目录下通常有一个app.json文件，用于全局配置，如页面路径、导航栏样式、底部Tab栏等。此外，还有app.wxss和app.js文件，分别用于全局样式和全局逻辑。 工具文件夹：存放一些工具函数和库文件，便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
DirectX修复工具，(DirectX Repair)是一款系统级工具软件， 简便易用 【修复完成后重启电脑】
08-04
安装包
下半年工作总结PPT模板.pptx
08-04
【作品名称】：述职报告，工作计划，工作总结，计划书，商务计划，转正报告 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
shapely-2.0.5-cp312-cp312-manylinux_2_17_x86_64.whl
最新发布
08-04
shapely-2.0.5-cp312-cp312-manylinux_2_17_x86_64.whl
echarts 绘制地图
08-11
可以使用 echarts 绘制地图，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 800px; height: 600px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 地图数据 var mapData = [ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 150 }, // 其他省份的数据... ]; // 绘制地图配置项 var option = { title: { text: '中国地图示例', subtext: '数据仅供参考', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 500, left: 'left', top: 'bottom', text: ['高', '低'], calculable: true }, series: [ { name: '地图', type: 'map', mapType: 'china', roam: false, label: { show: true }, data: mapData } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 你可以将上述代码保存为一个 HTML 文件并在浏览器中打开，就可以看到一个简单的中国地图示例。你可以根据自己的需求修改地图数据和配置项，来绘制你想要的地图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

富朝阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值