var shanxi = "/siteassets/chart/echarts/options/945f3f5f-d61d-4711-9e0a-332cf08f9aa9.json"; var changzhi = "/siteassets/chart/echarts/options/35234c95-4995-4332-be39-edaaf31415a9.json"; var yuncheng = "/siteassets/chart/echarts/options/6516544d-fe26-4079-9c3b-21ad57d01747.json"; var yangquan = "/siteassets/chart/echarts/options/bb1457d1-b8cf-4bbd-bce9-cb35ff04f144.json"; var xinzhou = "/siteassets/chart/echarts/options/6ea1f6d9-9d13-489f-bb32-6b2f261b8f5c.json"; var taiyuan = "/siteassets/chart/echarts/options/39999da4-428f-43f2-bcba-99e1023b478e.json"; var shuozhou = "/siteassets/chart/echarts/options/67541516-6a9e-49cc-bbb0-46478bac90ac.json"; var luliang = "/siteassets/chart/echarts/options/f5afa4f0-c744-40d2-ba81-1d563e3e93aa.json"; var linfen = "/siteassets/chart/echarts/options/565b9159-3732-4006-93ac-416b3625b8cb.json"; var jinzhong = "/siteassets/chart/echarts/options/aafd144e-6049-4d66-9d33-66fce899bb76.json"; var jincheng = "/siteassets/chart/echarts/options/bcfaf8ae-4a4d-4581-916d-c9525714ba62.json"; var datong = "/siteassets/chart/echarts/options/c7099d1a-5714-4f16-aeef-a98f10c011ca.json"; echarts.extendsMap = function(id, opt) { // 实例 var chart = this.init(document.getElementById(id)); var curGeoJson = {}; var cityMap = { "晋城市": jincheng, "长治市": changzhi, "运城市": yuncheng, "阳泉市": yangquan, "忻州市": xinzhou, "太原市": taiyuan, "朔州市": shuozhou, "吕梁市": luliang, "临汾市": linfen, "晋中市": jinzhong, "大同市": datong }; var geoCoordMap = { '忻州': [112.4561, 38.8971], '吕梁': [111.3574, 37.7325], '临汾': [111.4783, 36.1615], '晋中': [112.7747, 37.37], '运城': [111.1487, 35.2002], '大同': [113.7854, 39.8035], '长治': [112.8625, 36.4746], '朔州': [113.0713, 39.6991], '晋城': [112.7856, 35.6342], '屯兰': [112.1231, 37.8997], '阳泉': [113.4778, 38.0951] }; var levelColorMap = { '1': 'rgba(241, 109, 115, .8)', '2': 'rgba(255, 235, 59, .7)', '3': 'rgba(147, 235, 248, 1)' }; var defaultOpt = { mapName: 'china', // 地图展示 goDown: false, // 是否下钻 bgColor: '#404a59', // 画布背景色 activeArea: [], // 区域高亮,同echarts配置项 data: [], // 下钻回调(点击的地图名、实例对象option、实例对象) callback: function(name, option, instance) {} }; if (opt) opt = this.util.extend(defaultOpt, opt); // 层级索引 var name = [opt.mapName]; var idx = 0; var pos = { leftPlus: 115, leftCur: 150, left: 198, top: 50 }; var line = [ [0, 0], [8, 11], [0, 22] ]; // style var style = { font: '18px "Microsoft YaHei", sans-serif', textColor: '#eee', lineColor: 'rgba(147, 235, 248, .8)' }; var handleEvents = { /** * i 实例对象 * o option * n 地图名 **/ resetOption: function(i, o, n) { var breadcrumb = this.createBreadcrumb(n); var j = name.indexOf(n); var l = o.graphic.length; if (j < 0) { o.graphic.push(breadcrumb); o.graphic[0].children[0].shape.x2 = 145; o.graphic[0].children[1].shape.x2 = 145; if (o.graphic.length > 2) { for (var x = 0; x < opt.data.length; x++) { if (n === opt.data[x].name + '市') { o.series[0].data = handleEvents.initSeriesData([opt.data[x]]); break; } else o.series[0].data = []; } } name.push(n); idx++; } else { o.graphic.splice(j + 2, l); if (o.graphic.length <= 2) { o.graphic[0].children[0].shape.x2 = 60; o.graphic[0].children[1].shape.x2 = 60; o.series[0].data = handleEvents.initSeriesData(opt.data); } name.splice(j + 1, l); idx = j; pos.leftCur -= pos.leftPlus * (l - j - 1); } o.geo.map = n; o.geo.zoom = 0.4; i.clear(); i.setOption(o); this.zoomAnimation(); opt.callback(n, o, i); }, /** * name 地图名 **/ createBreadcrumb: function(name) { var cityToPinyin = { "晋城市": "jincheng", "长治市": "changzhi", "大同市": "datong", "朔州市": "shuozhou", "太原市": "taiyuan", "忻州市": "xinzhou", "临汾市": "linfen", "晋中市": "jinzhong", "吕梁市": "luliang", "阳泉市": "yangquan", "运城市": "yuncheng" }; var breadcrumb = { type: 'group', id: name, left: pos.leftCur + pos.leftPlus, top: pos.top + 3, children: [{ type: 'polyline', left: -90, top: -5, shape: { points: line }, style: { stroke: '#fff', key: name // lineWidth: 2, }, onclick: function() { var name = this.style.key; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: -68, top: 'middle', style: { text: name, textAlign: 'center', fill: style.textColor, font: style.font }, onclick: function() { var name = this.style.text; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: -68, top: 10, style: { name: name, text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '', textAlign: 'center', fill: style.textColor, font: '12px "Microsoft YaHei", sans-serif', }, onclick: function() { // console.log(this.style); var name = this.style.name; handleEvents.resetOption(chart, option, name); } }] } pos.leftCur += pos.leftPlus; return breadcrumb; }, // 设置effectscatter initSeriesData: function(data) { var temp = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { temp.push({ name: data[i].name, value: geoCoord.concat(data[i].value), crew: data[i].crew, company: data[i].company, position: data[i].position, region: data[i].region, value: geoCoord.concat(data[i].value, data[i].level) }); } } return temp; }, zoomAnimation: function() { var count = null; var zoom = function(per) { if (!count) count = per; count = count + per; // console.log(per,count); chart.setOption({ geo: { zoom: count } }); if (count < 1) window.requestAnimationFrame(function() { zoom(0.2); }); }; window.requestAnimationFrame(function() { zoom(0.2); }); } }; var option = { backgroundColor: opt.bgColor, tooltip: { show: true, trigger: 'item', alwaysShowContent: false, backgroundColor: 'rgba(50,50,50,0.7)', hideDelay: 100, triggerOn: 'mousemove', enterable: true, position: ['60%', '70%'], formatter: function(params, ticket, callback) { return '简称：' + params.data.name + '
' + '机组：' + params.data.crew + '万千瓦' + '
' + '公司名称：' + params.data.company + '
' + '所属大区：' + params.data.region + '
' + '所在位置：' + params.data.position } }, graphic: [{ type: 'group', left: pos.left, top: pos.top - 4, children: [{ type: 'line', left: 0, top: -20, shape: { x1: 0, y1: 0, x2: 60, y2: 0 }, style: { stroke: style.lineColor, } }, { type: 'line', left: 0, top: 20, shape: { x1: 0, y1: 0, x2: 60, y2: 0 }, style: { stroke: style.lineColor, } }] }, { id: name[idx], type: 'group', left: pos.left + 2, top: pos.top, children: [{ type: 'polyline', left: 90, top: -12, shape: { points: line }, style: { stroke: 'transparent', key: name[0] }, onclick: function() { var name = this.style.key; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: 0, top: 'middle', style: { text: name[0] === '山西' ? '山西省' : name[0], textAlign: 'center', fill: style.textColor, font: style.font }, onclick: function() { handleEvents.resetOption(chart, option, '山西'); } }, { type: 'text', left: 0, top: 10, style: { text: 'SHANGXI', textAlign: 'center', fill: style.textColor, font: '12px "Microsoft YaHei", sans-serif', }, onclick: function() { handleEvents.resetOption(chart, option, '山西'); } }] }], geo: { map: opt.mapName, // roam: true, zoom: 1, label: { normal: { show: true, textStyle: { color: '#fff' } }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, regions: opt.activeArea.map(function(item) { if (typeof item !== 'string') { return { name: item.name, itemStyle: { normal: { areaColor: item.areaColor || '#389BB7' } }, label: { normal: { show: item.showLabel, textStyle: { color: '#fff' } } } } } else { return { name: item, itemStyle: { normal: { borderColor: '#91e6ff', areaColor: '#389BB7' } } } } }) }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', // symbol: 'diamond', showEffectOn: 'render', rippleEffect: { period: 15, scale: 6, brushType: 'fill' }, hoverAnimation: true, itemStyle: { normal: { color: function(params) { return levelColorMap[params.value[3]]; }, shadowBlur: 10, shadowColor: '#333' } }, data: handleEvents.initSeriesData(opt.data) }] }; chart.setOption(option); // 添加事件 chart.on('click', function(params) { var _self = this; if (opt.goDown && params.name !== name[idx]) { if (cityMap[params.name]) { var url = cityMap[params.name]; $.get(url, function(response) { // console.log(response); curGeoJson = response; echarts.registerMap(params.name, response); handleEvents.resetOption(_self, option, params.name); }); } } }); chart.setMap = function(mapName) { var _self = this; if (mapName.indexOf('市') < 0) mapName = mapName + '市'; var citySource = cityMap[mapName]; if (citySource) { var url = './map/' + citySource + '.json'; $.get(url, function(response) { // console.log(response); curGeoJson = response; echarts.registerMap(mapName, response); handleEvents.resetOption(_self, option, mapName); }); } // handleEvents.resetOption(this, option, mapName); }; return chart; }; $.getJSON(shanxi, function(geoJson) { echarts.registerMap('山西', geoJson); var myChart = echarts.extendsMap('chart-panel', { bgColor: '#154e90', // 画布背景色 mapName: '山西', // 地图名 goDown: true, // 是否下钻 // 下钻回调 callback: function(name, option, instance) { console.log(name, option, instance); }, // 数据展示 data: [{ city: '太原', name: '屯兰', value: 30, crew: '2*30', company: "华润电力湖北有限公司", position: '湖北省赤壁市陆水大道99号', region: '华中大区', level:1 }, { name: '晋城', value: 12, level: 2 }, { name: '阳泉', value: 11, level: 3 }, { name: '吕梁', value: 16, level: 2 }, { name: '临汾', value: 12, level: 1 }] }); })

仿【地图下钻+地图数据展示】