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

更新时间：2023年04月25日 09:26:30 作者：微笑的鱼_

这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

效果图

在main.js中引入地图

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

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

html部分

<div id="province_map_box">
   <div id=province_map"></div>
</div>

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>

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]
            	}
         	 }
        }
      }
	}
}

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

echarts添加地图标点（笔记）

如图：

实例html：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> -->
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> -->
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="E:\incubator-echarts-4.8.0\map\js\province\guangxi.js"></script>
       <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
       <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
    "南宁医院":[108.324994,22.810701]
};
 
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
    }
    console.log(res);
    return res;
};
 
 
option = {
    backgroundColor: '#fff',
    title: {
        text: '广西区合作医院分布',
        subtext: 'data from 数字广润',
        sublink: 'http://gxgrtech.com.cn/',
        left: 'center',
        textStyle: {
            color: '#000'
        }
    },
    tooltip: {
        trigger: 'item',
        //formatter: "名称:{a}<br />坐标:{c}"
        formatter:function(params){
            console.log(params);
            console.log(params.data[3]);
            var res = '名称:'+params.data[3]+'<br/>';
            return res;
        }
 
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['医院'],
        textStyle: {
            color: '#fff'
        }
    },
    visualMap: {
        min: 0,
        max: 300,
        splitNumber: 5,
        color: ['#d94e5d','#eac736','#50a3ba'],
        textStyle: {
            color: '#fff'
        },
        dimension:3
    },
    geo: {
        map: '广西',
        label: {
            normal: {
                show:true,
                areaColor: '#ffefd5',
                borderColor: '#111',
                textStyle:{color:"#c71585"}
            },
            emphasis: {
                show: false,
                textStyle:{color:"#fff"}
            }
        },
        itemStyle: {
            normal: {
                show:false,
                areaColor: '#ffefd5',
                borderColor: '#009fe8'
            },
            emphasis: {
                show:false,
                areaColor: '#f47920'
            }
        }
    },
    series: [
        {
            name: '医院',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData([
                {name: "南宁医院", value: 9}
            ]),
            encode: {
                value: 2
            },
            symbolSize: 12,
            label: {
                normal: {
                        show: false,//显示市区标签
                        textStyle:{color:"#c71585"}//省份标签字体颜色
                    },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,    //关闭文字 （这东西有问题得关）
                    textStyle:{color:"#800080"}
                }
            },
            itemStyle: {
                normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor:"#ffefd5",//区域颜色
                    },
                emphasis: {
                    show:true,
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor:"#f47920",
                }
            }
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue下拉框回显并默认选中随机问题
这篇文章主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
基于Vue实现页面全屏封装的详细步骤
众所周知：目前可视化大屏,视频播放等常见功能都需要用到全屏,本文将使用两种技术实现全屏功能的封装,让不同技术栈的同学都可以轻松掌握,好了,让我们来实现一个既兼容性强又易于管理的全屏功能组件吧,需要的朋友可以参考下
2024-08-08
Vue组件之间的通信方式(推荐!)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
2022-06-06
Vue中遍历数组的新方法实例详解
这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-07-07
vue2中使用axios及axios拦截器的配置教程
众所周知Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js中,下面这篇文章主要给大家介绍了关于vue2中使用axios及axios拦截器的配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置
这篇文章主要介绍了vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置，本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
2019-11-11
vue el-input输入框输入不了的解决方法
在工作中遇到N次input无法输入的问题,所以下面这篇文章主要给大家介绍了关于vue el-input输入框输入不了的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
浅析vue如何实现手机横屏功能
在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下
2024-03-03
vue全局引入scss样式文件的过程记录
css文件可以直接引入到main.js中,scss文件如果没有scss特殊语法也可以直接引入index.js,只有scss文件中的特殊语法全局引入的时候无法显示,所以需要特殊处理,下面这篇文章主要给大家介绍了关于vue全局引入scss样式文件的相关资料,需要的朋友可以参考下
2022-11-11
详解如何添加babel polyfill
这篇文章主要介绍了详解vue如何添加babel polyfill实现方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06