效果图：
文件中引入的咸阳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
*
* http://www.apache.org/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') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, 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.747202375
],
[
108.773985625,
34.7891274238282
],
[
108.813985625,
34.797202375
],
[
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.2323220039063
],
[
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.201654082031,
35.0253041816406
],
[
108.255257597656,
34.9855629707032
],
[
108.31298953125,
34.9694863105469
],
[
108.347345,
34.953843
],
[
108.343985625,
34.937202375
],
[
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.202064238281,
34.9385622382813
],
[
108.192625761719,
34.9491237617188
],
[
108.177323027344,
34.962798078125
],
[
108.120130644531,
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.2323220039063
]
]
]
]
}
},
{
"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.2201711250001
],
[
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.937202375
],
[
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.0320119453125
],
[
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.797202375
],
[
108.773985625,
34.7891274238282
],
[
108.780704375,
34.747202375
],
[
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.3504201484376
],
[
108.317345,
34.353843
]
]
],
[
[
[
108.317345,
34.353843
],
[
108.310079375,
34.3622768378906
],
[
108.262105742188,
34.3584218574219
],
[
108.223504667969,
34.3725978828126
],
[
108.2022278125,
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.682017851563,
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.3504201484376
],
[
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.2022278125,
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.2018202949219
],
[
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.2004201484375
],
[
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.201654082031,
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.2323220039063
],
[
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.7200307441407
],
[
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.120130644531,
34.9228481269531
],
[
108.177323027344,
34.962798078125
],
[
108.192625761719,
34.9491237617188
],
[
108.202064238281,
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.457202375
],
[
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 = 0
const max = 300
const 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>
版权声明：本文为memory_zzz原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。