效果图：
文件中引入的咸阳json数据如下：
xianyang.json
/** Licensed to the Apache Software Foundation (ASF) under one* or more contributor license agreements. See the NOTICE file* distributed with this work for additional information* regarding copyright ownership. The ASF licenses this file* to you under the Apache License, Version 2.0 (the* "License"); you may not use this file except in compliance* with the License. You may obtain a copy of the License at** /licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,* software distributed under the License is distributed on an* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY* KIND, either express or implied. See the License for the* specific language governing permissions and limitations* under the License.*/(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts'));} else {// Browser globalsfactory({}, root.echarts);}}(this, function (exports, echarts) {const log = function (msg) {if (typeof console !== 'undefined') {console && console.error && console.error(msg);}}if (!echarts) {log('ECharts is not Loaded');return;}if (!echarts.registerMap) {log('ECharts Map is not loaded')return;}echarts.registerMap('咸阳', {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "渭城区","id": "610404"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.840924101563,34.4777919746094],[108.871898222656,34.457622296875],[108.897669707031,34.4633998847656],[108.921429472656,34.4479274726562],[108.957345,34.4438430000001],[108.957345,34.423843],[108.914276152344,34.4069118476562],[108.85170046875,34.3894863105469],[108.83298953125,34.3781996894532],[108.797345,34.3638430000001],[108.716707792969,34.3317116523438],[108.70298953125,34.3494863105469],[108.68170046875,34.3581996894531],[108.67298953125,34.3877358222656],[108.706822539063,34.4333705878907],[108.667345,34.463843],[108.670704375,34.470483625],[108.697345,34.4838430000001],[108.715545683594,34.4761977363281],[108.732345,34.4799636054688],[108.755662871094,34.4747365546876],[108.792515898438,34.4902150703125],[108.840924101563,34.4777919746094]]]]}},{"type": "Feature","properties": {"name": "三原县","id": "610422"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.967345,34.8238430000001],[108.992806425781,34.8093056464844],[109.01095828125,34.7874550605469],[109.035714140625,34.7668910957032],[109.0292590625,34.7035756660156],[109.043192167969,34.6868044257813],[109.062884550781,34.7105104804688],[109.162806425781,34.6993056464844],[109.167345,34.693843],[109.163260527344,34.6679274726563],[109.147345,34.643843],[109.124307890625,34.6296486640626],[109.136766386719,34.5896486640626],[109.127345,34.583843],[109.036781035156,34.5951576972657],[108.992899199219,34.5782900214844],[108.947345,34.573843],[108.925662871094,34.5829494453125],[108.901673613281,34.5775722480469],[108.881651640625,34.6065724921875],[108.873260527344,34.6576625800782],[108.915767851563,34.6685707832031],[108.905811796875,34.7129824042969],[108.859581328125,34.7026186347656],[108.833260527344,34.7197585273438],[108.801429472656,34.7279274726563],[108.787345,34.733843],[108.780704375,34.74775],[108.773985625,34.7891274238282],[108.813985625,34.79775],[108.817345,34.803843],[108.852064238281,34.8203273750001],[108.888533964844,34.8100783515626],[108.906246367188,34.8377455878907],[108.953441191406,34.8299404121094],[108.967345,34.8238430000001]]]]}},{"type": "Feature","properties": {"name": "彬县","id": "610427"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.149163847656,35.232329063],[108.183577910156,35.2068080878907],[108.202857695313,35.2096572089844],[108.21170046875,35.1981996894532],[108.223519316406,35.189077375],[108.198707304688,35.1479457832032],[108.180418730469,35.0528163886719],[108.54082031,35.0253041816406],[108.255257597656,34.9855629707032],[108.31298953125,34.9694863105469],[108.347345,34.953843],[108.343985625,34.93775],[108.320704375,34.890483625],[108.317345,34.873843],[108.307345,34.873843],[108.307345,34.8638430000001],[108.277623320313,34.8811464667969],[108.25209109375,34.90972190625],[108.231080351563,34.9084694648438],[108.212625761719,34.9291237617188],[108.64238281,34.9385622382813],[108.192625761719,34.9491237617188],[108.177323027344,34.962798078125],[108.10644531,34.9228481269531],[108.032064238281,34.9091237617188],[108.02259890625,34.8985305000001],[108.012120390625,34.8991542792969],[107.947345,34.8638430000001],[107.931429472656,34.8597585273438],[107.917652617188,34.8398061347657],[107.872345,34.8499636054688],[107.850369902344,34.8450380683594],[107.853529082031,34.8591213203126],[107.841160917969,34.8885646796875],[107.843565703125,34.8992897773438],[107.831429472656,34.9179274726563],[107.817345,34.9738430000001],[107.817345,34.983843],[107.857345,34.983843],[107.857345,34.993843],[107.870152617188,34.998843],[107.857345,35.003843],[107.886922636719,35.0468581367188],[107.905159941406,35.0240846992188],[107.924049101563,35.0392104316407],[107.957337675781,35.0958412910157],[107.931070585938,35.1168740058594],[107.943155546875,35.1591896796875],[107.93134890625,35.1686440253906],[107.94322390625,35.188843],[107.930213652344,35.2109743476563],[107.971790800781,35.2058022285157],[107.952899199219,35.2293959785157],[107.941102324219,35.2388430000001],[107.947345,35.2438430000001],[108.046749296875,35.2539821601563],[108.09197390625,35.2792153144531],[108.127345,35.2838430000001],[108.136058378906,35.2725551582031],[108.153160429688,35.2593544746095],[108.149163847656,35.232329063]]]]}},{"type": "Feature","properties": {"name": "长武县","id": "610428"},"geometry": {"type": "MultiPolygon","coordinates": [[[[107.857345,35.003843],[107.870152617188,34.998843],[107.857345,34.993843],[107.857345,35.003843]]],[[[107.713922148438,35.3060353828126],[107.717345,35.293843],[107.705152617188,35.2972658515625],[107.713922148438,35.3060353828126]]],[[[107.857345,35.003843],[107.84170046875,35.0081996894532],[107.83298953125,35.0194863105469],[107.81170046875,35.0281996894532],[107.763421660156,35.0639931464844],[107.75298953125,35.0894863105469],[107.720924101563,35.1142360664063],[107.72312625,35.1291347480469],[107.703875761719,35.1781069160157],[107.687345,35.2038430000001],[107.683079863281,35.2095778632813],[107.656419707031,35.211250001],[107.650084257813,35.2569802070313],[107.713690214844,35.2460292792969],[107.70998171875,35.2675746894532],[107.722345,35.2697035957031],[107.736932402344,35.267192609375],[107.729859648438,35.3082753730469],[107.737345,35.3138430000001],[107.77298953125,35.2994863105469],[107.79170046875,35.2881996894532],[107.84298953125,35.2694863105469],[107.861954375,35.2580458808594],[107.887345,35.2617983222657],[107.919906035156,35.25698753125],[107.937345,35.263843],[107.955467558594,35.2601845527344],[107.947345,35.2438430000001],[107.941102324219,35.2388430000001],[107.952899199219,35.2293959785157],[107.971790800781,35.2058022285157],[107.930213652344,35.2109743476563],[107.94322390625,35.188843],[107.93134890625,35.1686440253906],[107.943155546875,35.1591896796875],[107.931070585938,35.1168740058594],[107.957337675781,35.0958412910157],[107.924049101563,35.0392104316407],[107.905159941406,35.0240846992188],[107.886922636719,35.0468581367188],[107.857345,35.003843]]]]}},{"type": "Feature","properties": {"name": "淳化县","id": "610430"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.443922148438,34.7860353828125],[108.447345,34.773843],[108.435152617188,34.7772658515625],[108.443922148438,34.7860353828125]]],[[[108.317345,34.8638430000001],[108.312345,34.8510353828125],[108.307345,34.8638430000001],[108.317345,34.8638430000001]]],[[[108.317345,34.8638430000001],[108.317345,34.873843],[108.320704375,34.890483625],[108.343985625,34.93775],[108.347345,34.953843],[108.394542265625,34.9806752753907],[108.439476347656,34.9770644355469],[108.45271609375,34.9884706855469],[108.489432402344,35.0310854316407],[108.533060332031,35.0275807929688],[108.577345,35.043843],[108.585513945313,35.039453125],[108.610345488281,35.0148671699219],[108.631429472656,34.9779274726563],[108.643260527344,34.9697585273438],[108.661429472656,34.9179274726563],[108.673260527344,34.9097585273438],[108.682850371094,34.8841310859375],[108.722066679688,34.8676601386719],[108.761673613281,34.8765395332032],[108.781429472656,34.8479274726563],[108.808646269531,34.8377443671876],[108.817345,34.803843],[108.813985625,34.79775],[108.773985625,34.7891274238282],[108.780704375,34.74775],[108.787345,34.733843],[108.771790800781,34.7293959785156],[108.688397246094,34.7159523750001],[108.592899199219,34.7293959785156],[108.507345,34.733843],[108.481715117188,34.7720644355469],[108.458538847656,34.7668691230469],[108.463656035156,34.7896962714844],[108.407955351563,34.7984743476563],[108.391673613281,34.822055890625],[108.371898222656,34.817622296875],[108.353260527344,34.8297585273438],[108.337345,34.833843],[108.323985625,34.860483625],[108.317345,34.8638430000001]]]]}},{"type": "Feature","properties": {"name": "礼泉县","id": "610425"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.597345,34.433843],[108.620343046875,34.4297902656251],[108.602779570313,34.4211464667969],[108.597345,34.433843]]],[[[108.597345,34.433843],[108.567345,34.433843],[108.557235136719,34.4474318671875],[108.49998171875,34.4375746894532],[108.504830351563,34.4094106269531],[108.491610136719,34.3995778632812],[108.483079863281,34.3881081367188],[108.457957792969,34.3695778632813],[108.442913847656,34.3898012519532],[108.412799101563,34.3846169257813],[108.393079863281,34.3581081367187],[108.367345,34.353843],[108.383616972656,34.4284401679688],[108.371646757813,34.4387526679688],[108.394215117188,34.4705825019532],[108.391942167969,34.498843],[108.394398222656,34.52940940625],[108.377345,34.5280397773437],[108.354561796875,34.5298696113282],[108.34271609375,34.5692153144532],[108.330516386719,34.5910829902344],[108.333551054688,34.6288430000001],[108.331942167969,34.648843],[108.332747832031,34.658843],[108.330870390625,34.6821901679688],[108.31197390625,34.6984706855469],[108.307345,34.733843],[108.2941809375,34.7614382148438],[108.314583769531,34.7884133125001],[108.30990359375,34.7997646308594],[108.332701445313,34.81226096875],[108.337345,34.833843],[108.353260527344,34.8297585273438],[108.371898222656,34.817622296875],[108.391673613281,34.822055890625],[108.407955351563,34.7984743476563],[108.463656035156,34.7896962714844],[108.458538847656,34.7668691230469],[108.481715117188,34.7720644355469],[108.507345,34.733843],[108.49298953125,34.7227614570312],[108.511832304688,34.6980287910157],[108.522857695313,34.6996572089844],[108.531832304688,34.6880287910156],[108.557088652344,34.6917604804688],[108.574486113281,34.6783315253906],[108.571400175781,34.657455060547],[108.602323027344,34.6173952460937],[108.64170046875,34.5881996894531],[108.687471953125,34.578540265625],[108.681605253906,34.538843],[108.683822050781,34.5238430000001],[108.681546660156,34.5084401679688],[108.697345,34.4838430000001],[108.670704375,34.470483625],[108.667345,34.463843],[108.647667265625,34.4688930488282],[108.633016386719,34.4901137519531],[108.607725859375,34.4844448066407],[108.613568144531,34.4583913398438],[108.597345,34.433843]],[[108.447345,34.773843],[108.443922148438,34.7860353828125],[108.435152617188,34.7772658515625],[108.447345,34.773843]]]]}},{"type": "Feature","properties": {"name": "乾县","id": "610424"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.317345,34.353843],[108.313922148438,34.3416506171875],[108.305152617188,34.350484376],[108.317345,34.353843]]],[[[108.317345,34.353843],[108.310079375,34.3622768378906],[108.262105742188,34.3584218574219],[108.223504667969,34.3725978828126],[108.278125,34.3479018378907],[108.192569609375,34.3695473457032],[108.165460234375,34.3544228339844],[108.15271609375,34.3692153144532],[108.1119153125,34.3784841132813],[108.112769804688,34.3891213203125],[108.101219511719,34.4098232246094],[108.103656035156,34.4401540351562],[108.082620878906,34.4284169746094],[108.017345,34.433843],[108.003026152344,34.4457363105469],[108.017345,34.4838430000001],[108.025513945313,34.5156740546875],[108.043260527344,34.5279274726562],[108.056344023438,34.5628932929688],[108.12154421875,34.5333425117188],[108.131429472656,34.5597585273438],[108.157166777344,34.5775283027344],[108.121429472656,34.5979274726563],[108.102984648438,34.6302407050782],[108.050699492188,34.6140334296875],[108.027345,34.623843],[108.023260527344,34.6497585273437],[108.017345,34.6738430000001],[108.037515898438,34.6817726875],[108.072345,34.676626203125],[108.092857695313,34.6796572089844],[108.101832304688,34.6680287910157],[108.112857695313,34.6696572089844],[108.121846953125,34.6580117011719],[108.192310820313,34.6695864082032],[108.208695097656,34.6671657539063],[108.223377714844,34.6784987617188],[108.2112903125,34.7092421699219],[108.24298953125,34.7281996894531],[108.272279082031,34.7499147773438],[108.29170046875,34.7381996894531],[108.307345,34.733843],[108.31197390625,34.6984706855469],[108.330870390625,34.6821901679688],[108.332747832031,34.658843],[108.331942167969,34.648843],[108.333551054688,34.6288430000001],[108.330516386719,34.5910829902344],[108.34271609375,34.5692153144532],[108.354561796875,34.5298696113282],[108.377345,34.5280397773437],[108.394398222656,34.52940940625],[108.391942167969,34.498843],[108.394215117188,34.4705825019532],[108.371646757813,34.4387526679688],[108.383616972656,34.4284401679688],[108.367345,34.353843],[108.364388457031,34.321938703125],[108.344801054688,34.3412990546875],[108.327345,34.343843],[108.327345,34.353843],[108.317345,34.353843]]]]}},{"type": "Feature","properties": {"name": "秦都区","id": "610402"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.597345,34.433843],[108.602779570313,34.4211464667969],[108.620343046875,34.4297902656251],[108.613568144531,34.4583913398438],[108.607725859375,34.4844448066407],[108.633016386719,34.4901137519531],[108.647667265625,34.4688930488282],[108.667345,34.463843],[108.706822539063,34.4333705878907],[108.67298953125,34.3877358222656],[108.68170046875,34.3581996894531],[108.70298953125,34.3494863105469],[108.716707792969,34.3317116523438],[108.797345,34.3638430000001],[108.789234648438,34.3144728828125],[108.797345,34.2938430000001],[108.751158476563,34.2900307441406],[108.743150664063,34.2770351386719],[108.727345,34.281958234375],[108.690296660156,34.2704177070313],[108.694034453125,34.2584218574219],[108.68851563,34.2400307441406],[108.653531523438,34.2600307441407],[108.637345,34.263843],[108.621363554688,34.2558986640625],[108.617345,34.263843],[108.6108996875,34.2922194648438],[108.613023710938,34.3092958808594],[108.60134890625,34.3186440253907],[108.613011503906,34.3384828925781],[108.611241484375,34.3527150703125],[108.573736601563,34.38274925],[108.567345,34.433843],[108.597345,34.433843]]]]}},{"type": "Feature","properties": {"name": "武功县","id": "610431"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.317345,34.353843],[108.305152617188,34.350484376],[108.313922148438,34.3416506171875],[108.327345,34.353843],[108.327345,34.343843],[108.311937285156,34.3046474433594],[108.307345,34.203843],[108.29263796875,34.2097548652344],[108.234989042969,34.1998293281251],[108.203079863281,34.2195778632813],[108.111610136719,34.2281081367188],[108.107345,34.233843],[108.111248808594,34.2399404121094],[108.131109648438,34.2526552558594],[108.118782988281,34.2965212226562],[108.092764921875,34.3131764960938],[108.06310671875,34.3048415351563],[108.053441191406,34.3199404121094],[108.047345,34.3238430000001],[108.04298953125,34.3394863105469],[108.029173613281,34.3623879218751],[108.033616972656,34.3924513984376],[108.017345,34.433843],[108.082620878906,34.4284169746094],[108.103656035156,34.4401540351562],[108.101219511719,34.4098232246094],[108.112769804688,34.3891213203125],[108.1119153125,34.3784841132813],[108.15271609375,34.3692153144532],[108.165460234375,34.3544228339844],[108.192569609375,34.3695473457032],[108.278125,34.3479018378907],[108.223504667969,34.3725978828126],[108.262105742188,34.3584218574219],[108.310079375,34.3622768378906],[108.317345,34.353843]]]]}},{"type": "Feature","properties": {"name": "兴平市","id": "610481"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.573736601563,34.38274925],[108.611241484375,34.3527150703125],[108.613011503906,34.3384828925781],[108.60134890625,34.3186440253907],[108.613023710938,34.3092958808594],[108.6108996875,34.2922194648438],[108.617345,34.263843],[108.584393339844,34.2422731757813],[108.521519804688,34.2296681953126],[108.507345,34.223843],[108.418670683594,34.202949219],[108.375545683594,34.2114882636719],[108.338895292969,34.1960939765625],[108.307345,34.203843],[108.311937285156,34.3046474433594],[108.327345,34.343843],[108.344801054688,34.3412990546875],[108.364388457031,34.321938703125],[108.367345,34.353843],[108.393079863281,34.3581081367187],[108.412799101563,34.3846169257813],[108.442913847656,34.3898012519532],[108.457957792969,34.3695778632813],[108.483079863281,34.3881081367188],[108.491610136719,34.3995778632812],[108.504830351563,34.4094106269531],[108.49998171875,34.4375746894532],[108.557235136719,34.4474318671875],[108.567345,34.433843],[108.573736601563,34.38274925]]]]}},{"type": "Feature","properties": {"name": "旬邑县","id": "610429"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.667345,35.2038430000001],[108.679537382813,35.84375],[108.670767851563,35.1916506171876],[108.667345,35.2038430000001]]],[[[108.667345,35.2038430000001],[108.656964140625,35.1942238593751],[108.642535429688,35.1786525703126],[108.626551542969,35.1638430000001],[108.661478300781,35.1314833808594],[108.611871367188,35.1157778144532],[108.612740507813,35.0938430000001],[108.612093535156,35.0775087714844],[108.592154570313,35.0590334296875],[108.582535429688,35.0486525703125],[108.577345,35.043843],[108.533060332031,35.0275807929688],[108.489432402344,35.0310854316407],[108.45271609375,34.9884706855469],[108.439476347656,34.9770644355469],[108.394542265625,34.9806752753907],[108.347345,34.953843],[108.31298953125,34.9694863105469],[108.255257597656,34.9855629707032],[108.54082031,35.0253041816406],[108.180418730469,35.0528163886719],[108.198707304688,35.1479457832032],[108.223519316406,35.189077375],[108.21170046875,35.1981996894532],[108.202857695313,35.2096572089844],[108.183577910156,35.2068080878907],[108.149163847656,35.232329063],[108.153160429688,35.2593544746095],[108.136058378906,35.2725551582031],[108.127345,35.2838430000001],[108.131890898438,35.2895217109375],[108.142703886719,35.2881764960938],[108.161790800781,35.2993959785156],[108.207496367188,35.3082900214844],[108.233275175781,35.2658486152344],[108.262345,35.2694643378907],[108.289447050781,35.2660939765625],[108.342525664063,35.2998622871094],[108.354344511719,35.2851015449219],[108.463743925781,35.2693959785157],[108.544508085938,35.3004396796875],[108.567345,35.2975991035156],[108.598226347656,35.30144065625],[108.611790800781,35.3793959785157],[108.633258085938,35.4087831855469],[108.621678496094,35.4284828925782],[108.623587675781,35.443843],[108.620848417969,35.4658705878906],[108.598526640625,35.503843],[108.612899199219,35.5282900214844],[108.617345,35.5438430000001],[108.656265898438,35.5327150703125],[108.672899199219,35.5193959785156],[108.681890898438,35.5081642890626],[108.703424101563,35.5108425117188],[108.741986113281,35.4881764960938],[108.757230253906,35.4900722480469],[108.793011503906,35.4292031074219],[108.791688261719,35.4185597968751],[108.803001738281,35.389126203125],[108.801478300781,35.3768691230469],[108.822799101563,35.3795217109375],[108.838150664063,35.3603481269532],[108.867345,35.343843],[108.867345,35.3238430000001],[108.857345,35.3238430000001],[108.841519804688,35.3196681953125],[108.813170195313,35.3080178046876],[108.74318484375,35.2939870429688],[108.733170195313,35.2680178046876],[108.721519804688,35.2596681953126],[108.700999785156,35.2310378242188],[108.671519804688,35.2196681953126],[108.667345,35.2038430000001]],[[108.585152617188,35.0972658515625],[108.597345,35.0938430000001],[108.593922148438,35.1060353828126],[108.585152617188,35.0972658515625]]]]}},{"type": "Feature","properties": {"name": "永寿县","id": "610426"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.102984648438,34.6302407050782],[108.121429472656,34.5979274726563],[108.157166777344,34.5775283027344],[108.131429472656,34.5597585273438],[108.12154421875,34.5333425117188],[108.056344023438,34.5628932929688],[108.043260527344,34.5279274726562],[108.025513945313,34.5156740546875],[108.017345,34.4838430000001],[107.988768339844,34.4911757636719],[108.003499785156,34.5386965156251],[107.99978640625,34.5552529121094],[107.976844511719,34.5710927558594],[107.987345,34.613843],[108.027345,34.623843],[108.050699492188,34.6140334296875],[108.102984648438,34.6302407050782]]],[[[108.317345,34.8638430000001],[108.307345,34.8638430000001],[108.307345,34.873843],[108.317345,34.873843],[108.317345,34.8638430000001]]],[[[108.307345,34.8638430000001],[108.312345,34.8510353828125],[108.317345,34.8638430000001],[108.323985625,34.860483625],[108.337345,34.833843],[108.332701445313,34.81226096875],[108.30990359375,34.7997646308594],[108.314583769531,34.7884133125001],[108.2941809375,34.7614382148438],[108.307345,34.733843],[108.29170046875,34.7381996894531],[108.272279082031,34.7499147773438],[108.24298953125,34.7281996894531],[108.2112903125,34.7092421699219],[108.223377714844,34.6784987617188],[108.208695097656,34.6671657539063],[108.192310820313,34.6695864082032],[108.121846953125,34.6580117011719],[108.112857695313,34.6696572089844],[108.101832304688,34.6680287910157],[108.092857695313,34.6796572089844],[108.072345,34.676626203125],[108.037515898438,34.6817726875],[108.017345,34.6738430000001],[108.013531523438,34.707441407],[107.991390410156,34.7873525214844],[107.951615019531,34.8009072089844],[107.947345,34.8638430000001],[108.012120390625,34.8991542792969],[108.02259890625,34.8985305000001],[108.032064238281,34.9091237617188],[108.10644531,34.9228481269531],[108.177323027344,34.962798078125],[108.192625761719,34.9491237617188],[108.64238281,34.9385622382813],[108.212625761719,34.9291237617188],[108.231080351563,34.9084694648438],[108.25209109375,34.90972190625],[108.277623320313,34.8811464667969],[108.307345,34.8638430000001]]]]}},{"type": "Feature","properties": {"name": "泾阳县","id": "610423"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.833260527344,34.7197585273438],[108.859581328125,34.7026186347656],[108.905811796875,34.7129824042969],[108.915767851563,34.6685707832031],[108.873260527344,34.6576625800782],[108.881651640625,34.6065724921875],[108.901673613281,34.5775722480469],[108.925662871094,34.5829494453125],[108.947345,34.573843],[108.970704375,34.5270143867188],[108.963985625,34.45775],[108.957345,34.4438430000001],[108.921429472656,34.4479274726562],[108.897669707031,34.4633998847656],[108.871898222656,34.457622296875],[108.840924101563,34.4777919746094],[108.792515898438,34.4902150703125],[108.755662871094,34.4747365546876],[108.732345,34.4799636054688],[108.715545683594,34.4761977363281],[108.697345,34.4838430000001],[108.681546660156,34.5084401679688],[108.683822050781,34.5238430000001],[108.681605253906,34.538843],[108.687471953125,34.578540265625],[108.64170046875,34.5881996894531],[108.602323027344,34.6173952460937],[108.571400175781,34.657455060547],[108.574486113281,34.6783315253906],[108.557088652344,34.6917604804688],[108.531832304688,34.6880287910156],[108.522857695313,34.6996572089844],[108.511832304688,34.6980287910157],[108.49298953125,34.7227614570312],[108.507345,34.733843],[108.592899199219,34.7293959785156],[108.688397246094,34.7159523750001],[108.771790800781,34.7293959785156],[108.787345,34.733843],[108.801429472656,34.7279274726563],[108.833260527344,34.7197585273438]]]]}}]});}));
代码中引入的map.png图片如下：
代码中引入的map-box.png图片如下：
代码中引入的map-pin.png图片如下：
完整代码：
<template><div style="height:100%;"><div id="chartmainbar" ref="chart" style="width:100%; height:95%;"></div></div></template><script>import xianyang from "../../../../assets/map/js/province/xianyang";import imgpng from "../../../../assets/map.png"const geoCoordMap = {'渭城区': [108.73, 108.73],'三原县': [108.93, 34.62],'彬县': [108.08, 35.03],'长武县': [107.78, 35.20],'淳化县': [108.58, 34.78],'礼泉县': [108.42, 34.48],'乾县': [108.23, 34.53],'秦都区': [108.72, 34.35],'武功县': [108.20, 34.27],'兴平市': [108.48, 34.30],'旬邑县': [108.33, 35.12],'永寿县': [108.13, 34.70],'泾阳县': [108.83, 34.53],}const data = [{name: '旬邑县', value: 887, area: 1774.34},{name: '彬县', value: 800, area: 1183.61},{name: '礼泉县', value: 790, area: 1010.86},{name: '乾县', value: 780, area: 1001.92},{name: '淳化县', value: 760, area: 986.06},{name: '永寿县', value: 750, area: 886.39},{name: '泾阳县', value: 740, area: 774.77},{name: '三原县', value: 730, area: 576.82},{name: '长武县', value: 720, area: 568.39},{name: '兴平市', value: 690, area: 508.97},{name: '武功县', value: 670, area: 391.22},{name: '渭城区', value: 650, area: 269.16},{name: '秦都区', value: 620, area: 259.54},];const max = 480, min = 9; // todo const maxSize4Pin = 40, minSize4Pin = 20;export default {mounted() {this.echartschange()},methods: {convertData(data) {const res = [];data.forEach( (item, index) => {const geoCoord = geoCoordMap[data[index].name];if (geoCoord) {res.push({name: data[index].name,value: geoCoord.concat(data[index].value),area: data[index].area,img: data[index].img,});}})return res;},echartschange() {// 测试代码const domImg = document.createElement('img');domImg.src = imgpng;const domImgHover = document.createElement('img');domImgHover.src = imgpng;let chart = this.$echarts.init(this.$refs.chart)const min = 0const max = 300const option = {tooltip: {formatter: function(params) {// console.log(params)const content = params.name + ":" + params.data.area + "k㎡"return content}},visualMap: {show: false,min: 0,max: 400,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {color: ['#4cc2ae', '#379f78'] // 浅蓝}},geo: [{map: '咸阳',aspectScale: 1.05, zoom: 1,layoutCenter: ['50%', '54%'],layoutSize: '100%',silent: true,roam: false,z: 0,itemStyle: {normal: {// areaColor: 'rgba(0, 132, 255, 0.5)',// shadowColor: 'rgba(0, 132, 255, 0.3)',areaColor: 'rgba(8, 107, 184, 0.9)',shadowColor: 'rgba(8, 107, 184, 0.4)',shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 15,borderColor: 'rgba(8, 107, 184, 0.3)',borderWidth: 2,},emphasis: {areaColor: 'rgba(0, 132, 255, 0.2)',borderWidth: 1,color: 'green',label: {show: false,},},},},{map: this.type,aspectScale: 1,roam: false, //是否允许缩放//zoom: 1.1, //默认显示级别layoutSize: `95%`,layoutCenter: [`50%`, `50%`],itemStyle: {color: {image: this.bj, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串repeat: `repeat` // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'},borderColor: `#37C1FD`,borderWidth: 2},z: 3,silent: true}],series: [{type: 'map',roam: true,label: {normal: {show: false,},emphasis: {// show: false,textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#a9cce0',borderWidth: 2,areaColor: {image: domImg,repeat: 'repeat'},shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 0.5,global: true, // 缺省为 false},emphasis: {areaColor: {image: domImgHover,repeat: 'repeat'},borderColor: '#2ab8ff',borderWidth: 1,shadowColor: 'rgba(0, 255, 255, 0.7)',shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 1,label: {show: false,}},},map: '咸阳',aspectScale: 1.05, layoutCenter: ['50%', '50%'],layoutSize: '100%',roam: false,// animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',label: {normal: {show: true,formatter(value) {const valueNow = value.data.name;// const unit = "k㎡";const text = `{fline|${valueNow}}`;return text;},rich: {fline: {color: '#fff',textShadowColor: '#fff',// textShadowBlur: '0',textShadowOffsetX: .1,// textShadowOffsetY: 1,fontSize: 18,fontWeight: 400,fontFamily: 'MAPTEXT'},},},emphasis: {show: true,},},itemStyle: {normal: {// areaColor: 'yellow',borderColor: '#4cc2ae',},emphasis: {// areaColor: 'yellow',},},symbol: 'image://' + require('../../../../assets/map-box.png'),symbolSize: [70, 20],symbolOffset: [8, -60],z: 999,data: this.convertData(data),},{type: 'scatter',coordinateSystem: 'geo',// itemStyle: {// color: '#f00',// },symbol: 'image://' + require('../../../../assets/map-pin.png'),symbolSize: [18, 28],symbolOffset: [8, -35],hoverAnimation: true,label: {normal: {formatter(value) {const valueNow = value.data.area;const unit = "k㎡";const text = `{fline|${valueNow}}{tline|${unit}}`;// console.log(value)return text;},rich: {fline: {color: '#fff',textShadowColor: '#030615',textShadowBlur: '0',textShadowOffsetX: 1,textShadowOffsetY: 1,fontSize: 16,fontWeight: 600,fontFamily: 'DINPro-Bold'},tline: {padding: [2, 2],color: '#c3c7ce',textShadowColor: '#030615',textShadowBlur: '0',textShadowOffsetX: 1,textShadowOffsetY: 1,fontSize: 10,},},position: 'bottom',show: true,color: '#fff',fontSize: 14,fontFamily: 'MAPTEXT'}},// z: 9999,data: this.convertData(data),}]}chart.setOption(option)window.onresize = chart.resize;chart.on('click', function(params) {const cout = params.data.name// console.log(params)})}}};</script>
