echarts显示全国地图（附带全国地图json数据）

mini秀

已于 2023-08-25 14:43:18 修改

阅读量1.3w

点赞数 11

分类专栏： echarts 文章标签： echarts json 前端

于 2023-08-25 14:14:11 首次发布

本文链接：https://blog.csdn.net/weixin_44088179/article/details/132478132

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

前言
一、效果展示
二、实现步骤

前言

实现echarts全国地图展示，可点击进入省份，可根据经纬度坐标进行位置标记

一、效果展示

全国地图
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
省级地图（西藏）
在这里插入图片描述

二、实现步骤

1.安装echarts

// 下载echarts
npm install echarts --save

2.在main.js中全局注册echarts


import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

//直接this.$echarts使用

3.导入地图json数据

https://download.csdn.net/download/weixin_44088179/88251920?spm=1001.2014.3001.5501
下载后放入自己项目中（我放在static目录中），这里是全国及各个省份的所有json数据集合，如还需市、区级还需自行下载，地址如下：

http://datav.aliyun.com/portal/school/atlas/area_selector 可下载全国所有地区的json数据（全国、省、市、区）

4.创建cityExport.js文件

创建cityExport.js文件，汇总所有地图json (引入路径记得修改)

let cityList = [
  {
    name: '北京市',
    code: 110000,
    data: require('../../../static/json/beijing.json'),
  },
  {
    name: '天津市',
    code: 120000,
    data:  require('../../../static/json/tianjin.json'),
  },
  {
    name: '河北省',
    code: 130000,
    data: require('../../../static/json/hebei.json'),
  },
  {
    name: '山西省',
    code: 140000,
    data: require('../../../static/json/shanxi.json'),
  },
  {
    name: '内蒙古自治区',
    code: 150000,
    data: require('../../../static/json/neimenggu.json'),
  },
  {
    name: '辽宁省',
    code: 210000,
    data: require('../../../static/json/liaoning.json'),
  },
  {
    name: '吉林省',
    code: 220000,
    data: require('../../../static/json/jilin.json'),
  },
  {
    name: '黑龙江省',
    code: 230000,
    data: require('../../../static/json/heilongjiang.json'),
  },
  {
    name: '上海市',
    code: 310000,
    data: require('../../../static/json/shanghai.json'),
  },
  {
    name: '江苏省',
    code: 320000,
    data: require('../../../static/json/jiangsu.json'),
  },
  {
    name: '浙江省',
    code: 330000,
    data: require('../../../static/json/zhejiang.json'),
  },
  {
    name: '安徽省',
    code: 340000,
    data: require('../../../static/json/anhui.json'),
  },
  {
    name: '福建省',
    code: 350000,
    data: require('../../../static/json/fujian.json'),
  },
  {
    name: '江西省',
    code: 360000,
    data: require('../../../static/json/jiangxi.json'),
  },
  {
    name: '山东省',
    code: 370000,
    data: require('../../../static/json/shandong.json'),
  },
  {
    name: '河南省',
    code: 410000,
    data: require('../../../static/json/henan.json'),
  },
  {
    name: '湖北省',
    code: 420000,
    data: require('../../../static/json/hubei.json'),
  },
  {
    name: '湖南省',
    code: 430000,
    data: require('../../../static/json/hunan.json'),
  },
  {
    name: '广东省',
    code: 440000,
    data: require('../../../static/json/guangdong.json'),
  },
  {
    name: '广西壮族自治区',
    code: 450000,
    data: require('../../../static/json/guangxi.json'),
  },
  {
    name: '海南省',
    code: 460000,
    data: require('../../../static/json/hainan.json'),
  },
  {
    name: '重庆市',
    code: 500000,
    data: require('../../../static/json/chongqing.json'),
  },
  {
    name: '四川省',
    code: 510000,
    data: require('../../../static/json/sichuan.json'),
  },
  {
    name: '贵州省',
    code: 520000,
    data: require('../../../static/json/guizhou.json'),
  },
  {
    name: '云南省',
    code: 530000,
    data: require('../../../static/json/yunnan.json'),
  },
  {
    name: '西藏自治区',
    code: 540000,
    data: require('../../../static/json/xizhang.json'),
  },
  {
    name: '陕西省',
    code: 610000,
    data: require('../../../static/json/shangxi.json'),
  },
  {
    name: '甘肃省',
    code: 620000,
    data: require('../../../static/json/gansu.json'),
  },
  {
    name: '青海省',
    code: 630000,
    data: require('../../../static/json/qinghai.json'),
  },
  {
    name: '宁夏回族自治区',
    code: 640000,
    data: require('../../../static/json/ningxia.json'),
  },
  {
    name: '新疆维吾尔自治区',
    code: 650000,
    data: require('../../../static/json/xinjiang.json'),
  },
  {
    name: '香港特别行政区',
    code: 810000,
    data: require('../../../static/json/xianggang.json'),
  },
  {
    name: '澳门特别行政区',
    code: 820000,
    data: require('../../../static/json/aomen.json'),
  },
  {
    name: '台湾省',
    code: 710000,
    data: require('../../../static/json/taiwan.json'),
  },
];
let china = require('../../../static/json/china.json')
export default {
  cityList: cityList,
  china: china
};

4.创建地图

代码如下（示例）：

<template>
  <div class="map" style="height: 410px;position: relative;">
    <img @click="rebackMap" 
      v-show="isreturn" 
      src="@/static/img/return.png" 
      alt="" 
      style="z-index:999;
      position: absolute;
      right: 20px;
      top: 15px;">
    <div id="map" style="height: 410px;"></div>
  </div>
</template>
<script>
import cityExport from './cityExport.js';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      isreturn: false, // 是否显示返回全国地图按钮
      mapChart: null, //地图对象
      mapOption: null,//地图属性
      dataList: [ //地图标记经纬度坐标和code码,可只要经纬度
        { name: "西藏", value: [91.23, 29.5, 2333] },
        { name: "黑龙江", value: [128.03, 47.01, 1007] },
      ],
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    getMap() { //地图
      if (!this.mapChart) {
        this.mapChart = this.$echarts.init(document.getElementById('map'));
      }
      this.mapOption = {
        // 背景颜色
        backgroundColor: "#00264e",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100
        },
        map: 'china',
        roam: true,//是否启缩放和平移
        scaleLimit: {
          min: 1,
          max: 5
        },
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: '#fff'
          }
        },
        // 地图配置
        geo: {
          map: "china",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#eee",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#eee",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#ccc",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "#457b9d",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: '站点信息',
            coordinateSystem: 'geo',
            type: 'scatter',
            geoIndex: 0,
            itemStyle: {
              normal: {
                color: '#c23531'
              },
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1,
                opacity: 0.5
              }
            },
            symbolSize: 12,
            data: this.dataList
          }

        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$echarts.registerMap('china', cityExport.china);
      this.mapChart.setOption(this.mapOption);
      //地图点位点击事件
      this.mapChart.on('click', params => {
        // 获取点击的省份名称
        let provinceName = params.name
        // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
        this.dataList.map(item => {
          if (item.name == provinceName) {
            this.mapOption.series[0].data = [item];
          }
        })
        // 进入省级地图
        cityExport.cityList.map(value => {
          if (value.name.indexOf(provinceName) !== -1) {
            this.mapChart.clear();
            this.mapOption.geo.map = 'Pmap';
            this.$echarts.registerMap('Pmap', value.data)
            this.mapChart.setOption(this.mapOption);
            this.isreturn = true;
          }
        });
      })
    },
    rebackMap() { //返回全国地图
      this.mapChart.clear();
      this.mapOption.series[0].data = this.dataList //重新标记
      this.mapOption.geo.map = 'china';
      this.$echarts.registerMap('china', cityExport.china);
      this.mapChart.setOption(this.mapOption);
      this.isreturn = false;
    }
  }
}
</script>