echarts实现山东地图可放大缩小可下钻

最近遇到一个新需求，要求展示山东省的地图，并且点击可进入地级市地图。这可是难倒了我，我尝试着用不同的方法，高德地图、百度地图等，发现都有一定的缺陷，最终决定使用echarts实现，下面就来跟大家分享一下我的心路历程。
先来看一下效果：

点击济南市即可进入济南市的地图：

实现步骤如下所示：
1.图中的地图都是需要去网站上自行下载的，包括山东省地图，各个地级市的地图都需要进行下载，网址http://datav.aliyun.com/tools/atlas/，下载格式为.json
2.地图中需要用到的小图标，小图片什么的，需要提前转换成base64格式，百度搜一下，有不少在线转换工具可以直接转换
3.安装echarts，并导入
4.html代码：

<div style="width:400px;height:400px" id="barChart"></div>

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, fillscale: 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, fillscale: 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 < 0) {console.log("jinru1");o.graphic.push(breadcrumb);o.series = series;o.graphic[0].children[0].shape.x2 = 195;o.graphic[0].children[1].shape.x2 = 195;if (o.graphic.length > 2) {for (var x = 0; x < opt1.data.length; x++) {if (n === opt1.data[x].name + "市") {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 <= 2) {o.graphic[0].children[0].shape.x2 = 85;o.graphic[0].children[1].shape.x2 = 85;o.series[0].data = handleEvents.initSeriesData(data_tmp);o.series[0].symbol = zuanshi;o.series[0].symbolSize = 30;o.series[2].data = handleEvents.initSeriesData(data_tmp);}name.splice(j + 1, l);idx = j;pos.leftCur -= pos.leftPlus * (l - j - 1);}o.geo.map = n;o.geo.zoom = 1;i.clear();i.setOption(o);this.zoomAnimation();opt1.callback(n, o, i);},createBreadcrumb: function (name) {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;},// 设置effectscatterinitSeriesData: function (data) {console.log(data, "22222222222");var temp = [];for (var i = 0; i < data.length; i++) {var geoCoord = sdGeoCoordMap[data[i].name];if (geoCoord) {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 < 1)window.requestAnimationFrame(function () {zoom(0.2);});};window.requestAnimationFrame(function () {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] < 1? iconYellow: item.value[2] < 6 && item.value[2] >= 1? iconGreen: iconBlue;item.symbolSize = 20;});return data;};var convertData1 = function (data) {data.forEach((item) => {item.symbol = iconYellow;item.symbolSize = 20;});return data;};var symbolFunc = function (data) {var iconColor;data.forEach((item) => {iconColor =item.coalAvaDay < 7? iconRed: 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 < data.length; i++) {var geoCoord = sdGeoCoordMap[data[i].name];if (geoCoord) {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 ='<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +'<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' +item.data.name +"</div>" +'<div style="text-align:center;color:#494949;padding:8px 6px">' +'<span style="font-size:18px;font-weight:bold;">' +"在运机组数：" +item.data.value +" " +"</span>" +"</div>" +"</div>";return tipHtml1;} else if (item.componentSubType === "effectScatter") {var tipHtml2 = "";tipHtml2 ='<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +'<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' +item.data.name +"</div>" +'<div style="text-align:center;color:#494949;padding:8px 6px">' +'<span style="font-size:18px;font-weight:bold;">' +"在运机组数：" +item.data.value[2] +" " +"</span>" +"</div>" +"</div>";return tipHtml2;} else if (item.componentSubType === "scatter") {var tipHtml3 = "";tipHtml3 ='<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +'<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' +item.data.name +"</div>" +'<div style="text-align:center;color:#494949;padding:8px 6px">' +'<span style="font-size:18px;font-weight:bold;">' +"在运机组数：" +item.data.value[2] +" " +"</span>" +"</div>" +"</div>";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);}});},

代码量比较多，里面有一些冗余代码，大家可以自行选择是否删除
另外，我贴出的代码只包含地图部分，截图中的图例之类的，这里不做解释，欢迎大家留言讨论！

echarts实现山东地图可放大缩小可下钻相关推荐

【问题解决】arcgis地图无法放大缩小
在arcgis中如果碰到地图无法放大缩小一般是比例尺锁定了,在图层中的属性内容内的数据框内将范围设定为自动即可解决.
C# ArcGIS 三维地图 arcgloblecontrol 基础操作加载地图漫游放大缩小
最近在调研arcgis地图,就把一些自己写的基本的操作po一下,希望对刚刚开始接触到arcgis的童鞋有点帮助,大神请指正吐槽. 效果就是这样滴: 正文: 引入命名空间: using ESRI.Arc ...
基于android studio的百度地图（放大缩小搜索功能）
首先我们需要下载百度SDK包百度网盘提取码1234 这个复制在这里还有百度官方的代码也已经打好了. 百度网盘请输入1234 自行导入.直接复制全部java,之后粘贴在工程里面这是布局布局.x ...
android 地图放大缩小按钮,Android 百度最新地图隐藏放大缩小按钮、指南针、缩放比例的方法...
相信很多人在做地图是都会遇到如要隐藏这3中按钮的困扰,那么该如何实现呢?我就不多说,代码很少,一看就能明白下面接是具体实现代码 // 隐藏缩放控件 int childCount = mMapView ...
高德地图动态锁定地图不能放大缩小和滑动
map.setStatus({zoomEnable:false,dragEnable: false, });
基于mAppWidget实现手绘地图(十五)–如何控制放大缩小
一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 使用控件底部的缩放按钮双击控件 pinch手势物理按键 :I键标识缩小 :O键表示放大.(只有设备具有物理按键才行) 当然,你也可以使用自 ...
echarts地图如何放大
地图不能写dataZoom来放大缩小,一定要写在series里的zoom $.get('https://geo.datav.aliyun.com/areas_v3/bound/140000_full. ...
android 百度地图禁止双击放大缩小,leaflet-div上禁止地图的拖动，放大缩小双击事件...
1. 先把dom的div对象获取到,可用document.getEleementById("divId"); //获取当前的this对象 const that = this; // ...
Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换
Unity-UGUI制作的小地图-可放大缩小视角,大地图小地图切换 1.效果图文章最后也会附上 Demo下载地址备注:资源是URP的,普通平台修改资源材质即可缩小状态放大状态 2.实现思路首 ...
百度地图api不支持windows平板双指放大缩小解决方案
百度地图api不支持windows平板双指放大缩小解决方案 (1)保存百度使用API返回的脚本,这个接口 http://api.map.baidu.com/getscript?v=2.0, 命名为 ...

echarts实现山东地图可放大缩小可下钻

echarts实现山东地图可放大缩小可下钻相关推荐

最新文章

热门文章