echarts地图下钻到区县时点击区县地图不返回上一级地图

我是个渣 发布于 2016/08/31 19:35
阅读 942
收藏 0

@Kener-林峰  你好,想跟你请教个问题:

我想市级地图下钻到区县级然后点击区县级他不返回市级地图,如何添加事件呢?

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <link href="css/index.css">  <script src="js/jquery-1.11.1.js"></script>  <script src="js/echarts-all.js"></script>  <script src="js/echarts.js"></script>  <title>MAP</title> <style>  #main{ width: 98%;  height: 600px;  } </style> </head> <body> <div id="main"></div> </body>  <script type="text/javascript">  var myChart = echarts.init(document.getElementById('main'));  var option={};  var mapath={ "河南":"河南",  "平顶山市":"平顶山市",  "驻马店市":"驻马店市",  '郑州市':"郑州市",  '开封市':"开封市",  '安阳市':"安阳市",  "洛阳市": "洛阳市",  "焦作市": "焦作市",  "鹤壁市": "鹤壁市",  "三门峡市": "三门峡市",  "南阳市": "南阳市",  "周口市": "周口市",  "商丘市": "商丘市",  "新乡市": "新乡市",  "濮阳市": "濮阳市",  "漯河市":"漯河市",  "许昌市": "许昌市",  "信阳市": "信阳市"  };  function updataMap(name) { var mapJson= mapath[name]||"河南省";  $.get("data/"+mapJson+'.json').done(function (dataMap) { echarts.registerMap('mapJson',dataMap);  myChart.setOption(option);  });  } $.get("data/河南省.json").done(function (dataMap) { echarts.registerMap('mapJson',dataMap);  var data = [
            {name: '郑州', value: 113}

        ];  var geoCoordMap = { '开封':[114.35,34.79],  '平顶山':[113.29,33.75],  "郑州":[113.65,34.76]
        };  var convertData = function (data) { var res = [];  for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name];  if (geoCoord) {
                    res.push({ name: data[i].name,  value: geoCoord.concat(data[i].value)
                    });  }
            } return res;  };  function randomData() { return Math.round(Math.random()*1000);  }
        option ={ title:{},  tooltip:{ trigger:'item'  },  legend:{ data:['省计量中心'],  bottom:50,  left:100,  itemWidth:14,  textStyle:{ color:'#000'  }
            },  geo: { map: 'mapJson',  roam:"scale",  layoutCenter: ["50%", "50%"],  layoutSize: 500,  zoom:1,  scaleLimit:{ min:1,  max:2  },  label: { emphasis: { show: false  }
                },   itemStyle: { normal: { areaColor: '#323c48',  borderColor: '#111'  },  emphasis: { areaColor: '#2a333d'  }
                }
            },  series: [
                { name: '供电所',  type: 'map',  roam:"scale",  zoom:1, //                        roam: true,  mapType: 'mapJson',  scaleLimit:{ min:1,  max:2  },   layoutCenter: ["50%", "50%"],  layoutSize: 500,   label: { normal: { show: true  },  emphasis: { show: true  }
                    },    itemStyle:{ normal:{ areaColor:'#429bb3',  borderColor:'#b6d5df',  borderWidth:'1',  shadowColor: 'rgba(131, 150, 175, 5)',  shadowBlur: 10,  shadowOffsetY:5,  opacity:1    },  emphasis: { areaColor: '#96e3d1',  borderWidth: 1  }
                    },  data:[
                        { name: '郑州市', itemStyle: { normal: { shadowColor: 'rgba(255, 255, 0, 0)'    }
                        }
                        }
                    ]
                },  { name: '省计量中心',  type: 'scatter',  coordinateSystem: 'geo',  data: convertData(data),  symbol:'image://images/icon.png',  symbolSize: function (val) { return val[2] / 10;  },  label: { normal: { formatter: '{b}',  position: 'right',  show: false  },  emphasis: { show: true  }
                    },  itemStyle: { normal: { color: '#0f0'  }
                    }
                }

            ]
        }
        myChart.setOption(option); //       myChart.hover();  myChart.on('click',function(param){ if(param.componentSubType=="map"){ updataMap(param.name);  }else if(param.componentSubType=="scatter"){ alert(2);  }else if(param.seriesType=="scatter"){ alert(2);  } window.parent.getData(param.name,window.parent.tables,window.parent.source);  window.parent.area = param.name;  });  }); </script> </html>

 

加载中
返回顶部
顶部