[GitHub] IdenPin opened a new issue #8266: echarts3.8.5 + vue 2.0 实现Map地图下钻，市级click时间偶尔拿不到json里面的name

[GitBox <gi...@apache.org>]

IdenPin opened a new issue #8266: echarts3.8.5 + vue 2.0 实现Map地图下钻，市级click时间偶尔拿不到json里面的name
URL: https://github.com/apache/incubator-echarts/issues/8266
 
 
   ### 省市区三级地图下钻，click事件市级别偶尔无法获取name属性
   
   ### ECharts option [ECharts配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   mounted() {
         this.chinaMap = this.$echarts.init(this.$refs['china-map']);
         this.provinceMap = this.$echarts.init(this.$refs['province-map']);
         this.cityMap = this.$echarts.init(this.$refs['city-map']);
         this.loadMap("china", "china", this.chinaMap);
         this.addEvent();
       },
       methods: {
         addEvent() {
           var that = this;
           that.chinaMap.on("click", function(data) {
             console.log('一级点击echart返回Data:',data)
             if (!data.data) {
               return false;
             }
             that.selectProinveName = data.name;
             that.loadMap(data.name + "/" + data.name, data.name, that.provinceMap);
           });
           that.provinceMap.on("click", function(data) {
             console.log('二级点击echart返回Data:',data)
             if (data.name) {
               that.loadMap(
                 that.selectProinveName + "/" + data.name,
                 data.name,
                 that.cityMap
               );
             }
           });
         },
         loadMap(url, mapName, chartDom) {
           $.getJSON("../../../../static/map-data/" + url + ".json", data => {
             if (data) {
               var option = {
                 tooltip: {
                   trigger: "item",
                   formatter: "{b}",
                   position: [10, 10],
                   borderColor: "#000",
                   borderWidth: 1,
                   backgroundColor: "rgba(0,0,0,0.7)",
                   borderRadius: 0,
                   padding: [3, 10, 3, 10],
                   textStyle: {
                     color: "#fff",
                     fontSize: 12
                   },
                   extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)"
                 },
                 series: [{
                   name: "",
                   type: "map",
                   map: mapName,
                   roam: true,
                   zoom:1.5,
                   
                   // selectedMode : 'multiple',
                   label: {
                     normal: {
                       show: true, //显示省份标签
                       textStyle: {
                         color: "#111"
                       } //省份标签字体颜色
                     },
                     emphasis: {
                       //对应的鼠标悬浮效果
                       show: true,
                       textStyle: {
                         color: "#fff"
                       }
                     }
                   },
                   itemStyle: {
                     normal: {
                       borderWidth: 0.5, //区域边框宽度
                       borderColor: "#f1f1f1", //区域边框颜色
                       areaColor: "#6491e8" //区域颜色
                     },
                     emphasis: {
                       borderWidth: 0.5,
                       borderColor: "#c86a79",
                       areaColor: "#2f67dd"
                     }
                   },
                   data: []
                 }]
               };
                //向echarts插件注册地图
               setTimeout(() => {
                 this.$echarts.registerMap(mapName, data);
                 chartDom.setOption(option);
               },500)
             } else {
               alert("无法加载该地图");
             }
           });
         }
       }
   
   ```
   
   
   
   
   ### Other comments [其他信息]
   正确情况应该返回name属性：
   ![image](https://user-images.githubusercontent.com/8908021/39529094-725d3600-4e58-11e8-81c2-ac0b8aa382ba.png)
   
   
   下面是错误截图：
   ![image](https://user-images.githubusercontent.com/8908021/39529019-3d087be0-4e58-11e8-98e5-418e27902704.png)
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org