解决echart单击事件、双击事件矛盾，echart双击事件会触发单击事件的问题。echart单击或者双击实现地图穿透，展示选中地图

最近项目实现可视化，首先加载中国或者某个省，或者某个市的地图，单击其中选中的地图，其他图表数据会重新请求并变化；双击选中的地图，当前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  里面配置地图名字， 地图名字设为动态变量；
我使用的地图数据下载地址为阿里云大数据可视化地图数据
http://datav.aliyun.com/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单击或者双击实现地图穿透，展示选中地图相关推荐

解决上传文件或图片时选择相同文件无法触发change事件的问题
昨天在做一个上传文件的模块时遇到了这样的问题:打开文件一上传,上传成功后再次点击文件一,change事件无反应 <input type="file" name="f ...
动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
Qt键盘事件（二）——长按按键反复触发event事件问题解决
1.问题描述在Jungle的上一篇文章中(Qt键盘事件(一)--检测按键输入及解决无法响应方向键问题),Jungle简单实现了利用qt检测用户按键操作并将键按下\释放操作打印在Qt界面上的一个小程序 ...
html打开时按钮自动触发事件,html在用户按下按键时触发的事件属性onkeydown
实例当用户按键时执行一段 JavaScript: 浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器都支持 onkeydown 属性. 定义和用法 onkeyd ...
android input 点击事件失效,在textinputedittext android上不会触发onclick事件
我有以下文本输入文本 android:focusableInTouchMode="true" android:id="@+id/from_textinput" ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
事件触发过程(事件流)
事件触发过程(事件流) 首先一个点击事件,事件会## 标题从最外层开始发生,到目标源,这个过程叫做事件捕获,事件再会从目标源最深的节点开始发生,一直向上传播,直到document对象,这个过程叫做事件 ...
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...

解决echart单击事件、双击事件矛盾，echart双击事件会触发单击事件的问题。echart单击或者双击实现地图穿透，展示选中地图

解决echart单击事件、双击事件矛盾，echart双击事件会触发单击事件的问题。echart单击或者双击实现地图穿透，展示选中地图相关推荐

最新文章

热门文章