Vue使用Echarts地图显示不全

Question

对官网demo精简，结果地图只显示南海诸岛和每个点。

官网Demo

Vue代码如下：

drawMap () {
  let data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
    {name: '金昌', value: 19},
    {name: '泉州', value: 21}
  ]
  let geoCoordMap = {
    '海门': [121.15, 31.89],
    '鄂尔多斯': [109.781327, 39.608266],
    '招远': [120.38, 37.35],
    '舟山': [122.207216, 29.985295],
    '齐齐哈尔': [123.97, 47.33],
    '盐城': [120.13, 33.38],
    '赤峰': [118.87, 42.28],
    '青岛': [120.33, 36.07],
    '乳山': [121.52, 36.89],
    '金昌': [102.188043, 38.520089],
    '泉州': [118.58, 24.93]
  }
  let convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        })
      }
    }
    return res
  }
  let option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name + ' : ' + params.value[2]
      }
    },
    geo: {
      map: 'china',
      roam: true,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          areaColor: '#a19cef',
          borderColor: '#c4c2f5'
        },
        emphasis: {
          areaColor: '#8c86f7'
        }
      }
    },
    series: [
      {
        name: 'house',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: 20,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: '#f1f425'
          },
          emphasis: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      }
    ]

  }
  this.chartMap = echarts.init(document.getElementById('chartMap'))
  this.chartMap.setOption(option)
}

在mounted里调用 this.drawMap()

不懂问题出在哪里。用Echart3版本试了，一样的问题

Answer 1

估计是没有注册地图文件，地图文件在echarts/map下面，有 json 和 js 格式的，引入并且注册，以世界图为例：

import echarts from 'echarts'
import world from 'echarts/map/json/world.json'

echarts.registerMap('world', world)

Answer 2

你没有地图文件吧