【Echarts】echarts地图展示 自定义点位 地图及点位的点击事件

项目中用到地图，之前看到ecarts的地图功能觉得合适，先看看效果图：

1、首先在阿里数据可视化平台下载需要地区的JSON文件：数据可视化

2、下载安装echarts、vue、axios

_this.mapData.push({// value: ele,id: ele.id,name: ele.name,signboardName: ele.signboardName ?? ele.name,lng: ele.longitude,lat: ele.latitude,connectStatus: ele.connectStatus,dataStatus: ele.dataStatus})

自定义点位

addImage(url, params, api, realData) {return {type: "image",style: {image: url,x: api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[0],y: api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[1],width: 20,height: 25,},};},

地图代码`

handler() {var that = thisvar container = document.getElementById("container");var myChart = this.echarts.init(container);myChart.showLoading();axios.get("/json/xuzhou.json").then((geoJson) => {// console.log(geoJson, "geoJson");myChart.hideLoading();this.echarts.registerMap("徐州", geoJson.data);var option = {tooltip: {trigger: 'item',formatter: function (params) {// console.log(params, 'tooltip')return params.data.signboardName }},geo: {// center: [120.80942, 32.5143], // 整个地图的中心map: "徐州",roam: true, // 鼠标缩放itemStyle: {normal: {label: {show: true,},areaColor: "#05063C",borderWidth: 3, //设置外层边框borderColor: "#0F92CA",shadowColor: "#080A43",shadowBlur: 0,},},// 高亮状态emphasis: {focus: "self",itemStyle: {areaColor: "#05063C",borderWidth: 6, //设置外层边框borderColor: "#0F92CA",shadowColor: "#080A43",shadowBlur: 0,},label: {show: true,textStyle: {color: "#fff",fontSize: 18,},},},// 文字样式label: {normal: {show: true,textStyle: {color: "#0F92CA",fontSize: 18,},},},},series: [{type: "custom",coordinateSystem: "geo",renderItem: function (params, api) {// console.log(params, api, '油烟')//具体实现自定义油烟图标的方法if (that.mapData[params.dataIndex].connectStatus === 1 &&that.mapData[params.dataIndex].dataStatus === 1) {return that.addImage(one_alarm,params,api,that.mapData);} else if (that.mapData[params.dataIndex].connectStatus === 1 &&that.mapData[params.dataIndex].dataStatus === 0) {return that.addImage(one_off,params,api,that.mapData);} else {return that.addImage(one_on,params,api,that.mapData);}},zlevel: 1,data: that.mapData,},],};option && myChart.setOption(option);//此处写点击事件内容myChart.on('click', function(params){// console.log(params, '图标点击');if(params.data) {// 图标panyShow = true} else {// 地图that.areaShow = !that.areaShow});});},

每天进步一点点，加油ヾ(◍°∇°◍)ﾉﾞ