vue echarts 离线datav地图使用

DATAV.GeoAtlas：http://datav.aliyun.com/tools/atlas/index.html

下载完成后引入：

import guizhou from '../../public/mapJson/贵州省.json'

初始化组件：

	  const that = this
      setTimeout(() => {
        var echarts = require('echarts')
        that.graph = echarts.init(document.getElementById('div_graph'))
        echarts.registerMap('guizhou', guizhou) // 地图注册
        var option = {
          tooltip: {
            trigger: 'item'
          },
          // 左下角视觉映射组件
          visualMap: {
            min: 0, // 最小值
            max: 18000, // 最大值
            text: ['多', '少'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#fff', 'yellow', 'orangered']
            },
            textStyle: {
              color: 'rgba(255,255,255,0.8)' //图例文字颜色，大小等配置
            },
            left: '1%'
          },
          series: [
            {
              name: '分布图',
              type: 'map',
              mapType: 'guizhou',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#000'
                },
                // emphasis: {
                //   areaColor: '#07caa9'
                // }
              },
              data: this.data,
              nameMap: {// 映射名
                '遵义市': '遵义',
                '铜仁市': '铜仁',
                '毕节市': '毕节',
                '六盘水市': '六盘水',
                '贵阳市': '贵阳',
                '安顺市': '安顺',
                '黔西南布依族苗族自治州': '黔西南',
                '黔东南苗族侗族自治州': '黔东南',
                '黔南布依族苗族自治州': '黔南'
              }
            }
          ]
        }
        that.graph.setOption(option,true)
        window.addEventListener('resize', () => { that.graphInit() })
        // 设置鼠标移入指定省份颜色不变的效果
        // that.graph.on('mouseover', function (params) {
        //   if (params.data.value !== undefined) {
        //     that.graph.dispatchAction({
        //       type: 'downplay'
        //     })
        //   }
        // })
      })

效果图：