收款定制开发Echarts——中国地图绘制

1.收款定制开发首先准备中国城市分布Geo数据 china.json

注：收款定制开发此数据集为三维地球中收款定制开发国的城市分布数据，与二维平面数据有所偏差。可通过处理应用于二维平面中国地图

（奉上处理文件链接 ）

2.引入 echarts 插件 ，并绘制地图

import * as echarts from 'echarts'
// 注册绘制中国地图
echarts.registerMap('china', q(chinaJson))

registerMap(mapName,opt):

•  mapName: 地图名称，在  组件或者  图表类型中设置的 map 对应的就是该值。
• opt :

1. geoJSON : 可选。GeoJson 格式的数据，可以是 JSON 字符串，也可以是解析得到的对象
2. svg : 可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象
3. specialAreas :可选。将地图中的部分区域缩放到合适的位置。(只在 geoJSON 中生效，svg 中不生效)

3.option中配置geo地图显示样式

// 地图配置
  geo: {
    nameMap: {
      China: '中国',
    },
    map: 'china',
    label: {
      emphasis: {
        show: false,
      },
    },
    // 当前视角的缩放比例
    zoom: 2.15, // 2.3
    left: -300,
    top: 250,
    // scale 地图的长宽比
    aspectScale: 1,
    itemStyle: {
      normal: {
        borderColor: '#21EAFD', // 区域边框颜色
        areaColor: 'rgba(255,255,255,0)', // 区域颜色
        borderWidth: 1, // 区域边框宽度
        shadowBlur: 5,
        shadowColor: 'rgba(107,91,237,.7)',
      },
      emphasis: {
        borderColor: '#FFD1A3',
        areaColor: 'rgba(102,105,240,.3)',
        borderWidth: 1,
        shadowBlur: 5,
        shadowColor: 'rgba(135,138,255,.5)',
      },
    },
  },

 配置项可根据官网给定选项配置

注意：map的名称必须同绘制地图API registerMap 的第一个参数名称一致

4.将配置项引入到Echart实例中