vue echarts绘制省份地图并添加自定义标注_echarts地图标注

效果图

在main.js中引入地图

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
1
2

省份是动态引入的，在.vue文件中
html部分

<div id="province_map_box">
   <div id=province_map"></div>
</div>
1
2
3

css部分

<style lang="scss" scoped>
  #province_map_box {
    height: 500px;
    position: relative;
  }
  #province_map_box #province_map{
    height: 100%;
  }
  #province_map_box .province_map_logo{
    position: absolute;
    top: 0;
    left: 0;
    width:45px;
  }
</style>
<style lang="scss">
  #province_map.tooltip_style{
    line-height:1.7;
    overflow: hidden;
  }
  #province_map.tooltip_left{
    float: left;
  }
  #province_map.tooltip_right{
    float: right;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

script部分

data () {
    return {
    	options: {
    		geo: {
	          map: "city",
	          scaleLimit: {
	            min: 1,
	            max: 2
	          },
	          zoom: 1,
	          top: 20,
	          label: {
	            normal: {
	              show:false,
	              fontSize: "14",
	              color: "rgba(0,0,0,0.7)"
	            },
	            emphasis: {
	              color: '#fff'
	            }
	          },
	          itemStyle: {
	            normal: {
	             	borderColor: "rgba(0, 0, 0, 0.2)",
	             	areaColor: "#3b9cff",//设置地图区域背景色
	            },
	            emphasis: {
	              areaColor: "#3b9cff",
	              shadowOffsetX: 0,
	              shadowOffsetY: 0
	            }
	          }
	        },
	        series: [
	          {
	            name: '省份',
	            type: 'map',
	            geoIndex: 0,
	            map: 'province',
	            data:[]
	          },
	          {
	            name: '企业分布', //红色标注
	            type: 'custom',
	            coordinateSystem: 'geo',
	            clickable:true,
	            data:[]
	          }
	        ]
    	}	
    },
    cityJson: {
      features: []
    }
},
created(){
	this.city = this.$route.query.city
},
mounted() {
  this.$nextTick(()=>{
     this.initEchartMap()
   })
},
methods:{
	//初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('japan_map')
      let myChart = this.$echarts.init(mapDiv)
      let city = this.city
      //动态引入省份json文件
      this.cityJson = require(`echarts/map/json/province/${city}.json`)
      this.$echarts.registerMap('city', this.cityJson, {})
      this.setEchartOption()
      myChart.setOption(this.options)
	  //可为自定义图标添加点击事件
      myChart.on('click', {element: 'aaa'}, (params) => {
        // todo: 当 name 为 'aaa' 的图形元素被点击时，此回调被触发。
      });
    },
    //修改echart配制
    setEchartOption(){
    	//红色标注点的坐标
		let markList = [
          { name: '五常', value: [123.523565,52.920114] },
          { name: '中治', value: [126.319954,46.400728] },
          { name: '中顺', value: [133.310927,47.271857] },
          { name: '常也', value: [129.631468,45.65747] },
          { name: '可谭', value: [130.551333,47.321922] },
          { name: '顺允', value: [125.436884,48.460261] },
        ]
        this.options.series[1].data = markList
        if(markList.length>0){
	        this.options.series[1].renderItem = function(params,api){
            return {
	            type: 'image',
	            name: 'aaa',
	            style: {
	              image: require("@/assets/img/icon_mark.png"), //标注点图标
	              width: 14,
	              height: 18,
	              x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
	              y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
            	}
         	 }
        }
      }
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

注： echarts v4.2.1版本安装后会有地图json文件