< !DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > ECharts < /title> < /head> < body > < div id = "main" style = "height:600px" > < /div> < script type = "text/javascript" src = "js/jquery.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: '滚轮或点击切换
{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>

无法显示市级地图