echarts地图学习（使用geoJson数据绘制地图）

最新推荐文章于 2023-11-09 21:55:16 发布
最新推荐文章于 2023-11-09 21:55:16 发布
阅读量3.5k 收藏 14
点赞数 3
分类专栏： 数据可视化 echarts 地图 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45031595/article/details/120043525
版权

参考文档

使用echarts完成中国省市区县镇地图展示
echarts地图（中国地图展示各省数据）
echarts实现中国地图区域分布图 vue + echarts
利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果
可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据
vue使用echarts来绘制中国地图下钻省市区县级地图
Echarts地图详解（地图样式、合并地图、增加地图）

Echarts使用百度地图服务

降水量案例（使用geoJson数据绘制地图）

效果图

在这里插入图片描述

安装 ECharts
npm install echarts --save
方法一：全局注册

在main.js全局注册

const echarts = require('echarts')

Vue.prototype.$echarts = echarts

组件使用

var myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.setOption(this.option);
方法二：组件直接引用

组件使用

import * as echarts from 'echarts';

var chinaChart = echarts.init(
  document.getElementById("mapContain")
);
chinaChart.setOption(this.option);
注：下面用的方法即组件直接引用
地图geoJson数据引用

1、获取地图数据
dataV地图数据下载地址
网友分享json文件

2、组件引用（常用两种文件.js或者.json）

//import china from '@/config/china.js'
import china from '@/config/china.json'

3、ECharts地图注册

echarts.registerMap('china', china)
绘制中国地图
  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      echarts.registerMap('china', china)
      var chinaChart = echarts.init(
        document.getElementById("mapContain")
      );
      chinaChart.setOption(this.option);
    }
  }

  data () {
    return {
      option: {
        // geo: {
        //   map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
        //   roam: true, //缩放
        //   label: { show: true }, //是否显示省份名称
        //   zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
        // },

        //鼠标移上去时显示悬浮框
        tooltip: {
          backgroundColor: '#92DCC6',
          padding: 0,
          trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          //模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。
          formatter: (params) => {
            console.log(params)
            let obj = { img: require('@/assets/logo.png') }
            return `<div style="text-align: center;">
                      <img src=${obj.img}/>
                      <p>${params.name}</p>
                      <p>${params.value}</p>
                    <div>`
          },
        },
        
        // 视觉映射组件
        visualMap: [{
          type: 'continuous',//类型为连续型
          min: 0,
          max: 1000,
          // range: [100, 400],
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],//取值范围的文字
          textStyle: {
            color: "#fff"
          },
          inRange: {
            color: ['#e0ffff', '#006edd']//取值范围的颜色
          },
        }],

        series: [{
          type: 'map',
          name: "降水量",
          map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
          roam: true, //缩放
          zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
          label: {
            show: true,//是否显示省份名称
            color: "#fff"
          },
          itemStyle: {
            areaColor: '#AAD5FF',//地图区域背景颜色
            borderColor: '#fff'//地图边界颜色
          },
          //高亮时的设置
          emphasis: {
            //高亮时地图区域背景颜色
            itemStyle: {
              areaColor: 'pink',
            },
            //文字颜色，样式在此处
            label: {
              color: '#fff'
            }
          },
          // 数据
          data: [
            { name: "北京", value: Math.round(Math.random() * 1000) },
            { name: "天津", value: Math.round(Math.random() * 1000) },
            { name: "上海", value: Math.round(Math.random() * 1000) },
            { name: "重庆", value: Math.round(Math.random() * 1000) },
            { name: "河北省", value: Math.round(Math.random() * 1000) },
            { name: "河南省", value: Math.round(Math.random() * 1000) },
            { name: "云南省", value: Math.round(Math.random() * 1000) },
            { name: "辽宁省", value: Math.round(Math.random() * 1000) },
            { name: "黑龙江省", value: Math.round(Math.random() * 1000) },
            { name: "湖南省", value: Math.round(Math.random() * 1000) },
            { name: "安徽省", value: Math.round(Math.random() * 1000) },
            { name: "山东省", value: Math.round(Math.random() * 1000) },
            { name: "江苏省", value: Math.round(Math.random() * 1000) },
            { name: "浙江省", value: Math.round(Math.random() * 1000) },
            { name: "江西省", value: Math.round(Math.random() * 1000) },
            { name: "湖北省", value: Math.round(Math.random() * 1000) },
            { name: "甘肃省", value: Math.round(Math.random() * 1000) },
            { name: "山西省", value: Math.round(Math.random() * 1000) },

            { name: "陕西省", value: Math.round(Math.random() * 1000) },
            { name: "吉林省", value: Math.round(Math.random() * 1000) },
            { name: "福建省", value: Math.round(Math.random() * 1000) },
            { name: "贵州省", value: Math.round(Math.random() * 1000) },
            { name: "广东省", value: Math.round(Math.random() * 1000) },
            { name: "青海省", value: Math.round(Math.random() * 1000) },
            { name: "四川省", value: Math.round(Math.random() * 1000) },
            { name: "海南省", value: Math.round(Math.random() * 1000) },

            { name: "西藏", value: Math.round(Math.random() * 1000) },
            { name: "宁夏", value: Math.round(Math.random() * 1000) },
            { name: "新疆", value: Math.round(Math.random() * 1000) },
            { name: "内蒙古", value: Math.round(Math.random() * 1000) },
            { name: "广西", value: Math.round(Math.random() * 1000) },

            { name: "台湾省", value: Math.round(Math.random() * 1000) },
            { name: "香港", value: Math.round(Math.random() * 1000) },
            { name: "澳门", value: Math.round(Math.random() * 1000) }
          ],
          // 数据映射  同china文件中的name进行映射
          nameMap: {
            "北京市": "北京",
            "天津市": "天津",
            "上海市": "上海",
            "重庆市": "重庆",
            "西藏自治区": "西藏",
            "宁夏回族自治区": "宁夏",
            "新疆维吾尔自治区": "新疆",
            "内蒙古自治区": "内蒙古",
            "广西壮族自治区": "广西",
          },
        }],
      }
    }
  },

降水量案例完整代码

<template>
  <div class="home">
    <div id="mapContain"
         style="width:1000px;height:800px;background-color:#050512;"></div>
  </div>
</template>

<script>
import china from '@/config/china.js'
// import china from '@/config/china.json'
import * as echarts from 'echarts';
export default {
  components: {},
  data () {
    return {
      option: {
        // geo: {
        //   map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
        //   roam: true, //缩放
        //   label: { show: true }, //是否显示省份名称
        //   zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
        // },

        //鼠标移上去时显示悬浮框
        tooltip: {
          backgroundColor: '#92DCC6',
          padding: 0,
          trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          //模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。
          formatter: (params) => {
            console.log(params)
            let obj = { img: require('@/assets/logo.png') }
            return `<div style="text-align: center;">
                      <img src=${obj.img}/>
                      <p>${params.name}</p>
                      <p>${params.value}</p>
                    <div>`
          },
        },
        
        // 视觉映射组件
        visualMap: [{
          type: 'continuous',//类型为连续型
          min: 0,
          max: 1000,
          // range: [100, 400],
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],//取值范围的文字
          textStyle: {
            color: "#fff"
          },
          inRange: {
            color: ['#e0ffff', '#006edd']//取值范围的颜色
          },
        }],

        series: [{
          type: 'map',
          name: "降水量",
          map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致
          roam: true, //缩放
          zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
          label: {
            show: true,//是否显示省份名称
            color: "#fff"
          },
          itemStyle: {
            areaColor: '#AAD5FF',//地图区域背景颜色
            borderColor: '#fff'//地图边界颜色
          },
          //高亮时的设置
          emphasis: {
            //高亮时地图区域背景颜色
            itemStyle: {
              areaColor: 'pink',
            },
            //文字颜色，样式在此处
            label: {
              color: '#fff'
            }
          },
          // 数据
          data: [
            { name: "北京", value: Math.round(Math.random() * 1000) },
            { name: "天津", value: Math.round(Math.random() * 1000) },
            { name: "上海", value: Math.round(Math.random() * 1000) },
            { name: "重庆", value: Math.round(Math.random() * 1000) },
            { name: "河北省", value: Math.round(Math.random() * 1000) },
            { name: "河南省", value: Math.round(Math.random() * 1000) },
            { name: "云南省", value: Math.round(Math.random() * 1000) },
            { name: "辽宁省", value: Math.round(Math.random() * 1000) },
            { name: "黑龙江省", value: Math.round(Math.random() * 1000) },
            { name: "湖南省", value: Math.round(Math.random() * 1000) },
            { name: "安徽省", value: Math.round(Math.random() * 1000) },
            { name: "山东省", value: Math.round(Math.random() * 1000) },
            { name: "江苏省", value: Math.round(Math.random() * 1000) },
            { name: "浙江省", value: Math.round(Math.random() * 1000) },
            { name: "江西省", value: Math.round(Math.random() * 1000) },
            { name: "湖北省", value: Math.round(Math.random() * 1000) },
            { name: "甘肃省", value: Math.round(Math.random() * 1000) },
            { name: "山西省", value: Math.round(Math.random() * 1000) },

            { name: "陕西省", value: Math.round(Math.random() * 1000) },
            { name: "吉林省", value: Math.round(Math.random() * 1000) },
            { name: "福建省", value: Math.round(Math.random() * 1000) },
            { name: "贵州省", value: Math.round(Math.random() * 1000) },
            { name: "广东省", value: Math.round(Math.random() * 1000) },
            { name: "青海省", value: Math.round(Math.random() * 1000) },
            { name: "四川省", value: Math.round(Math.random() * 1000) },
            { name: "海南省", value: Math.round(Math.random() * 1000) },

            { name: "西藏", value: Math.round(Math.random() * 1000) },
            { name: "宁夏", value: Math.round(Math.random() * 1000) },
            { name: "新疆", value: Math.round(Math.random() * 1000) },
            { name: "内蒙古", value: Math.round(Math.random() * 1000) },
            { name: "广西", value: Math.round(Math.random() * 1000) },

            { name: "台湾省", value: Math.round(Math.random() * 1000) },
            { name: "香港", value: Math.round(Math.random() * 1000) },
            { name: "澳门", value: Math.round(Math.random() * 1000) }
          ],
          // 数据映射  同china文件中的name进行映射
          nameMap: {
            "北京市": "北京",
            "天津市": "天津",
            "上海市": "上海",
            "重庆市": "重庆",
            "西藏自治区": "西藏",
            "宁夏回族自治区": "宁夏",
            "新疆维吾尔自治区": "新疆",
            "内蒙古自治区": "内蒙古",
            "广西壮族自治区": "广西",
          },
        }],
      }
    }
  },
  mounted () {
    this.drawMap()
  },
  methods: {
    drawMap () {
      echarts.registerMap('china', china)
      var chinaChart = echarts.init(
        document.getElementById("mapContain")
      );
      chinaChart.setOption(this.option);
    }
  }
};
</script>
清虚桂意
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts地图geojson
05-10
地图json
echarts地图扩展浙江省geoJSON地图数据
10-13
浙江省地图json文件。可用于echarts地图绘制浙江省地图区域
山东echarts地图
hahah1234111111的博客
06-27 2579
echarts地图组件
获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化
热门推荐
姜雪辞的博客
06-28 2万+
先看效果： 熟悉echarts的看到这个图之后，都想到了什么？没错，就是官方示例里的香港18区人口密度图： 从官方示例代码我们可以看到，生成图中各区域地图的，就是引入的这个json文件： 那么，如果我们想要生成自己想要的地区地图，只要拿到相应地区的json文件就可以了。这个文件里面主要是什么内容呢？把这个文件地址打出来打开它，我们可以看到，它是geoJson格式的： （这里补一下GeoJson的百科链接，第一次接触的小伙伴可以了解一下：百度百科 - geoJson） 因此，我们如果能拿到自己需要的
echarts 全国地图geojson数据
01-17
全国地图完整json数据、eCharts全国及各省、市、县地图层json数据（完整终极版）
echarts 全国地图，省市地图案例案例代码
qq_41048831的博客
04-18 1935
山西省地图代码
Echarts_map(二) GeoJSON的使用,下载,绘制和修改
哒哒嘀嗒
11-21 1万+
Echarts map 二 GeoJSON的使用,下载,绘制和修改GeoJson的下载GeoJson的使用GeoJson的制作手写geojson在线制作相关系列 GeoJson的下载 echarts官方不维护数据之后,可以在gallery社区 下载相关的json;当然网络上仔细找找也可以找到。 普遍来讲，筛选地图之后选一个项目进去之后,F12>NetWork>F5打开控制台,选择ne...
使用geojson自定义echarts地图
最新发布
filwycba的博客
11-09 1270
使用geojson自定义echarts地图，免费获取geojson数据
echarts map地图geojson/json格式的简单使用
wallace_yang的博客
12-12 2万+
** echarts地图简单使用方法 （geojson格式/json格式） ** 首先贴两个非常有用的地图网站 地图下载网站：http://datav.aliyun.com/tools/atlas/# 可以下载精确到县区的geojson格式地图文件(地图更新有一定迟滞性，新成立的区可能没有标注需要自己用下面那个网站修改) 自定义修改地图网站：http://ghttp://datav.aliyun.com/tools/atlas/ 简单使用 1.引入echarts不多赘述，但要注意echarts5以后引入方式
使用echarts绘制geo地图
qq_35269556的博客
02-20 7046
我这里实现的是河南省的地图 点击要下钻的区域展示相应区域的地图，点击地图外部空白处返回上一级。 一、准备geojson数据 网址：DataV.GeoAtlas地理小工具系列 下载需要的geojson数据。保存到src/assets文件夹下 准备河南省的地市编码json文件（all_henan.json）,该文件网上比较难找，我在这里贴出来all_henan.json文件 [ { "adcode": "410100", "name": "郑州市" ...
echarts geojson 地图
04-04
包含echarts map geojson生成工具，全国echart地图各区域geoJson数据以及全国行政区划代码表
echarts geojson
06-08
echarts egojson 全国省市县 数据， echarts官网没得下载，找了很久才找全
利用echarts绘制地图的geojson（包含国家，省，市），有实现实例
05-30
1.ECharts的geojson地图数据下载(全国地图json、各省、市)有demo 2.包含一个cityName.js城市对照表 3.index.js是鲫鱼react的开发的模块，可以直接使用
echarts3地图数据GeoJson(全国、省、地市)
08-15
echarts3目前已经不支持下载地图数据，此附件中包含了js和json两种数据格式，以及调用示例。 数据非最新，请谨慎下载
世界地图Geojson数据
02-21
世界地图Geojson数据，可用于Echarts等图表组件中世界地图图谱绘制
echarts扩展地图geoJson生成方法
10-14
echarts扩展地图使用geoJson格式，生成这种格式相当困难啊。千辛万苦找到了非常方便的图形界面绘制多边形生成geoJson的方法，终于可以自己绘制区域了~！！
vue使用leafLet（绘图工具详解）
weixin_45031595的博客
12-06 1万+
安装 leaflet leaflet.pm绘图工具 引入，在项目main.js中 import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用 import * as L from "leaflet"; import "leaflet/dist/leaflet.
echarts地图获取geojson
04-03
要获取echarts地图的geojson数据，您可以遵循以下步骤： 1. 找到您想要绘制的地图的名称和区域代码。例如，中国的区域代码是“CN”。 2. 在Echarts官网上找到对应的地图。在“地图下载”页面中，您可以下载包含geojson数据的文件。文件格式通常为“mapName.json”。 3. 在您的代码中加载地图数据。您可以使用Echarts提供的“echarts.registerMap（）”函数将地图数据注册到Echarts中。 示例代码： //加载地图数据 $.getJSON('mapName.json', function (data) { //注册地图数据 echarts.registerMap('mapName', data); //绘制地图 var chart = echarts.init(document.getElementById('map')); chart.setOption({ series: [{ type: 'map', map: 'mapName' }] }); }); 在上面的代码中，“mapName.json”是您下载的地图数据文件的名称，而“mapName”是您要注册的地图名称。 “chart.setOption（{}）”中的其他选项可以根据您的需求进行配置。 注意：有些地图需要加载TopoJson格式的数据，而不是GeoJSON格式的数据。在这种情况下，您需要使用“topojson”参数而不是“geojson”参数来加载数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值