鍍金池/ 問答/HTML/ Vue使用Echarts地圖顯示不全

Vue使用Echarts地圖顯示不全

對官網(wǎng)demo精簡，結(jié)果地圖只顯示南海諸島和每個點。

clipboard.png

官網(wǎng)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里調(diào)用 this.drawMap()

不懂問題出在哪里。用Echart3版本試了，一樣的問題

回答
編輯回答
怣痛

估計是沒有注冊地圖文件，地圖文件在echarts/map下面，有 json 和 js 格式的，引入并且注冊，以世界圖為例：

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

echarts.registerMap('world', world)
2017年12月13日 16:54
編輯回答
黑與白

你沒有地圖文件吧

2017年10月7日 14:01