效果圖

在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 = markListif(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文件

總結

以上是生活随笔為你收集整理的vue echarts绘制省份地图并添加自定义标注的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。