2277人阅读
菜鸟每天进步一点点（35）
这里是一个简单的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}}
将上面部分代码复制，然后粘贴覆盖到/doc/example/mix5.html左侧的黑色区域中，然后点击刷新，即可看到效果。其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件，然后执行循环将city对应的县级数据加载到param.js文件中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);
在我自己的项目中是这样的写的：
function initDownData(){
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');//这是需要扩展的文件(将县级数据存档 )
for (var city in cityMap) { //加载14市的县级地图数据
mapType.push(city);//将14个市加入到params.js文件中
// 自定义扩展图表类型
mapGeoData.params[city] = { //回调，加载14个市对应的县级数据
echarts.util.mapData.params.params[city] = { //回调，加载14个市对应的县级数据
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON(base+'/js/echarts/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback);
* 选中地图
function selectedMap(){
myChart.on(echarts.config.EVENT.MAP_SELECTED, function(param){//市级的点击事件
var selectedCity = param.//点击获取对应的市的名称
getLiveajList(mapUtil.findFbdm(selectedCity),selectedCity);//加载点击市 右侧的列表
var flag =
initDownData();//初始化县级数据
var selected = param.
for (var p in selected) {
if (selected[p]) {
if($(&.a_btn_pre&).hasClass(&a_btn_pre_gray&)){
$(&.a_btn_pre&).trigger(&click&);
getSubCorpLiveAjInfo(p,3);
//调用另外一个iframe的某个方法
$(&#iframe1&,parent.document)[0].contentWindow.getSubCorpLiveAjInfo(p,3);
if(p == selectedCity){
flag =//所选的是14个市之一
selectedCity =
$('#fbdm').val(selectedCity);
var map = new Map();
map = getMap(selectedCity,3,'xj');
initMap(map,selectedCity,'xj');//初始化县级地图及数据
$('#headerReturn').css('display','');//显示隐藏的返回按钮
$('#headerReturn1').css('display','');//显示隐藏的返回按钮
$('#em').html(mapUtil.findJc(mapUtil.findFbdm(selectedCity)));
myChart.on(echarts.config.EVENT.MAP_SELECTED, function(param){//下级县的点击事件
var selectedTown = param.//点击获取对应的县的名称
getLiveajList(mapUtil.findFbdm(selectedTown),selectedTown);//加载右侧的列表
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：11330次
排名：千里之外
原创：28篇
(2)(1)(1)(1)(2)(1)(4)(3)(4)(2)(1)(5)(10)}