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

最近项目实现可视化，首先加载中国或者某个省，或者某个市的地图，单击其中选中的地图，其他图表数据会重新请求并变化；双击选中的地图，当前echart地图会变成选中的地图（上面描述口水话，一句简单概括，双击实现echart地图穿透下一级）；

echart单击事件和双击事件处理情况不一样，不处理单双击事件之间的矛盾就会产生问题。echart双击会触发单击。下面就是解决该问题:

var myChartMap = echarts.init(this.$refs.echart_map);
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;
    },