各位大神求助,可以显示省地图,但是无法显示市一级的地图。
配置项如下
< !DOCTYPE html >
<
html >
<
head >
<
meta charset = "utf-8" >
<
title > ECharts < /title> <
/head>
<
body >
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<
div id = "main"
style = "height:600px" > < /div>
<!-- ECharts单文件引入 -->
<
script type = "text/javascript"
src = "js/jquery.min.js" > < /script>
<!-- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> -->
<
script src = "http://echarts.baidu.com/build/dist/echarts.js" > < /script> <
script type = "text/javascript" >
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
],
function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var curIndx = 0;
/*
var mapType = [
'china',
// 23个省
'广东', '青海', '四川', '海南', '陕西',
'甘肃', '云南', '湖南', '湖北', '黑龙江',
'贵州', '山东', '江西', '河南', '河北',
'山西', '安徽', '福建', '浙江', '江苏',
'吉林', '辽宁', '台湾',
// 5个自治区
'新疆', '广西', '宁夏', '内蒙古', '西藏',
// 4个直辖市
'北京', '天津', '上海', '重庆',
// 2个特别行政区
'香港', '澳门',
];
*/
var mapType = [];
var cityMap = {
"长沙市": "430100",
"株洲市": "430200",
"湘潭市": "430300",
"衡阳市": "430400",
"邵阳市": "430500",
"岳阳市": "430600",
"常德市": "430700",
"张家界市": "430800",
"益阳市": "430900",
"郴州市": "431000",
"永州市": "431100",
"怀化市": "431200",
"娄底市": "431300",
"湘西土家族苗族自治州": "433100"
};
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);
}
})(city)
}
}
/*
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
var len = mapType.length;
var mt = param.target;
var f = false;
for(var i = 0; i < len; i++) {
if(mt == mapType[i]) {
f = true;
mt = mapType[i];
}
}
if(!f) {
mt = 'china';
option.title.text = "全国地图";
}else{
option.title.text = mt+"地图";
}
option.tooltip.trigger = 'item';
option.series[0].mapType = mt;
myChart.setOption(option, true);
}); */
document.getElementById('main').onmousewheel = function(e) {
var event = e || window.event;
curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
if (curIndx < 0) {
curIndx = mapType.length - 1;
}
var mt = mapType[curIndx % mapType.length];
option.series[0].mapType = mt;
option.title.subtext = mt + ' (滚轮或点击切换)';
myChart.setOption(option, true);
zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
var mt = param.target;
var len = mapType.length;
var f = false;
for (var i = 0; i < len; i++) {
if (mt == mapType[i]) {
f = true;
mt = mapType[i];
}
}
if (!f) {
mt = '湖南';
}
option.series[0].mapType = mt;
option.title.subtext = mt + ' (滚轮或点击切换)';
myChart.setOption(option, true);
});
var option = {
title: {
text: '全国344个主要城市(县)地图',
// x: 'right'
link: 'http://www.pactera.com/',
subtext: '长沙市 (滚轮或点击切换)'
},
tooltip: {
trigger: 'item',
formatter: '滚轮或点击切换<br/>{b}'
},
legend: {
orient: 'vertical',
x: 'left',
data: ['规划区'],
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
},
series: [{
name: '规划区',
type: 'map',
mapType: '湖南',
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "rgb(249, 249, 249)"
}
},
},
emphasis: {
label: {
show: true
}
},
},
data: []
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
); <
/script> <
/body> <
/html>