echarts实现山东地图可放大缩小可下钻 |
您所在的位置：网站首页 › 显示山东省地图的app › echarts实现山东地图可放大缩小可下钻 |
echarts实现山东地图可放大缩小可下钻
|
最近遇到一个新需求，要求展示山东省的地图，并且点击可进入地级市地图。这可是难倒了我，我尝试着用不同的方法，高德地图、百度地图等，发现都有一定的缺陷，最终决定使用echarts实现，下面就来跟大家分享一下我的心路历程。 先来看一下效果： 5.js代码 //导入地图 import shandong from "../../../../../assets/get/shandongData.json"; ...... async getLeftBar() { let nc = document.getElementById("barChart"); var myChart = this.echarts.init(nc); this.echarts.registerMap("山东", shandong); var cityMap = { 济南市: jinan, 青岛市: qingdao, 烟台市: yantai, 潍坊市: weifang, 菏泽市: heze, 日照市: rizhao, 威海市: weihai, 枣庄市: zaozhuang, 临沂市: linyi, 滨州市: bingzhou, 东营市: dongying, 淄博市: zibo, 泰安市: taian, 聊城市: liaocheng, 济宁市: jining, 德州市: dezhou, }; var sdGeoCoordMap = { 济南市: [117.000923, 36.675807], 青岛市: [120.355173, 36.082982], 烟台市: [121.391382, 37.539297], 潍坊市: [119.107078, 36.70925], 菏泽市: [115.469381, 35.246531], 日照市: [119.461208, 35.428588], 威海市: [122.116394, 37.509691], 枣庄市: [117.557964, 34.856424], 临沂市: [118.326443, 35.065282], 滨州市: [118.016974, 37.383542], 东营市: [118.66471, 37.434564], 淄博市: [118.047648, 36.814939], 泰安市: [117.129063, 36.194968], 聊城市: [115.980367, 36.456013], 济宁市: [116.587245, 35.415393], 德州市: [116.307428, 37.453968], }; var sdDatas = [ { name1: "济南市", name: "济南市供电局", value: [117.050923, 36.678807, 0.5], }, { name1: "济南市", name: "济南市供电局23", value: [117.053923, 36.638807, 3.5], }, { name1: "济南市", name: "济南市随便吧", value: [117.653923, 37.038807, 11], }, { name1: "青岛市", name: "青岛市供电局", value: [120.385173, 36.042982, 7.5], }, ]; var jinandata = [ { name: "东莞市供电局", value: [117.000623, 36.672807, 0.5], }, { name: "东莞东城供电分局", value: [117.001923, 36.685807, 1], }, { name: "广东电网东莞南城供电局", value: [117.002923, 36.675207, 1], }, { name: "沙田供电分局", value: [117.007923, 36.675107, 0.1], }, { name: "广东电网(松山湖)", value: [117.040923, 36.625807, 0.4], }, { name: "东莞供电局万江供电局", value: [117.100923, 36.695807, 1], }, { name: "广东电网公司石龙供电分局", value: [117.003923, 36.673807, 1.4], }, { name: "广东电网东莞虎门供电局", value: [117.002913, 36.676607, 0.7], }, { name: "广东电网公司中堂供电公司", value: [117.01123, 36.633807, 0.1], }, { name: "望牛墩供电公司", value: [117.000333, 36.675557, 0.5], }, { name: "东莞供电局石碣供电局", value: [117.000233, 36.674307, 2], }, { name: "高埗供电分局", value: [117.445923, 36.874507, 0.9], }, { name: "东莞市麻涌供电公司", value: [117.003423, 36.678807, 2], }, { name: "东莞市长安供电公司", value: [117.000444, 36.675444, 2], }, { name: "东莞市道滘供电公司", value: [117.110923, 36.635807, 0.4], }, { name: "东莞市洪梅供电公司", value: [117.0334923, 36.673434, 0.6], }, { name: "东莞市厚街供电公司", value: [117.003423, 36.634807, 2], }, { name: "东莞市寮步供电公司", value: [117.047923, 36.674807, 2], }, { name: "大岭山供电公司", value: [117.046923, 36.635807, 0.1], }, { name: "广东电网大朗供电分公司", value: [117.150923, 36.715807, 0.9], }, { name: "黄江供电分局", value: [117.003453, 36.672307, 0.5], }, { name: "东莞供电局樟木头供电局", value: [117.099923, 36.699807, 2], }, { name: "东莞市清溪供电公司", value: [117.089923, 36.689807, 2], }, { name: "东莞供电局谢岗分局", value: [117.029923, 36.629807, 2], }, { name: "东莞市凤岗镇雁田供电所", value: [117.004443, 36.673337, 0.4], }, { name: "东莞常平供电分局", value: [117.004373, 36.6787857, 0.6], }, { name: "东莞桥头供电分局", value: [117.003413, 36.623407, 2], }, { name: "东莞电网横沥供电分局", value: [117.00032343, 36.6342807, 0.8], }, { name: "广东电网公司东莞东坑供电分局", value: [117.0087653, 36.67467807, 0.2], }, { name: "塘厦供电局", value: [117.045673, 36.6567307, 2], }, { name: "企石供电局", value: [117.003633, 36.6755427, 0.7], }, { name: "石排供电公司", value: [117.0456923, 36.645807, 0.1], }, { name: "茶山供电分局", value: [117.003453, 36.6345807, 0.2], }, ]; var qingdaodata = [ { name: "东莞市供电局", value: [120.345173, 36.0842982, 0.5], }, ]; var yantaidata = [ { name: "东莞市供电局", value: [121.393382, 37.53497, 0.5], }, ]; var weifangdata = [ { name: "东莞市供电局", value: [119.107078, 36.70925, 0.5], }, ]; var hezedata = [ { name: "东莞市供电局", value: [115.489381, 35.286531, 0.5], }, ]; var rizhaodata = [ { name: "东莞市供电局", value: [119.491208, 35.499588, 0.5], }, ]; var weihaidata = [ { name: "东莞市供电局", value: [122.1199394, 37.599691, 0.5], }, ]; var zaozhuangdata = [ { name: "东莞市供电局", value: [117.597964, 34.896424, 0.5], }, ]; var linyidata = [ { name: "东莞市供电局", value: [118.386443, 35.085282, 0.5], }, ]; var bingzhoudata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var dongyingdata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var zibodata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var taiandata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var liaochengdata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var jiningdata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var dezhoudata = [ { name: "东莞市供电局", value: [118.016974, 37.383542, 0.5], }, ]; var that = this; var opt = { bgColor: "#013954", // 画布背景色 mapName: "山东", // 地图名 goDown: true, // 是否下钻 // 下钻回调 callback: async function (name, option, instance) { console.log(name, option, instance); if (name == "山东") { this.ifShow = true; option.series[0].data = converntData(data_tmp); option.series[1].data = data_tmp; myChart.setOption(option, true); setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "济南市") { that.ifShow = false; that.cityName = "济南市"; that.cityCode = "370100"; await that.getLonLat(); that.getSixData(); that.$emit("changeArea", "济南市", "370100"); setTimeout(() => { option.series[0] = { type: "effectScatter", coordinateSystem: "geo", zlevel: 2, rippleEffect: { //涟漪特效 period: 8, //动画时间，值越小速度越快 brushType: "fill", //波纹绘制方式 stroke, fill scale: 0, //波纹圆环最大限制，值越大波纹越大 }, label: { normal: { show: false, position: "right", //显示位置 offset: [5, 0], //偏移设置 formatter: function (params) { //圆环显示文字 return params.data.name; }, fontSize: 19, }, emphasis: { show: true, }, }, itemStyle: { normal: { show: false, color: "#f00", }, }, data: that.dataArr, }; }, 600); option.series[1].data = that.cityFactoryData; option.series[2].data = that.cityFactoryData; console.log("option.series:"); console.log(option.series); myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 600); } else if (name == "青岛市") { that.ifShow = false; that.cityName = "青岛市"; that.cityCode = "370200"; await that.getLonLat(); that.getSixData(); that.$emit("changeArea", "青岛市", "370200"); setTimeout(() => { option.series[0] = { type: "effectScatter", coordinateSystem: "geo", zlevel: 2, rippleEffect: { //涟漪特效 period: 8, //动画时间，值越小速度越快 brushType: "fill", //波纹绘制方式 stroke, fill scale: 0, //波纹圆环最大限制，值越大波纹越大 }, label: { normal: { show: false, position: "right", //显示位置 offset: [5, 0], //偏移设置 formatter: function (params) { //圆环显示文字 return params.data.name; }, fontSize: 19, }, emphasis: { show: true, }, }, itemStyle: { normal: { show: false, color: "#f00", }, }, data: that.dataArr, }; }, 600); option.series[1].data = that.cityFactoryData; option.series[2].data = that.cityFactoryData; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 600); } else if (name == "烟台市") { that.ifShow = false; that.cityName = "烟台市"; that.cityCode = "370600"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "烟台市", "370600"); option.series[0].data = convertData1(yantaidata); option.series[1].data = yantaidata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "潍坊市") { that.ifShow = false; that.cityName = "潍坊市"; that.cityCode = "370700"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "潍坊市", "370700"); option.series[0].data = convertData1(weifangdata); option.series[1].data = weifangdata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "菏泽市") { that.ifShow = false; that.cityName = "菏泽市"; that.cityCode = "371700"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "菏泽市", "371700"); option.series[0].data = convertData1(hezedata); option.series[1].data = hezedata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "日照市") { that.ifShow = false; that.cityName = "日照市"; that.cityCode = "371100"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "日照市", "371100"); option.series[0].data = convertData1(rizhaodata); option.series[1].data = rizhaodata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "威海市") { that.ifShow = false; that.cityName = "威海市"; that.cityCode = "371000"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "威海市", "371000"); option.series[0].data = convertData1(weihaidata); option.series[1].data = weihaidata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "枣庄市") { that.ifShow = false; that.cityName = "枣庄市"; that.cityCode = "370400"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "枣庄市", "370400"); option.series[0].data = convertData1(zaozhuangdata); option.series[1].data = zaozhuangdata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "临沂市") { that.ifShow = false; that.cityName = "临沂市"; that.cityCode = "371300"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "临沂市", "371300"); option.series[0].data = convertData1(linyidata); option.series[1].data = linyidata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "滨州市") { that.ifShow = false; that.cityName = "滨州市"; that.cityCode = "371600"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "滨州市", "371600"); option.series[0].data = convertData1(bingzhoudata); option.series[1].data = bingzhoudata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "东营市") { that.ifShow = false; that.cityName = "东营市"; that.cityCode = "370500"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "东营市", "370500"); option.series[0].data = convertData1(dongyingdata); option.series[1].data = dongyingdata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "淄博市") { that.ifShow = false; that.cityName = "淄博市"; that.cityCode = "370300"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "淄博市", "370300"); option.series[0].data = convertData1(zibodata); option.series[1].data = zibodata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "泰安市") { that.ifShow = false; that.cityName = "泰安市"; that.cityCode = "370900"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "泰安市", "370900"); option.series[0].data = convertData1(taiandata); option.series[1].data = taiandata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "聊城市") { that.ifShow = false; that.cityName = "聊城市"; that.cityCode = "371500"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "聊城市", "371500"); option.series[0].data = convertData1(liaochengdata); option.series[1].data = liaochengdata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "济宁市") { that.ifShow = false; that.cityName = "济宁市"; that.cityCode = "370800"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "济宁市", "370800"); option.series[0].data = convertData1(jiningdata); option.series[1].data = jiningdata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } else if (name == "德州市") { that.ifShow = false; that.cityName = "德州市"; that.cityCode = "371400"; that.getLonLat(); that.getSixData(); that.$emit("changeArea", "德州市", "371400"); option.series[0].data = convertData1(dezhoudata); option.series[1].data = dezhoudata; option.series[2].data = []; myChart.setOption(option, true); // 赋值后初始化 setTimeout(() => { // 定时后启动飞线 myChart.setOption(option, true); }, 500); } }, // 数据展示 data: [], }; var defaultOpt = { mapName: "china", // 地图展示 goDown: true, // 是否下钻 bgColor: "#013954", // 画布背景色 activeArea: [], // 区域高亮,同echarts配置项 data: [], // 下钻回调(点击的地图名、实例对象option、实例对象) callback: function () {}, // callback: function (name, option, instance) {}, }; var opt1 = ""; if (opt) { opt1 = $.extend(defaultOpt, opt); } // 层级索引 var name = [opt1.mapName]; var idx = 0; var pos = { //层级位置 leftPlus: 55, leftCur: 50, left: 10, top: 10, }; 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) { console.log(i); console.log(o); console.log(n); var breadcrumb = this.createBreadcrumb(n); var j = name.indexOf(n); var l = o.graphic.length; if (j for (var x = 0; x o.series[0].data = handleEvents.initSeriesData( opt1.data[x].data ); break; } else o.series[0].data = []; } } name.push(n); idx++; } else { console.log("jinru2", j); o.graphic.splice(j + 2, l); if (o.graphic.length var cityToPinyin = { 济南市: "jinan", 青岛市: "qingdao", 烟台市: "yantai", 潍坊市: "weifang", 菏泽市: "heze", 日照市: "rizhao", 威海市: "weihai", 枣庄市: "zaozhuang", 临沂市: "linyi", 滨州市: "bingzhou", 东营市: "dongying", 淄博市: "zibo", 泰安市: "taian", 聊城市: "liaocheng", 济宁市: "jining", 德州市: "dezhou", }; 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, }, onclick: function () { var name = this.style.key; handleEvents.resetOption(myChart, 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(myChart, 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(myChart, option, name); }, }, ], }; pos.leftCur += pos.leftPlus; return breadcrumb; }, // 设置effectscatter initSeriesData: function (data) { console.log(data, "22222222222"); var temp = []; for (var i = 0; i temp.push({ name: data[i].name, 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); myChart.setOption({ geo: { zoom: count, }, }); if (count zoom(0.2); }); }, }; var iconYellow = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAAXNSR0IArs4c6QAAA/tJREFUSEu9lm9olWUYxn/Xc3a21Wzm3I7NxFaUWFpJCfVFyKQIRiHI+kOOnRlIoEJ9ibAP+cGIIqgP0R8ozsnsD1gIfTAIEjMMoiiKSimliWl1dubENWfb3ueKczbNuc1zbND78X2v5/nd93Nfz/3eosrHxc7rIXVfjCwLgSZbpwW/YO+mpecTac9oNVupkujvY9nF6Vq9hLkbmE5/RGKzmnPbK+13QaD7sh1OlEdcWmmj0neJ7fz51yNasmN4Ov20wNFidnWwPgBS1cDOauwP1ZLvkPBU66YEuu/hBY61PwCzLwo2LrbZlMrkXq4amBSyOUnZ/wIrr5H7pZE2zX3n5Pl7TMrQRzqaXN/wO6j2PwPL9fQGNedfqQgcLXQ/EMT7M4GVk4Rdasm1VwQmxewzsjbPFAgcCy25KysDe7tfF6yfOdBDoSU/6TpNrmEx+6qtR/83YFLoekoKW2cMtA+FTP7aikfqQnaFpb0zBdpsS2VyXZWBWwje2H0I0zYTqOx2ZfK7KgJLgqTQtUEKU3aKKoP4Sc25pVO1t6lb29fr075q+FvQkioB58ocnbTXZLZ9XHVrKwndu2655X2Yi+o4Nm+lMrlp2+LUGTpbT2F4Pqm6x202Vp2l+E2J1yF6iMkxXfH24AVr6BOdVzNSswTcWv67lXuU7re9qjLU/TbPB+n4mNYmhiKpuJ+5bT9LW+J4ywMXOmYRZq3CzCu9jNAQ8K02NxK0ANNUGViG9ANHjH4EvgowlqF1gvrRT9W4rU/2pjqKA2tAsxCnYvTtQt0T//I+iXUcTXlVisBh8HWgxrOB2UOGXEB7EbOxh6mp3SkXu2/D3EwqHCXx5cZn5pLPDO+F8pCUP1iyeFLsfkLmWSCMn9rnSrRGrbleG1HouiYJujOFHjKsHKsIWezDoEXE2CP3Zu8FtWJ/VIoI6R7LT6aa889NdYzuy95FpDOaA6F38IXp5hf3ZR9z1IvgPRqpbSc9shY0KPd2LoeaW5CLmJuMngYGhF4bcXw33ZL/brr55PyAyln2Z5cSeXDM3WqU2ErpekUtRByUvT7N8eHVRM3BSkzsQlpxzmZFyd/EyMEQOArqBw8lUUrJddE0hcB8RxYhLQNa/q0jXwjeQKSJHkKDO8vW96/Zehq4A2nhuEsXCZegiycYoTqrDggORHtfkPaXl0QXqBnZXZpxJlx8965tRXU3oLiQSHpMy9wgZ7CaCFwGbrCpHzfEaZtThoGyi3EhSCXXQvAoCcdIp/ZrzpuHz8Q6TafpSFGsyxBrM4Q4B0JjCUTwJUTVTEg0KCEmp5EGQScxJwjDBb4/+odWTh7/K476k42xJcCXaXrmibbBEWlHUt1Jj6n+AZCptJsxJ5j+AAAAAElFTkSuQmCC"; var iconGreen = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAAXNSR0IArs4c6QAABBRJREFUSEutlk1slFUUhp/3fvNNSy0EEigErUKQFpiWQBqEdjAQJCZGNoo/MTGu1IVGFxqNBBoTo/Fno240MTG40WiMbogLoyjGdrCoGGGmlNqYgsivqMhPW2bmHnNpIdBOmSnlbu8557nn3Pfce8QEVou1xFUMpMDdKLz3+EM76elGFCcQBlVivMqaFkfY88BG0NRRPv8Cnwi90aG9v1cS7+pQQ2lS7aAtQHz1gDYIbOpU7q1y4PGhw8APQI+UC3Llvr3ZqdwzV/MZF9pmTZsFL08MOGxt8ERG2XfH8y0JXWmLF0ZEWUHyWqDAGUex4XvtO1LKvyS0zVLvCT12jcCRbO31jHIvVAY1ojRNJ4AZk4ECBzqVnVcRdKU1Lk0Q/zpJ4AX3AoP1Xeo7NDrWmPK2WtMGB9uuB7SIrf5Buc6y0LQ13Qt8dj2ght2RUe6bstA2S60T2n49oMCKTmV/qgC6tA6KR4UqeiLHO5xBfoi/p/+sw+fKQoNB2poyQOtksjVse0a59RWpNxi1Wuohhz6aJPS+jHIltVG6hMO9Gu5i2bWADXZnyK5A+IozDYarbMnKCNcBJCYILnh8eqe6d03o7b1onLbmdrCXJga11zrJbR4vyxBrTHnbbEEd1CxwcBMUZxh6FLSiMrD9CO59sIKw4+fh4CBR3x7tOXu5/yVoizXMrCZuE25OMDCQYfWChcA95T9xCsC3gt8M+oVODcfx3nC9xxno6lPf0KVMb7PG+TFxeBQiw4oG6wXrgLrKMrzSyjAvlBX2qYdjDifwpxPYth3qPqOlNvuGWuoecBB7Cj3CvQgKwHDOI4a+Nmw3qE/Yw0IPXo4w2Cp4x7BbQM1gt4NWj/zFRY9/UnDUEc0Gf6RDuW1qtUXNEXFrEfY7bHYYsgzrd/B0B7kvRgsibal2Q1sERcGmDmXfHl2N5XbrrBqSzxl6VuivYwzePIeqjeBq8wx8rLQ1NorkGo/9CX6WcFvBej3u8Z3a+12p8rZYS81UTvod6g/D2JjVYnNrqpjxlNArwH+DnG+oJr476MJz6kOtNRJDpO6PcGG0/Mdj7YLmkfL2gr402OXQvjx2qIvsicuzX2vzqs8Sz42IGyO0yCAtuDOMqoYFPb7qsP3gqkM1QyIX1LvamsOUcBdQG05j+A2gNcCU0kKyIVABLAGqGkdsfxh87lD38L4/2EHuqzCYX2qZJbYkOQ2WO1jsiJLgY48aBPMN5ghmgoVq1I6Agm+Y7AfAThsKQ/cJLlyTeh06PNwydipP4Zdd6um9eLgxj0Mo9zka6xMk68HXCaYL50YpVoaPHC705hXLQ174kx476nEHupQ9Ntqm/J9puGXMm1bFtFrIT0mgpEHsiKLz+IIgH6GhIYrnBtDpbnWfKdfb/wMbfnzyL5QtcAAAAABJRU5ErkJggg=="; var iconBlue = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAAXNSR0IArs4c6QAAA+xJREFUSEutl39oVmUUxz/nuXdb79Q2aq5WYiVk6sCtzfd9paSECorQSFCL0T8RBBL0T0RR0EiQiug/C4Igoj+MyLKQov4wq6HvfWfmrImRziBMTSP3o+X77n2+ca8ydG1777bOf/e555zPOc8953nONWYgK3vUnKnlLsStODJ4zuHoG8rQ099qpbSuLI1ixwEtr/FsBR4Cwok2grMm3hyt47W+Nhup5rMqNBtpizneMFFXzZngmDk2FDqtbzrdaaH5SM9jbKsGu/y94C88a6O8HZrKbkpovqj7BF8YuJlAY13B8eF62vpbbXgy28mhexTmF9CfFMwsRbAtytoLqaHZSBuc8dEseYmZ4HxQpmXfHTY60c+kmeZ69b6JrrlAY1sv1hdz9lkqaL6oo8DSuUIRLxdy9lJa6BAwf85QeLuQtSdTQXNFjRjUzxUqeCfK2hOpoPmijgO3/A/QV6OsPZcWugPYPGeoZ1OUtw9TQbORNjnjgzlC/w4vcH3PGovr4wqZtGU6e1UTws+Im2cLlvFWtMq2pD4cYsVspM3OiLd5NjJcCrjtYIednBE0Vs4XtQtYPwvqU4WsbZ/KbupbRrJVvSwNYC9wXWqw6PHw6Mg8Tk91sf8Hmt+vRaphqSosdlCLYxHiGSCTAvyr4HUTJQnvHGfKxsBohqOXBzAObT+oxrox7kbjWYUylhksA1qBG6pCjRMSJw2OIn4Cksr1UHIhUaHD+uPnBJor6FoZ6+LMJC5grDFjI9BQFXRRYWySMSZe+06ed80uTR0BfYVO238RekAPW4WFHo45WIfxdLwukmh34dlXCThi4moHnxgsviyYT4eG6aptJKwps8KMvMH9iHswAow+Mx5RhdVADZ5dtvKQ5mUu0CXH8Ogon9fXcQajLM/GKG+7J2ba2auWwLMdow14L9rNVrrNT9TLFrXExE4z2mR0eXEkEFln/GB0y+Ue4DEZtSb24vjaoAXYIc8r0806U2397d9oYV09j0u8GN9WPuBexmhw0CQl/pODoNXBnQaqOBY58SxwVeJUDMj4FvgRzwkL+N17hl1IyY9hMuYF0OTFTeZYbiIPdIx/Y7ET+Jj41jLOFQaSz3NRcgXF25U1w5mjWZ4HMdrH4SkrKonT8CZ+EXxp4nBSscYpK/NVPL5c0afte9QYzqc9gCWI0DsCizOI20U042hALEBJ1PEcXBb8E7eGGYPynDU4JeOEiWTolvhjLOTw950cA9N4y0xMYu0ehecbuLG2RIuMJhmNAWR0qcWmSbqMMUiFP4HTwG+F1TY4Ub/qhD9u0C23YiP1defIuPrk16ImHMOPZihpkHLlGkbS/s/8C8bqdUvZhIl6AAAAAElFTkSuQmCC"; var iconRed = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAjxJREFUOE+N1EFIVFEUxvH/90bHTCOMDKnJSGgRZoQQSlBRBEFEFDW0qUUlwgwthWrTXLFtq3AMCRKKFrp2I1S0CJHEiIKIAosaDLGyzGbyOe/EKELWjM+7eYtz7o+Pe+67osQyF49CbRuencZUD0wCQ9h8t1zvVKl9KlYw1xaD6CBid5H6JNIJXe8eKbb3P9CcK4PJEURzqRTAFBY0yt0upF62ioCJc0j3VsCWSjeVSneEg52JflB8FeA7pdI7wkGXGEZqDQctp1RPZTjYmXwEHAoFjWm5dM1qwBTgQkEYVCp9PBx0yTrEW6B6RdQ4KpceCgULDeaSlxG3SoJGv1z6bOg9NHdpA1TUE2ETeUsh7SuyKYPZVbBPRDRBPvtBri+31LdwD80lqyF/AM+LEWg7sibQVqARiPyDfsQsA7xHNgreNJp/RbD5mZwLZO3t5WwpO4NsPaaLwN5VDGSp5TfQh2wMnzfq6nki60ruxGw/RivoAvATbAC8x4gxgtkMqjqI+U/xvQrKvW1AM56dwnQYyCI6MHxmZh7IXKIBjyMEakEUEmYxBoCH5HlNZG6CXPksa7KGX7WeqDUgWjBOAi3ALxRcWfgGX+7LQHQmjoHFIHIerDCIoq9QkaPIYsFdPL3Azw+rq/fl4lDi8QhNG/eAGgms8H/uAsWQ1YDWAWuB+YUU8H3xtbFxPJ5jZPD9Ud24M16wliUx5zyYqsPzawlUg1SFBZXgRZHyEMyBcsh+IO8rZfZZ13q+/Z38D+uF1si3KyZZAAAAAElFTkSuQmCC"; var mapTextBack = "image://data:image/png;base64,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"; var zuanshi = "image://data:image/png;base64,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"; var convertData = function (data) { data.forEach((item) => { item.symbol = item.value[2] item.symbol = iconYellow; item.symbolSize = 20; }); return data; }; var symbolFunc = function (data) { var iconColor; data.forEach((item) => { iconColor = item.coalAvaDay 14 ? iconGreen : iconYellow; }); return iconColor; }; var data_tmp = [ { name: "济南市", value: 24 }, { name: "青岛市", value: 48 }, { name: "烟台市", value: 48 }, { name: "潍坊市", value: 61 }, { name: "菏泽市", value: 22 }, { name: "日照市", value: 18 }, { name: "威海市", value: 35 }, { name: "枣庄市", value: 20 }, { name: "临沂市", value: 52 }, { name: "滨州市", value: 88 }, { name: "东营市", value: 30 }, { name: "淄博市", value: 30 }, { name: "泰安市", value: 36 }, { name: "聊城市", value: 46 }, { name: "济宁市", value: 56 }, { name: "德州市", value: 28 }, ]; var converntData = function (data) { var res = []; for (var i = 0; i res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }); } } return res; }; var series = []; [["济南市", data_tmp]].forEach(function (item, i) { series.push( // 下面圆点 { symbol: zuanshi, symbolSize: 30, label: { normal: { formatter: "{b}", position: "right", show: false, //是否显示地名 }, emphasis: { show: true, }, }, itemStyle: { normal: { color: "#fff", }, }, name: "light", type: "scatter", coordinateSystem: "geo", data: converntData( data_tmp .sort(function (a, b) { return b.value - a.value; }) .slice(0, 20) ), showEffectOn: "render", rippleEffect: { brushType: "stroke", }, hoverAnimation: true, }, { type: "map", map: "china", geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false, }, emphasis: { show: false, textStyle: { color: "#fff", }, }, }, roam: true, itemStyle: { normal: { areaColor: "#031525", borderColor: "#FFFFFF", }, emphasis: { areaColor: "#2B91B7", }, }, animation: false, data: data_tmp, }, // 黄圈圈 { name: "Top 5", type: "scatter", coordinateSystem: "geo", symbol: mapTextBack, symbolSize: [70, 30], symbolOffset: [0, -33], label: { normal: { show: true, textStyle: { fontSize: 12, fontFamily: "Adobe Heiti Std", fontWeight: "bold", color: "#FFFFFF", }, formatter(value) { if (value.length > 2) { return "值是：" + value.data.value[2]; } else { return value.data.name; } }, }, }, itemStyle: { normal: { color: "#dfae10", //标志颜色 }, }, data: converntData( data_tmp .sort(function (a, b) { return b.value - a.value; }) .slice(0, 20) ), // 流量最大的前 showEffectOn: "render", rippleEffect: { brushType: "stroke", }, hoverAnimation: true, zlevel: 1, } ); }); console.log("series"); console.log(series); var that = this; var option = { tooltip: { trigger: "item", backgroundColor: "rgba(0,0,0,0)", formatter: function (item) { console.log(item, "item!!!!"); if (item.componentSubType === "lines") { var tipHtml1 = ""; tipHtml1 = '' + '' + item.data.name + "" + '' + '' + "在运机组数：" + item.data.value + " " + "" + "" + ""; return tipHtml1; } else if (item.componentSubType === "effectScatter") { var tipHtml2 = ""; tipHtml2 = '' + '' + item.data.name + "" + '' + '' + "在运机组数：" + item.data.value[2] + " " + "" + "" + ""; return tipHtml2; } else if (item.componentSubType === "scatter") { var tipHtml3 = ""; tipHtml3 = '' + '' + item.data.name + "" + '' + '' + "在运机组数：" + item.data.value[2] + " " + "" + "" + ""; return tipHtml3; } }, }, backgroundColor: "rgb(0,0,0,0)", //背景色透明 graphic: [ { type: "group", left: pos.left, top: pos.top - 4, children: [ { type: "line", left: 0, top: -20, shape: { x1: 0, y1: 0, x2: 85, y2: 0, }, style: { stroke: style.lineColor, }, }, { type: "line", left: 0, top: 20, shape: { x1: 0, y1: 0, x2: 85, 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(myChart, option, name); }, }, { type: "text", left: 0, top: "middle", style: { text: name[0] === "山东" ? "山东省" : name[0], textAlign: "center", fill: style.textColor, font: style.font, }, onclick: function () { that.ifShow = true; that.$emit("changeArea", "山东省"); handleEvents.resetOption(myChart, option, "山东"); }, }, { type: "text", left: 0, top: 10, style: { text: "SHANDONG", textAlign: "center", fill: style.textColor, font: '12px "Microsoft YaHei", sans-serif', }, onclick: function () { that.ifShow = true; that.$emit("changeArea", "山东省"); handleEvents.resetOption(myChart, option, "山东"); }, }, ], }, ], // 暂时先注释 // visualMap: { // //图例值控制 // min: 0, // max: 1, // calculable: true, // show: false, // color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"], // textStyle: { // color: "#fff", // }, // }, geo: { map: "山东", layoutCenter: ["55%", "50%"], layoutSize: "135%", label: { normal: { show: true, textStyle: { color: "#fff", }, }, emphasis: { textStyle: { color: "#fff", }, }, }, roam: true, //是否允许缩放 mapLocation: { width: "110%", height: "97%", }, 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: { itemStyle: { areaColor: "#FFD181", borderColor: "#404a59", borderWidth: 1, }, }, }, }, series: series, }; myChart.setOption(option); myChart.on("click", function (params) { var _self = this; if (cityMap[params.name]) { var url = cityMap[params.name]; echarts.registerMap(params.name, url); handleEvents.resetOption(_self, option, params.name); } }); },代码量比较多，里面有一些冗余代码，大家可以自行选择是否删除 另外，我贴出的代码只包含地图部分，截图中的图例之类的，这里不做解释，欢迎大家留言讨论！ |
点击济南市即可进入济南市的地图： 
实现步骤如下所示： 1.图中的地图都是需要去网站上自行下载的，包括山东省地图，各个地级市的地图都需要进行下载，网址http://datav.aliyun.com/tools/atlas/，下载格式为.json 2.地图中需要用到的小图标，小图片什么的，需要提前转换成base64格式，百度搜一下，有不少在线转换工具可以直接转换 3.安装echarts，并导入 4.html代码：【本文地址】
今日新闻 |
推荐新闻 |