echarts3地图点击事件显示为什么有问题

来源：蜘蛛抓取(WebSpider) 时间：2016-11-18 12:25 标签： echarts3实现区县地图
使用ECharts来实现地图下钻功能（某省的市级下钻到县级）-爱编程
使用ECharts来实现地图下钻功能（某省的市级下钻到县级）
这里是一个简单的demo：
var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100"
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
var event = e || window.
curIndx += zrEvent.getDelta(event) & 0 ? (-1) : 1;
if (curIndx & 0) {
curIndx = mapType.length - 1;
var mt = mapType[curIndx % mapType.length];
option.series[0].mapType =
option.title.subtext = mt + ' （滚轮或点击切换）';
myChart.setOption(option, true);
zrEvent.stop(event);
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var mt = param.
var len = mapType.
for(var i=0;i&i++){
if(mt == mapType[i]){
mt=mapType[i];
mt='湖南';
option.series[0].mapType =
option.title.subtext = mt + ' （滚轮或点击切换）';
myChart.setOption(option, true);
option = {
text : '全国344个主要城市（县）地图 by Pactera 陈然',
link : '/',
subtext : '长沙市 （滚轮或点击切换）'
tooltip : {
trigger: 'item',
formatter: '滚轮或点击切换&br/&{b}'
series : [
name: '全国344个主要城市（县）地图',
type: 'map',
mapType: '湖南',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
将上面部分代码复制，然后粘贴覆盖到左侧的黑色区域中，然后点击刷新，即可看到效果。
其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件，然后执行循环将city对应的县级数据加载到param.js文件中&/span&
在我自己的项目中是这样的写的：
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {//city
getGeoJson: (function (c) {//city对应的县级数据
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
&script type="text/javascript"&
/* 加载县级数据 */
var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100"
var mapType = [];
var base = '&%=request.getContextPath()%&';
var mapGeoData = require('/szft/js/echarts/src/util/mapData/params');
//这是需要扩展的文件(将县级数据存档 )
//（这个路径要写对，否则报js错误：...is not exist
for (var city in cityMap) {//加载14市的县级地图数据 mapType.push(city);
//将14个市加入到params.js文件中 // 自定义扩展图表类型
mapGeoData.params[city] = {
//回调，加载14个市对应的县级数据
echarts: util.mapData.params.params[city] = {
//回调，加载14个市对应的县级数据 （这个路径要写对，否则报js错误：...is not exist）
getGeoJson: (function (c) { var geoJsonName = cityMap[c]; return function (callback) { $.getJSON(base + '/js/echarts/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback); } })(city)
/** * 选中地图 */function selectedMap() {
myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param) {
//市级的点击事件
var selectedCity = param.
//点击获取对应的市的名称
var flag = var selected = param. for (var p in selected) {
getVodList(mapUtil.findFbdm(selectedCity), selectedCity);
//加载右侧的列表
if (p == selectedCity) {
//所选的是14个市之一
selectedCity =
} if (flag) {
//所选的市是14个市之一 ，就重新画地图进入到该市的县级地图 (下钻到县级 )
var map = new Map(); map = getMap(selectedCity, 3); initMap(map, selectedCity, 'xj'); $('#Header').css('display', '');
//显示隐藏的返回按钮
myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param) {
//下级县的点击事件
var selectedTown = param.
//点击获取对应的县的名称
getVodList(mapUtil.findFbdm(selectedTown), selectedTown);
//加载右侧的列表
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （百度） · （百度）
by 于博（新华社） · 吴楚茵（南方都市报） · （百度）
by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · （百度）
by （北京理工大学软件学院）
by （CSDN开源夏令营）

我要回帖

更多关于 echarts3实现区县地图 的文章

 

随机推荐