最近项目实现可视化，首先加载中国或者某个省，或者某个市的地图，单击其中选中的地图，其他图表数据会重新请求并变化；双击选中的地图，当前echart地图会变成选中的地图（上面描述口水话，一句简单概括，双击实现echart地图穿透下一级）；
echart单击事件和双击事件处理情况不一样，不处理单双击事件之间的矛盾就会产生问题。echart双击会触发单击。下面就是解决该问题:
var myChartMap = echarts.init(this.$refs.echart_map);let click_type;myChartMap.on("click", function (params) {click_type = false;setTimeout(check, 500);function check() {if (click_type != false) return;该地方写你单击的处理逻辑事件}});//点击事件myChartMap.on("dblclick", function (param) {click_type = true;该地方写你双击的处理逻辑事件}
单击或者双击实现 echart地图的穿透；即，单击或者双击某个省、市、县的地图，展示当前点击的地图；
单双击矛盾处理上面已说，下面处理穿透
在 地图配置中， option.series 里面配置地图名字， 地图名字设为动态变量；我使用的地图数据下载地址为阿里云大数据可视化地图数据/portal/school/atlas/area_selector该页面上，选择下载其他类型 大概长这样的{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":110000,"name":"北京市","center":[116.405285,39.904989],"centroid":[116.41995,40.18994],...},...}
initMap(city) {var geoJson = require("../json/" + city + ".json");this.loadCharts(city, geoJson, false, "");},loadCharts(city, geoJson, silent, selectName) {let that = this;if (geoJson) {echarts.registerMap(name, geoJson);}var option = this.setOption(city, silent, selectName);var myChartMap = echarts.init(this.$refs.echart_map);myChartMap.setOption(option, true);//这里单双击实现地图穿透myChartMap.on("dblclick 或者click", function (param) {//这个是你当前点击地图，获取单位（省、市、县区）名字this.city = param.name initMap(param.name); //或者 initMap(this.city);}}//我是单独把 option 提成了一个函数，setOption(city, silent, selectName) {var option = {title: {text: city,show: false,left: "center",},tooltip: {trigger: "axis",formatter: function (e) {},triggerOn: "click",},legend: {},visualMap: {type: "piecewise",calculable: true,pieces: [ //图标小组件显示对应范围，及颜色{gte: 15000, color: "#0b949a", label: "≥15000" },{gt: 10000, lt: 15000, color: "#12b4bf", label: "10000-15000" },{lte: 10000, color: "#31d6da", label: "0-10000" },],minOpen: true,maxOpen: true,precision: 2,hoverLink: true,left: "right",bottom: "20",},series: [{left: "20%",top: "10%",zoom: 1.2,type: "map", map: city,//这个表示展示哪个城市， 就是这个决定我们单击或者双击后地图穿透roam: false, //鼠标平移或者缩放silent: silent,itemStyle: {normal: {borderWidth: 2, //边框大小borderColor: "#ffffff",// shadowColor: 'rgba(0, 0, 0, 0.5)',// shadowBlur: 10,areaColor: "#31d6da", //背景颜色label: {show: true,// formatter: '{c}\n{b}'formatter: function (params) {return `{pic|${params.value.toString() == "NaN" ? 0 : params.value}}\n{fline|${params.name}}`;},position: "top",rich: {pic: {backgroundColor: "rgba(25, 31, 37, 0.34)",padding: [2, 5],width: "auto",height: 15,align: "center",color: "#FFFFFF",fontSize: "10px",borderRadius: 5,},fline: {color: "#FFFFFF",align: "center",fontSize: "12px",},},//显示名称// color: "green",// fontSize: 12},},},data: this.mapData,},],};return option;},
解决echart单击事件 双击事件矛盾 echart双击事件会触发单击事件的问题。echart单击或者双击实现地图穿透 展示选中地图
如果觉得《解决echart单击事件 双击事件矛盾 echart双击事件会触发单击事件的问题。echart单击》对你有帮助，请点赞、收藏，并留下你的观点哦！
