echarts 全国和省份

1.建立 register.js文件

import * as echarts from 'echarts'

import anhui from './安徽省.json'
import beijing from './北京市.json'
import chongqing from './重庆市.json'
import fujian from './福建省.json'
import gansu from './甘肃省.json'
import guangdong from './广东省.json'
import guangxi from './广西壮族自治区.json'
...........
import zhejiang from './浙江省.json'

//json文件在https://datav.aliyun.com/portal/school/atlas/area_selector下载
//可以将json或js文件导入下面的网址进行编 https://geojson.io/#map=2/0/20

const data={
  安徽: anhui,
  北京: beijing,
  重庆: chongqing,
  福建: fujian,
  甘肃: gansu,
  广东: guangdong,
}
Object.entries(data).forEach(([name, val]) => {
  echarts.registerMap(name, val)
})

//name是省份名称flag,val是省份的json文件名称

2.在vue文件中编写地图文件

//npm install echarts -S
//vue页面中，如果是V5.0之前的版本，引入的方式：
import echarts from 'echarts'

//如果是V5.0之后的版本，页面中的引入方式：
//import * as echarts from 'echarts'

//引入echarts的theme: 
require('echarts/theme/macarons') // echarts theme

import './register'




//option配置代码
geo: { // 地理坐标系组件用于地图的绘制
    map: '内蒙古', // 写入具体的地区，如果是全国，就是china
    roam: false, // 是否开启鼠标缩放和平移漫游
    aspectScale: 1, // 长宽比
    zoom: 1.25, // 当前视角的缩放比例（地图的放大比例）
    // top:20,
    label: {
      show: true,
      color: '#f2f2f2', // 文字颜色
      fontSize: 16
    },
    itemStyle: { // 地图区域的多边形 图形样式。
      normal: {
        areaColor: { //渐变色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(43, 196, 243, 0.42)' // 0% 处的颜色
          }, {
            offset: 1, color: 'rgba(43, 196, 243, 0.42)' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
        },
        // areaColor: 'rgba(43, 196, 243, 0.42)',
        borderColor: 'rgba(43, 196, 243, 1)',
        borderWidth: 3,
        shadowColor: '#CFCFCF', //阴影
        shadowBlur: 2,
        shadowOffsetX: 0,
        shadowOffsetY: 5
      },
      emphasis: { //hover 颜色
        areaColor: '#2B91B7'
      }
    },
    regions: []
  },
  series: [
    {
      // name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
      type: 'map',
      mapType: 'neimenggu', //全国是china
      geoIndex: 0,
      label: {
        show: true
      },
      data: []
    }
  ]
}

//显示map:
this.Chart = echarts.init(document.getElementById('contentmap'))
this.Chart.clear()
this.Chart.setOption(thisOption)

注意:

//以安徽为例：

//生成anhui.js文件拷贝到项目中。

//页面中引入：
import './anhui'




如果是json文件：

const anhui= await import('./anhui.json')
echarts.registerMap('安徽', anhui)

全国引入

import Echart from './Echart'
import echarts from 'echarts'
import china from './china.json'
echarts.registerMap('全国', china )