【vue】vue + ECharts 实现中国地图

1.效果图：

2.实现步骤

1. 引入ECharts
   ECharts 官网地址：https://echarts.apache.org/zh/index.html

npm install echarts --save

2. 下载中国地图及各省份地图的json数据
   下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector
   
3. 重命名地图json文件名字并复制到public ----> static---->map文件夹下
   
4. 创建省份名字转拼音的工具类map-utils.js

// 省份对应的拼音
const nameToPinyin = {
  安徽省: 'ah',
  澳门特别行政区: 'am',
  北京市: 'bj',
  福建省: 'fj',
  甘肃省: 'gs',
  广东省: 'gd',
  广西壮族自治区: 'gx',
  贵州省: 'gz',
  海南省: 'hn',
  河北省: 'hb',
  河南省: 'hn1',
  黑龙江省: 'hlj',
  湖北省: 'hb1',
  湖南省: 'hn2',
  吉林省: 'jl',
  江苏省: 'js',
  江西省: 'jx',
  辽宁省: 'ln',
  内蒙古自治区: 'nmg',
  宁夏回族自治区: 'nx',
  青海省: 'qh',
  山东省: 'sd',
  山西省: 'sx',
  陕西省: 'sx1',
  上海市: 'sh',
  四川省: 'sc',
  台湾省: 'tw',
  天津市: 'tj',
  西藏自治区: 'xz',
  香港特别行政区: 'xg',
  新疆维吾尔自治区: 'xj',
  云南省: 'yn',
  浙江省: 'zj',
  重庆市: 'cq',
}

// 获取省份名称及地图矢量数据的地址
export function getProvinceMapInfo(arg){
// static/map/province 为各省份json数据
  const path = `/static/map/province/${nameToPinyin[arg]}.json`
  return{
      key: nameToPinyin[arg],
      path: path
  }
}

5. 下载echarts暗色主题
   下载地址：https://echarts.apache.org/zh/theme-builder.html
   
6. 创建vue文件，并使用ECharts

<template>
  <!-- 具备一个宽高的dom -->
  <div ref="main" style="height: 879px ;width: 100%;margin: 0;padding: 0;overflow: hidden" @dblclick="revertMap"></div>
</template>

<script>
// 导入echarts
import * as echarts from 'echarts';
// 中国地图
import chianJson from '@/map/china.json'
// 导入echarts主题
require('@/theme/chalk')
// axios
import axios from 'axios'
// 各省份对应的矢量数据地址
import {getProvinceMapInfo} from '@/utils/map-utils'
export default {
  name: "china-map",
  data() {
    return {
      chart: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      window.addEventListener('resize', this.screenAdapter)
      this.screenAdapter()
    })

  },
  methods: {
    initChart() {
      // init第一个参数 ref定义的的，第二个参数主题
      this.chart = echarts.init(this.$refs.main, 'chalk')
      echarts.registerMap("chain", chianJson)
      this.chart.setOption({
        title: {
          text: '中国地图',
          left: 20,
          top: 20,
        },
        geo: {
          type: 'map', // 类型
          map: 'chain',
          top: '5%', // 距离顶部
          bottom: '5%', // 距离底部
          itemStyle: { // 地图区域的样式。
            areaColor: '#2E72BF', // 地图整体区域的颜色
            borderColor: '#333', //地图边界线的颜色
          },
        },
        // 自定义提示框的内容
        tooltip: {
          trigger: 'item',
          // 自定义提示框的内容
          formatter(params) {
            return (
              "
" +
              params.data.name +
              " 
 " +
              params.seriesName +
              "
"
);
}
},
// 散点图
series: [
{
type: 'effectScatter', //特效散点图
rippleEffect: { // 涟漪效果
scale: 5,
brushType: 'stroke'
},
coordinateSystem: 'geo', // 使用坐标
name: "一线城市",
data: [
{name: "北京", value: [116.46, 39.92]},
{name: "上海", value: [121.48, 31.22]},
{name: "广州", value: [113.23, 23.16]},
{name: "深圳", value: [114.07, 22.62]},
]
},
{
type: 'effectScatter', //特效散点图
rippleEffect: { // 涟漪效果
scale: 5,
brushType: 'stroke'
},
coordinateSystem: 'geo', // 使用坐标
name: "二线城市",
data: [
{name: "南京", value: [118.78, 32.04]},
{name: "杭州", value: [120.19, 30.26]},
{name: "成都", value: [104.06, 30.67]},
{name: "武汉", value: [114.31, 30.52]},
]
},
{
type: 'effectScatter', //特效散点图
rippleEffect: { // 涟漪效果
scale: 5,
brushType: 'stroke'
},
coordinateSystem: 'geo', // 使用坐标
name: "三线城市",
data: [
{name: "拉萨", value: [91.11, 29.97]},
{name: "乌鲁木齐", value: [87.68, 43.77]},
{name: "西宁", value: [101.74, 36.56]},
{name: "兰州", value: [103.73, 36.03]},
]
},
],
legend: { // 图例组件
left: '5%',
bottom: '5%',
orient: 'vertical', // 竖着排列
data: ['一线城市', '二线城市', '三线城市']
},
})
this.chart.on('click', async arg =>{
const provinceInfo = getProvinceMapInfo(arg.name)
console.log("provinceInfo",provinceInfo)
// 如果存在key执行下面内容
if(provinceInfo.key !== undefined){
// 获取static下面的json数据
const res = await axios.get("http://localhost:9528" + provinceInfo.path)
echarts.registerMap(provinceInfo.key, res.data)
const changeOption={
geo:{
map: provinceInfo.key
}
}
this.chart.setOption(changeOption)
}
})
},
// 当浏览器的大小发生变化的时候，会调用此方法来完成适配
screenAdapter() {
// 获取自适应大小
const titleFontSize = this.$refs.main.offsetWidth / 100 * 3.6
console.log("titleFontSize", titleFontSize)
// 自适应配置
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize // 自适应字体大小
}
},
legend: { // 图例组件
itemWidth: titleFontSize / 2,
itemHeight: titleFontSize / 2,
itemGap: titleFontSize / 2,
textStyle: {
fontSize: titleFontSize / 2 // 自适应字体大小
}
},
}
this.chart.setOption(adapterOption)
// 自适应
this.chart.resize()
},
// 回退
revertMap(){
const revertOption={
geo:{
map: 'chain'
}
}
this.chart.setOption(revertOption)
},
},
}
</script>
<style lang="scss" scoped>
.dashboard-container{
height: 100%;
width: 100%;
}
</style>

3.源码地址
https://gitee.com/xhs101/sa-token.git