Vue2.0 + echarts实现湖北省地图 + 散点

 

<template>
  <div>
    <div id="myMap" style="width: 100%; height: 700px"></div>
  </div>
</template>

import * as echarts from 'echarts'
import hubei from './hubei.json'
import demoData from './demoData.json'
export default {
  data () {
    return {
      //假数据，真实项目可以根据接口获取
      mapdata: demoData
    }
  },
  mounted () {
    this.paintingMap()
  },
  methods: {
    convertData (data) {
      var geoCoordMap = {
        武汉: [114.33, 30.82],
        黄石: [115.01, 30.1],
        十堰: [110.47, 32.65],
        宜昌: [111.14, 30.92],
        神农架林区: [110.5, 31.77],
        恩施土家族苗族自治州: [109.5, 30.4],
        孝感: [113.88, 31.3],
        黄冈: [115.35, 30.9],
        随州: [113.42, 32.01],
        襄阳: [111.94, 32.1],
        荆门: [112.6, 31.26],
        潜江: [112.75, 30.46],
        荆州: [112.24, 29.99],
        仙桃: [113.65, 30.3],
        咸宁: [114.19, 29.8],
        鄂州: [114.75, 30.48],
        天门: [113.24, 30.53]
      }
      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
    },

    paintingMap () {
      let symbolImg = 'image://' + require('@/assets/icon/location.svg')
      let symbolImg_w = 'image://' + require('@/assets/icon/location_w.svg')//单独放大武汉的图标
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myMap'))
      var that = this
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echarts.registerMap('hubei', hubei)
      //防止重复点击
      myChart.off('click')
      // 绘制图表
      myChart.setOption({
        layoutCenter: ['50%', '50%'], //位置
        layoutSize: '98%', //大小

        tooltip: {
          enterable: true, // 鼠标是否可以进入悬浮框
          triggerOn: 'click',
          trigger: 'item',
          borderWidth: 1,
          backgroundColor: '#242c2d',
          padding: 0, // 提示框浮层内边距，
        },

        geo: {
          // 点击后的样式
          select: {
            itemStyle: {
              areaColor: '#0c9db0',
              borderColor: '#6fcdd7',
              borderWidth: '1',
              color:'#fff'
            },
            label:{
              color:'#fff'
            }
          },
          show: true,
          roam: false, //地图缩放、平移
          map: 'hubei',
          label: {
            normal: {
              show: true, //显示省份标签
              // textStyle: { color: '#b5f5f7',fontSize:14 } //省份标签字体颜色
              formatter:function(params){
                if(params.name =='武汉市'){
                    // 放大武汉的字体
                  return `{a|${params.name}}`
                }else{
                  return `{b|${params.name}}`
                }
            },
            rich: {
						a: {
							color: '#d8ebee',
							fontSize: 18,
						    },
						b: {
							color: '#b5f5f7',
							fontSize: 14,
						    }
					  },
            },
            
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              label:{
                textStyle: { color: '#fff' }
              }
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 1, //区域边框宽度
              borderColor: '#5fddec', //区域边框颜色
              areaColor: '#0c9db0', //区域颜色
              label: { show: true }
            },

            emphasis: {
              borderWidth: 1, //鼠标滑过区域，区域边框宽度
              borderColor: '#fff', //鼠标滑过区域，区域边框颜色
              areaColor: '#6dd1d1', //鼠标滑过区域背景色
              label: { show: true,textStyle: { color: '#fff' } }
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          realtime: false,
          calculable: true,
          inRange: {
            color: [
              '#0a9daf' // 地图颜色
            ]
          }
        },
        series: [
          {
            show: true,
            type: 'map',
            map: 'hubei',
            roam: true, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            aspectScale: 0.95, // 长宽比
            data: that.convertData(that.mapdata)
          },
          {
            type: 'scatter', //effectScatter 动态
            coordinateSystem: 'geo',
            data: that.convertData(that.mapdata),
            symbolSize: (rawValue, params) => {
              if(params.name == '武汉'){
                return 20
              }else{
                return 13
              }
             },
            symbol: (rawValue,params)=>{//symbolImg
                if(params.name == '武汉'){
                  return symbolImg_w
                }else{
                  return symbolImg
                }
            },
            label: {
              normal: {
                formatter: '',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: ''
              }
            }
          }
        ]
      })
    }
  }
}

demoData.json

[
    {   "name":"恩施土家族苗族自治州","value":"9"},{
        "name":"武汉","value":"9"},{   
        "name":"荆州","value":"9"},{
        "name":"黄石","value":"9"},{
        "name":"宜昌","value":"9"},{
        "name":"襄阳","value":"9"},{
        "name":"孝感","value":"9"},{
        "name":"荆门","value":"9"},{
        "name":"黄冈","value":"9"},{
        "name":"鄂州","value":"9"},{
        "name":"咸宁","value":"9"},{
        "name":"十堰","value":"9"},{
        "name":"随州","value":"9"},{
        "name":"神农架林区","value":"9"},{
        "name":"天门","value":"9"},{
        "name":"仙桃","value":"9"},{
        "name":"潜江","value":"9"}
]

.hubei.json 在这里进行下载：DataV.GeoAtlas地理小工具系列

想下载哪个省点击哪块就ok