跟新

public/hunanzuobiaotu.json

@@ -1,692 +1,589 @@
 {
     "list": [
         {
-            "lat": 28.272676837717093,
-            "lng": 109.94719474239146
+            "lat": 28.201952297589123,
+            "lng": 110.47704589103263,
+            "type": 4
         },
         {
-            "lat": 27.8986564464354,
-            "lng": 112.44633213715105
+            "lat": 26.691792408767945,
+            "lng": 113.78640970765836,
+            "type": 1
         },
         {
-            "lat": 27.353101164253104,
-            "lng": 112.09391005216516
+            "lat": 26.646177101329,
+            "lng": 109.62204921166138,
+            "type": 4
         },
         {
-            "lat": 29.203684877541,
-            "lng": 110.23989789206104
+            "lat": 28.603896798803333,
+            "lng": 112.32269774257884,
+            "type": 3
         },
         {
-            "lat": 28.256412335440587,
-            "lng": 110.14088013980566
+            "lat": 28.36680108909162,
+            "lng": 111.78395792026735,
+            "type": 2
         },
         {
-            "lat": 28.540375014833625,
-            "lng": 110.06703028519343
+            "lat": 28.64953057053827,
+            "lng": 111.72608637488275,
+            "type": 4
         },
         {
-            "lat": 27.215665591223775,
-            "lng": 110.34991747202004
+            "lat": 29.335133686817862,
+            "lng": 110.80680568046473,
+            "type": 4
         },
         {
-            "lat": 29.401417218806195,
-            "lng": 111.27119232116287
+            "lat": 27.987335986703407,
+            "lng": 110.27297968312445,
+            "type": 2
         },
         {
-            "lat": 28.051628095346405,
-            "lng": 111.30773903460398
+            "lat": 27.141839945045348,
+            "lng": 111.77289121862617,
+            "type": 1
         },
         {
-            "lat": 26.843151497729284,
-            "lng": 110.6432361673185
+            "lat": 27.82257217007564,
+            "lng": 109.6003610616112,
+            "type": 2
         },
         {
-            "lat": 28.770507920275953,
-            "lng": 113.44256404022902
+            "lat": 27.553592494278895,
+            "lng": 109.76020819780172,
+            "type": 3
         },
         {
-            "lat": 27.88330040062175,
-            "lng": 113.72358711570305
+            "lat": 27.607682675946716,
+            "lng": 111.01217712722885,
+            "type": 1
         },
         {
-            "lat": 26.88931457022729,
-            "lng": 110.77553282465504
+            "lat": 27.19009528739597,
+            "lng": 111.51005833592026,
+            "type": 1
         },
         {
-            "lat": 27.626314851391047,
-            "lng": 113.20965073949513
+            "lat": 28.027564618099227,
+            "lng": 111.73783210813107,
+            "type": 4
         },
         {
-            "lat": 28.881708729099408,
-            "lng": 109.72453842176628
+            "lat": 27.130802412469855,
+            "lng": 110.72589822472587,
+            "type": 3
         },
         {
-            "lat": 27.771046353060864,
-            "lng": 110.77015097728885
+            "lat": 27.247645540903903,
+            "lng": 112.5405739783013,
+            "type": 3
         },
         {
-            "lat": 29.264913334390968,
-            "lng": 112.19352680592648
+            "lat": 27.099635204680133,
+            "lng": 112.94709284122104,
+            "type": 1
         },
         {
-            "lat": 26.893389505227695,
-            "lng": 110.81801291376134
+            "lat": 29.137481645178074,
+            "lng": 112.58841918639044,
+            "type": 5
         },
         {
-            "lat": 28.613065795274668,
-            "lng": 113.7410773777242
+            "lat": 29.145323657594833,
+            "lng": 111.87763488725317,
+            "type": 3
         },
         {
-            "lat": 28.86575455905649,
-            "lng": 111.79172903132901
+            "lat": 28.3940858598703,
+            "lng": 110.70392120908431,
+            "type": 5
         },
         {
-            "lat": 27.512744038379097,
-            "lng": 111.80350679148737
+            "lat": 28.394651977440315,
+            "lng": 113.78967859521173,
+            "type": 5
         },
         {
-            "lat": 27.41365378005073,
-            "lng": 110.34060044705949
+            "lat": 28.213239018774573,
+            "lng": 113.56235700614977,
+            "type": 2
         },
         {
-            "lat": 27.189411496685228,
-            "lng": 112.6152947365007
+            "lat": 29.461576293561617,
+            "lng": 110.46477040085416,
+            "type": 4
         },
         {
-            "lat": 28.802947886932422,
-            "lng": 110.91437405749805
+            "lat": 28.185441377036366,
+            "lng": 112.0281469560189,
+            "type": 5
         },
         {
-            "lat": 27.5576456433488,
-            "lng": 112.83407594622048
+            "lat": 28.140810077988228,
+            "lng": 110.27974391504446,
+            "type": 2
         },
         {
-            "lat": 29.451382070569142,
-            "lng": 110.49703115004773
+            "lat": 27.265302835255994,
+            "lng": 113.5440889158965,
+            "type": 1
         },
         {
-            "lat": 26.929416298169468,
-            "lng": 111.64279213170363
+            "lat": 26.885726869120806,
+            "lng": 112.36470585167322,
+            "type": 2
         },
         {
-            "lat": 29.379321869621375,
-            "lng": 112.88480257131509
+            "lat": 27.77003320727097,
+            "lng": 111.8404724891984,
+            "type": 3
         },
         {
-            "lat": 27.297704564747647,
-            "lng": 110.90467928043059
+            "lat": 29.423247717970682,
+            "lng": 112.85243072031153,
+            "type": 3
         },
         {
-            "lat": 27.632000696382953,
-            "lng": 110.00340184250449
+            "lat": 28.68999836107902,
+            "lng": 112.37558574042613,
+            "type": 2
         },
         {
-            "lat": 29.149087030569856,
-            "lng": 110.93998299837878
+            "lat": 27.733926803597708,
+            "lng": 113.3440409934214,
+            "type": 4
         },
         {
-            "lat": 26.77109750288494,
-            "lng": 112.76870941816176
+            "lat": 26.9023281628382,
+            "lng": 112.56345397590313,
+            "type": 5
         },
         {
-            "lat": 27.40420490012687,
-            "lng": 110.26860959261114
+            "lat": 28.782060045475948,
+            "lng": 112.49101727533132,
+            "type": 2
         },
         {
-            "lat": 28.120476659651594,
-            "lng": 111.52869571317734
+            "lat": 27.40567023199154,
+            "lng": 113.48878887401926,
+            "type": 2
         },
         {
-            "lat": 28.083641041445,
-            "lng": 112.1351259517026
+            "lat": 26.941878599438343,
+            "lng": 110.31793892252904,
+            "type": 1
         },
         {
-            "lat": 29.426404829290124,
-            "lng": 111.56324009203793
+            "lat": 29.415482498362376,
+            "lng": 110.11800111641867,
+            "type": 1
         },
         {
-            "lat": 29.317139766164974,
-            "lng": 111.63570437128226
+            "lat": 27.02633161032377,
+            "lng": 111.133885063994,
+            "type": 3
         },
         {
-            "lat": 27.914320214797325,
-            "lng": 109.67365568214727
+            "lat": 27.230926148819766,
+            "lng": 111.74411087168629,
+            "type": 5
         },
         {
-            "lat": 28.15142931466881,
-            "lng": 113.5451300193561
+            "lat": 27.623990611859075,
+            "lng": 112.67518223979633,
+            "type": 3
         },
         {
-            "lat": 28.25464550988379,
-            "lng": 113.56046175734163
+            "lat": 28.38769960674591,
+            "lng": 111.25489094471283,
+            "type": 5
         },
         {
-            "lat": 28.580521872892124,
-            "lng": 112.09232993179951
+            "lat": 27.172482168993987,
+            "lng": 110.40703051286798,
+            "type": 5
         },
         {
-            "lat": 27.447620661619577,
-            "lng": 112.34089501948162
+            "lat": 29.430937325343802,
+            "lng": 112.09409301301159,
+            "type": 3
         },
         {
-            "lat": 28.73817076780862,
-            "lng": 113.43476715107127
+            "lat": 28.925719082369145,
+            "lng": 110.0759238011954,
+            "type": 5
         },
         {
-            "lat": 28.688840348587206,
-            "lng": 112.45225067716635
+            "lat": 27.47587167578134,
+            "lng": 112.73386371953299,
+            "type": 2
         },
         {
-            "lat": 27.013569317707848,
-            "lng": 111.50285027765658
+            "lat": 29.31266896025173,
+            "lng": 110.99634640205394,
+            "type": 4
         },
         {
-            "lat": 28.543053616861066,
-            "lng": 112.90203800731247
+            "lat": 26.979516330122635,
+            "lng": 110.3755045201563,
+            "type": 1
         },
         {
-            "lat": 26.680521997706354,
-            "lng": 111.9874460493206
+            "lat": 28.443910667907346,
+            "lng": 113.10723000353053,
+            "type": 4
         },
         {
-            "lat": 26.843602401517227,
-            "lng": 112.86319259915537
+            "lat": 28.489936412929175,
+            "lng": 112.3149390247774,
+            "type": 5
         },
         {
-            "lat": 29.461699510409204,
-            "lng": 112.26669000573953
+            "lat": 27.523995365932166,
+            "lng": 111.07647984962877,
+            "type": 4
         },
         {
-            "lat": 28.963018433760546,
-            "lng": 111.88267164609996
+            "lat": 27.840466724194826,
+            "lng": 112.09563738307259,
+            "type": 5
         },
         {
-            "lat": 28.875869424995496,
-            "lng": 112.27252740451044
+            "lat": 26.965111516262994,
+            "lng": 112.94434546329366,
+            "type": 4
         },
         {
-            "lat": 29.110187336711217,
-            "lng": 110.6180739099128
+            "lat": 26.59937155711199,
+            "lng": 110.92901421611842,
+            "type": 1
         },
         {
-            "lat": 26.692214515741846,
-            "lng": 113.25240746887397
+            "lat": 26.67447350020325,
+            "lng": 112.08252767942572,
+            "type": 4
         },
         {
-            "lat": 28.46626337431383,
-            "lng": 112.00811985208743
+            "lat": 29.136150229920375,
+            "lng": 112.15671551361035,
+            "type": 1
         },
         {
-            "lat": 27.23804036613698,
-            "lng": 112.98407468615544
+            "lat": 28.158419881422613,
+            "lng": 113.1085230581579,
+            "type": 4
         },
         {
-            "lat": 28.114929760327847,
-            "lng": 110.61665244914097
+            "lat": 27.881962517522272,
+            "lng": 109.98224482393819,
+            "type": 3
         },
         {
-            "lat": 28.137937115757786,
-            "lng": 112.67750021577224
+            "lat": 28.548097278975067,
+            "lng": 112.05658503898792,
+            "type": 2
         },
         {
-            "lat": 26.917487681991123,
-            "lng": 110.22993746366947
+            "lat": 27.429299041609575,
+            "lng": 113.6785907763344,
+            "type": 2
         },
         {
-            "lat": 29.309305636213644,
-            "lng": 112.5476756577327
+            "lat": 27.178856971000297,
+            "lng": 113.75118471736404,
+            "type": 5
         },
         {
-            "lat": 27.07211982730772,
-            "lng": 112.05950407068566
+            "lat": 29.245109591500075,
+            "lng": 111.07282111980543,
+            "type": 1
         },
         {
-            "lat": 27.625241313132165,
-            "lng": 110.02666132580015
+            "lat": 28.276442300526664,
+            "lng": 113.73805367024849,
+            "type": 4
         },
         {
-            "lat": 27.89419833283213,
-            "lng": 111.4258928669782
+            "lat": 29.13371427524986,
+            "lng": 110.0521887444827,
+            "type": 4
         },
         {
-            "lat": 28.03063464789363,
-            "lng": 110.93300946734225
+            "lat": 29.374527625386506,
+            "lng": 112.5896076813557,
+            "type": 3
         },
         {
-            "lat": 26.91970968155357,
-            "lng": 112.00302094916496
+            "lat": 27.48455668859241,
+            "lng": 110.48016195242809,
+            "type": 1
         },
         {
-            "lat": 28.659155578816545,
-            "lng": 111.04851183012462
+            "lat": 26.857588502860786,
+            "lng": 112.90399285887135,
+            "type": 1
         },
         {
-            "lat": 26.876231003733544,
-            "lng": 112.29245377064257
+            "lat": 28.00182687618117,
+            "lng": 110.78830626492197,
+            "type": 4
         },
         {
-            "lat": 28.83592617297502,
-            "lng": 113.74861974044336
+            "lat": 28.757766635244103,
+            "lng": 112.58007678860919,
+            "type": 3
         },
         {
-            "lat": 28.792754907425344,
-            "lng": 110.63084403632499
+            "lat": 28.565652545697294,
+            "lng": 110.9455024535577,
+            "type": 5
         },
         {
-            "lat": 28.484856433367284,
-            "lng": 110.90335175232373
+            "lat": 28.23283859008187,
+            "lng": 111.31479878536628,
+            "type": 1
         },
         {
-            "lat": 28.165882862650623,
-            "lng": 112.3086379196361
+            "lat": 28.1004576998165,
+            "lng": 110.25718026133217,
+            "type": 2
         },
         {
-            "lat": 27.806732340855554,
-            "lng": 109.93639058796279
+            "lat": 27.638252132996964,
+            "lng": 112.44881305635103,
+            "type": 5
         },
         {
-            "lat": 29.09240210953223,
-            "lng": 111.28484130805687
+            "lat": 29.07131993849883,
+            "lng": 112.86935422132044,
+            "type": 1
         },
         {
-            "lat": 27.55297153570003,
-            "lng": 113.14544095724209
+            "lat": 27.72204435154652,
+            "lng": 109.53525995507734,
+            "type": 1
         },
         {
-            "lat": 27.223761720621184,
-            "lng": 111.01894029855815
+            "lat": 27.035979664324067,
+            "lng": 111.53298929387965,
+            "type": 5
         },
         {
-            "lat": 28.3495300414334,
-            "lng": 111.32602699960255
+            "lat": 29.190750599987854,
+            "lng": 109.85680664765854,
+            "type": 4
         },
         {
-            "lat": 29.00165575357505,
-            "lng": 113.66308798842738
+            "lat": 28.458780309475475,
+            "lng": 111.90723710893282,
+            "type": 3
         },
         {
-            "lat": 29.401587521115776,
-            "lng": 110.2603443847313
+            "lat": 27.1747811759699,
+            "lng": 110.27421590758442,
+            "type": 2
         },
         {
-            "lat": 27.423649277772668,
-            "lng": 112.03662631491329
+            "lat": 26.669128310608762,
+            "lng": 112.88798225230315,
+            "type": 2
         },
         {
-            "lat": 26.684044479982575,
-            "lng": 111.6428427478773
+            "lat": 26.861435569154985,
+            "lng": 112.52237653417762,
+            "type": 3
         },
         {
-            "lat": 28.395339388502165,
-            "lng": 112.53961733048818
+            "lat": 28.013038109754287,
+            "lng": 111.59938015756025,
+            "type": 1
         },
         {
-            "lat": 28.86464454338887,
-            "lng": 111.33546805168096
+            "lat": 29.34261977040528,
+            "lng": 111.0353585182173,
+            "type": 1
         },
         {
-            "lat": 29.373563440048002,
-            "lng": 112.32676015499284
+            "lat": 27.696140591355253,
+            "lng": 110.05130843678172,
+            "type": 1
         },
         {
-            "lat": 28.74932713756202,
-            "lng": 111.16412431626705
+            "lat": 29.125836582887892,
+            "lng": 111.23835102080865,
+            "type": 1
         },
         {
-            "lat": 27.4575637737989,
-            "lng": 111.14209682325414
+            "lat": 27.048969690281382,
+            "lng": 113.12829031362178,
+            "type": 1
         },
         {
-            "lat": 28.185668112443143,
-            "lng": 110.39822530908494
+            "lat": 26.88625863041346,
+            "lng": 112.64626457314857,
+            "type": 4
         },
         {
-            "lat": 28.178489178464396,
-            "lng": 112.19043254435275
+            "lat": 28.08242861056306,
+            "lng": 111.62317795484033,
+            "type": 1
         },
         {
-            "lat": 27.354014408475987,
-            "lng": 109.6779031253012
+            "lat": 28.356839835083388,
+            "lng": 110.80425065656144,
+            "type": 3
         },
         {
-            "lat": 27.88530837747948,
-            "lng": 112.1901874426172
+            "lat": 27.396694467425643,
+            "lng": 113.14452904355842,
+            "type": 1
         },
         {
-            "lat": 27.77373731203293,
-            "lng": 113.18605348453508
+            "lat": 28.50831928127528,
+            "lng": 111.37749872203726,
+            "type": 5
         },
         {
-            "lat": 28.433857775827025,
-            "lng": 113.78085976536158
+            "lat": 28.618851859391036,
+            "lng": 110.77551004686906,
+            "type": 4
         },
         {
-            "lat": 27.032819644370733,
-            "lng": 113.08964746245344
+            "lat": 27.185284426085353,
+            "lng": 112.90178386428062,
+            "type": 4
         },
         {
-            "lat": 29.21191968473586,
-            "lng": 110.7509186265207
+            "lat": 26.617302998106894,
+            "lng": 111.75792376886879,
+            "type": 1
         },
         {
-            "lat": 26.79440124930154,
-            "lng": 113.73698131254905
+            "lat": 27.58501170408098,
+            "lng": 109.762575824919,
+            "type": 3
         },
         {
-            "lat": 28.98671258521847,
-            "lng": 111.38672639921526
+            "lat": 28.602291519997802,
+            "lng": 110.69408656616784,
+            "type": 1
         },
         {
-            "lat": 29.35281113901899,
-            "lng": 109.97419584007817
+            "lat": 27.7558827744322,
+            "lng": 111.36461292756186,
+            "type": 3
         },
         {
-            "lat": 28.212006389558407,
-            "lng": 109.84880337992637
+            "lat": 28.156919931511922,
+            "lng": 111.3539024132718,
+            "type": 5
         },
         {
-            "lat": 28.581066865301143,
-            "lng": 110.67035343141023
+            "lat": 27.786163917147846,
+            "lng": 112.43613519306766,
+            "type": 3
         },
         {
-            "lat": 26.729787666972612,
-            "lng": 112.12284698502218
+            "lat": 28.999280345648504,
+            "lng": 112.79089114726747,
+            "type": 3
         },
         {
-            "lat": 26.655381520843317,
-            "lng": 112.77044877763286
+            "lat": 27.885072830885868,
+            "lng": 112.46605817607605,
+            "type": 2
         },
         {
-            "lat": 27.156092128243376,
-            "lng": 112.17762227423714
+            "lat": 27.377548785049463,
+            "lng": 110.97051039689033,
+            "type": 4
         },
         {
-            "lat": 29.0384687829594,
-            "lng": 112.48137792168032
+            "lat": 27.226204198253175,
+            "lng": 111.53221635500219,
+            "type": 4
         },
         {
-            "lat": 28.01742538597417,
-            "lng": 110.87115657216103
+            "lat": 28.918001604056975,
+            "lng": 110.90662416509004,
+            "type": 1
         },
         {
-            "lat": 26.63342448048389,
-            "lng": 110.48342863046801
+            "lat": 26.832154859464225,
+            "lng": 109.64287102519232,
+            "type": 4
         },
         {
-            "lat": 28.172835346701426,
-            "lng": 110.99733989499371
+            "lat": 27.407849848898586,
+            "lng": 112.71399191555939,
+            "type": 3
         },
         {
-            "lat": 28.348209671257468,
-            "lng": 112.28638978415283
+            "lat": 26.593660990647063,
+            "lng": 111.65434112078319,
+            "type": 4
         },
         {
-            "lat": 27.78170911703198,
-            "lng": 111.7555941694495
+            "lat": 29.314704723164372,
+            "lng": 110.06946255910614,
+            "type": 5
         },
         {
-            "lat": 28.52870690720772,
-            "lng": 111.27506486550705
+            "lat": 28.448114220492698,
+            "lng": 112.66553537355738,
+            "type": 2
         },
         {
-            "lat": 26.797575266589366,
-            "lng": 112.95544441817016
+            "lat": 28.029880053805755,
+            "lng": 110.65768766387521,
+            "type": 3
         },
         {
-            "lat": 28.06510649599739,
-            "lng": 112.23260612017415
+            "lat": 28.286425774434964,
+            "lng": 112.95005860204083,
+            "type": 3
         },
         {
-            "lat": 28.276268879820808,
-            "lng": 113.5566704074559
+            "lat": 26.633054594733252,
+            "lng": 111.41378993514708,
+            "type": 5
         },
         {
-            "lat": 27.445894623998804,
-            "lng": 111.07961438015076
+            "lat": 27.300819470117105,
+            "lng": 113.37976860759782,
+            "type": 2
         },
         {
-            "lat": 27.28947788967259,
-            "lng": 110.77493884849662
+            "lat": 26.611035720726314,
+            "lng": 111.47039766622653,
+            "type": 4
         },
         {
-            "lat": 29.05897987557704,
-            "lng": 111.49134035695808
+            "lat": 27.21036216782838,
+            "lng": 111.52899921508633,
+            "type": 2
         },
         {
-            "lat": 26.8224671393802,
-            "lng": 110.58023122286951
+            "lat": 28.755973128328733,
+            "lng": 112.01295045966921,
+            "type": 2
         },
         {
-            "lat": 27.513479011899364,
-            "lng": 112.98159024989617
+            "lat": 27.90784994506349,
+            "lng": 111.51890943045431,
+            "type": 3
         },
         {
-            "lat": 27.00246322221352,
-            "lng": 113.6491559170961
+            "lat": 26.61362082713098,
+            "lng": 113.2566113964604,
+            "type": 5
         },
         {
-            "lat": 28.942609913244354,
-            "lng": 110.15383806858661
-        },
-        {
-            "lat": 28.402546808250868,
-            "lng": 110.0700520990526
-        },
-        {
-            "lat": 27.807940538054446,
-            "lng": 112.88446747505726
-        },
-        {
-            "lat": 28.94417552916714,
-            "lng": 112.5165752793697
-        },
-        {
-            "lat": 27.13009746171511,
-            "lng": 113.75810501150478
-        },
-        {
-            "lat": 28.557324689518204,
-            "lng": 112.53753690153492
-        },
-        {
-            "lat": 27.564975481311162,
-            "lng": 109.6901156672199
-        },
-        {
-            "lat": 28.346097973178658,
-            "lng": 111.65895050161117
-        },
-        {
-            "lat": 28.855957149146324,
-            "lng": 111.37353031166899
-        },
-        {
-            "lat": 26.819249960016098,
-            "lng": 109.74164465350843
-        },
-        {
-            "lat": 27.752835735823695,
-            "lng": 113.45219371384444
-        },
-        {
-            "lat": 27.992834969951137,
-            "lng": 110.23314121871505
-        },
-        {
-            "lat": 28.51967042626935,
-            "lng": 112.82142894857355
-        },
-        {
-            "lat": 29.2971262804539,
-            "lng": 113.21024192678459
-        },
-        {
-            "lat": 27.282985902649624,
-            "lng": 113.16517799835003
-        },
-        {
-            "lat": 26.67158461607174,
-            "lng": 111.53647073922524
-        },
-        {
-            "lat": 29.479602834048418,
-            "lng": 112.81707273188564
-        },
-        {
-            "lat": 29.00142261212031,
-            "lng": 111.39702130077795
-        },
-        {
-            "lat": 27.485113851521263,
-            "lng": 112.83384972845677
-        },
-        {
-            "lat": 28.179426345477324,
-            "lng": 110.13393093050266
-        },
-        {
-            "lat": 26.56407188129504,
-            "lng": 112.67186395947138
-        },
-        {
-            "lat": 29.258273759379737,
-            "lng": 112.12973003300476
-        },
-        {
-            "lat": 27.03882500744453,
-            "lng": 109.50959060443267
-        },
-        {
-            "lat": 28.40816195387489,
-            "lng": 111.04391776220838
-        },
-        {
-            "lat": 27.430502730510348,
-            "lng": 112.40174831028457
-        },
-        {
-            "lat": 27.15920076228186,
-            "lng": 110.50888260589409
-        },
-        {
-            "lat": 28.299454719696246,
-            "lng": 111.20961721412458
-        },
-        {
-            "lat": 29.406414756231072,
-            "lng": 111.79916476812703
-        },
-        {
-            "lat": 28.805903215386962,
-            "lng": 111.61372531474395
-        },
-        {
-            "lat": 26.780890811006756,
-            "lng": 111.01808769747794
-        },
-        {
-            "lat": 26.975770877444592,
-            "lng": 113.4660324068097
-        },
-        {
-            "lat": 27.70416832056594,
-            "lng": 112.30825616782504
-        },
-        {
-            "lat": 28.125832079947823,
-            "lng": 111.40891212196713
-        },
-        {
-            "lat": 26.901576718225908,
-            "lng": 110.5230881564203
-        },
-        {
-            "lat": 28.02819521999137,
-            "lng": 113.1091673497085
-        },
-        {
-            "lat": 27.261529413538987,
-            "lng": 111.22899832985814
-        },
-        {
-            "lat": 29.00539839958096,
-            "lng": 110.61349052557813
-        },
-        {
-            "lat": 28.093004622195103,
-            "lng": 112.98567806092547
-        },
-        {
-            "lat": 29.04164493831341,
-            "lng": 110.21818633013007
-        },
-        {
-            "lat": 28.713134556395513,
-            "lng": 113.00998302422919
-        },
-        {
-            "lat": 28.948457552160857,
-            "lng": 112.17912839470252
-        },
-        {
-            "lat": 28.769881652739777,
-            "lng": 110.46420807868725
-        },
-        {
-            "lat": 27.100338842701973,
-            "lng": 110.3255029635326
-        },
-        {
-            "lat": 29.187110479267943,
-            "lng": 110.74883897435642
-        },
-        {
-            "lat": 28.14291387271524,
-            "lng": 113.7525472540763
-        },
-        {
-            "lat": 27.296280491107805,
-            "lng": 111.95554221019799
-        },
-        {
-            "lat": 26.97065778141796,
-            "lng": 109.99407272218414
-        },
-        {
-            "lat": 26.770313786347423,
-            "lng": 109.79255408952697
-        },
-        {
-            "lat": 28.741262317348262,
-            "lng": 113.27600637767364
-        },
-        {
-            "lat": 27.510404733424902,
-            "lng": 109.58964581006036
-        },
-        {
-            "lat": 29.12918910476103,
-            "lng": 110.0402021453559
-        },
-        {
-            "lat": 27.34677229311988,
-            "lng": 112.16783753035432
-        },
-        {
-            "lat": 26.92229100734498,
-            "lng": 110.0555927764808
-        },
-        {
-            "lat": 28.21520385691384,
-            "lng": 113.0836780992955
-        },
-        {
-            "lat": 26.61482786056411,
-            "lng": 111.6263272648239
-        },
-        {
-            "lat": 28.874019826395216,
-            "lng": 111.74672694465622
+            "lat": 26.739067513718865,
+            "lng": 110.7925272311099,
+            "type": 1
         }
     ]
 }

src/components/baseEcharts/LinChart.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="container-echart">
-        <div :id="'echart' + timeId" class="interface-echart"></div>
-    </div>
+  <div class="container-echart">
+    <div :id="'echart' + timeId" class="interface-echart"></div>
+  </div>
 </template>
 <script lang="ts" setup>
 import * as echarts from 'echarts'
@@ -9,10 +9,10 @@ import { EChartsType } from 'echarts'
 import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 
 const props = defineProps({
-    message: {
-        type: Array,
-        default: true
-    }
+  message: {
+    type: Array,
+    default: true
+  }
 })
 let xAxisData: string[] = [];
 let data1: number[] = [];
@@ -21,144 +21,167 @@ let data3: number[] = [];
 let data4: number[] = [];
 
 for (let i = 0; i < 10; i++) {
-    xAxisData.push('201' + i);
-    data1.push(+(Math.random() * 2).toFixed(2));
-    data2.push(+(Math.random() * 5).toFixed(2));
-    data3.push(+(Math.random() + 0.3).toFixed(2));
-    data4.push(+Math.random().toFixed(2));
+  xAxisData.push('201' + i);
+  data1.push(+(Math.random() * 2).toFixed(2));
+  data2.push(+(Math.random() * 5).toFixed(2));
+  data3.push(+(Math.random() + 0.3).toFixed(2));
+  data4.push(+Math.random().toFixed(2));
 }
 
 var emphasisStyle = {
-    itemStyle: {
-        shadowBlur: 10,
-        shadowColor: 'rgba(0,0,0,0.3)'
-    }
+  itemStyle: {
+    shadowBlur: 10,
+    shadowColor: 'rgba(0,0,0,0.3)'
+  }
 };
 let myEchart: EChartsType
 const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
 const myEchartData = () => {
-    const option = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'cross',
-      label: {
-        backgroundColor: '#6a7985'
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
       }
-    }
-  },
-  legend: {
-    data: ['风力', '水利', '光伏', '煤']
-  },
-  toolbox: {
-    feature: {
-      saveAsImage: {}
-    }
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: [
-    {
-      type: 'category',
-      boundaryGap: false,
-      data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023']
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value'
-    }
-  ],
-  series: [
-    {
-      name: '风力',
-      type: 'line',
-      stack: 'Total',
-      areaStyle: {},
-      emphasis: {
-        focus: 'series'
-      },
-      data: [120, 132, 101, 134, 90, 230, 210]
     },
-    {
-      name: '水利',
-      type: 'line',
-      stack: 'Total',
-      areaStyle: {},
-      emphasis: {
-        focus: 'series'
-      },
-      data: [220, 182, 191, 234, 290, 330, 310]
+    legend: {
+      data: ['工业', '建筑', '交通', '教育'],
+      textStyle: {
+        color: 'white' // 设置字体颜色为红色
+      }
     },
-    {
-      name: '光伏',
-      type: 'line',
-      stack: 'Total',
-      areaStyle: {},
-      emphasis: {
-        focus: 'series'
-      },
-      data: [150, 232, 201, 154, 190, 330, 410]
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
     },
-    {
-      name: '煤',
-      type: 'line',
-      stack: 'Total',
-      areaStyle: {},
-      emphasis: {
-        focus: 'series'
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '工业',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+        data:  [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
       },
-      data: [320, 332, 301, 334, 390, 330, 320]
-    }
-  ]
-};
-    // { notMerge: true } 解决删除数据时,数据不刷新的问题
-    myEchart.setOption(option, { notMerge: true })
+      {
+        name: '建筑',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+        data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
+      },
+      {
+        name: '交通',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+        data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330, 310]
+      },
+      {
+        name: '教育',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+        data: [320, 332, 301, 334, 390, 330, 320, 191, 234, 290, 330, 310]
+      }
+    ]
+  };
+  // { notMerge: true } 解决删除数据时,数据不刷新的问题
+  myEchart.setOption(option, { notMerge: true })
 }
 watch(
-    //监控数据变化
-    () => props.message,
-    () => {
-        setTimeout(() => {
-            myEchartData()
-        }, 500)
-    },
-    { deep: true }
-)
-onMounted(() => {
+  //监控数据变化
+  () => props.message,
+  () => {
     setTimeout(() => {
-        const dom = document.getElementById(`echart${timeId.value}`) as any
-        myEchart = echarts.init(dom)
-        myEchartData()
+      myEchartData()
     }, 500)
+  },
+  { deep: true }
+)
+onMounted(() => {
+  setTimeout(() => {
+    const dom = document.getElementById(`echart${timeId.value}`) as any
+    myEchart = echarts.init(dom)
+    myEchartData()
+  }, 500)
 
-    // 当窗口发生变化时
-    window.addEventListener('resize', () => {
-        myEchart.resize()
-    })
+  // 当窗口发生变化时
+  window.addEventListener('resize', () => {
+    myEchart.resize()
+  })
 })
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', () => {
-        myEchart.resize()
-    })
+  window.removeEventListener('resize', () => {
+    myEchart.resize()
+  })
 })
 </script>
 <style scoped lang="scss">
 .container-echart {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
 }
 
 .interface-echart {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>

src/components/baseEcharts/barChart.vue

@@ -40,7 +40,10 @@ const myEchartData = () => {
     const option = {
         legend: {
             data: ['煤气', '电力', '天然气', '水利'],
-            left: '10%'
+            left: '10%',
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
         },
         brush: {
             toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],

src/components/baseEcharts/dlzjlEcharts.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+let xAxisData: string[] = [];
+let data1: number[] = [];
+let data2: number[] = [];
+let data3: number[] = [];
+let data4: number[] = [];
+
+for (let i = 0; i < 10; i++) {
+    xAxisData.push('201' + i);
+    data1.push(+(Math.random() * 2).toFixed(2));
+    data2.push(+(Math.random() * 5).toFixed(2));
+    data3.push(+(Math.random() + 0.3).toFixed(2));
+    data4.push(+Math.random().toFixed(2));
+}
+
+var emphasisStyle = {
+    itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0,0,0,0.3)'
+    }
+};
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        legend: {
+            data: ['省总用电量'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top:'3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value'
+            }
+        ],
+        series: [
+            {
+                name: '省用电量',
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
+            },
+            {
+                name: '省发电量',
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [200, 100, 100, 120, 110, 150, 120, 130, 140, 110, 120, 140]
+            }
+        ]
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/baseEcharts/nyxfzlChart.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        title: {
+            text: '能源消费总量',
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['一次能源消费量', '二次能源消费量'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                name: '一次能源消费量',
+                type: 'line',
+                stack: 'Total',
+                data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
+            },
+            {
+                name: '二次能源消费量',
+                type: 'line',
+                stack: 'Total',
+                data: [120, 132, 101, 134, 90, 230, 210, 301, 334, 390, 330, 320]
+            }
+        ]
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/baseEcharts/pieChart.vue

@@ -22,10 +22,10 @@
 			tooltip: {
 				show: true,
 				trigger: 'item',
-				formatter: "{b}: {c}台   ({d}%)"
+				formatter: "{b}: {c}   ({d}%)"
 			},
 			title: {
-				text: '设备数量',
+				text: '总数额',
 				subtext: '451',
 				x: 'center',
 				y: '100',
@@ -43,7 +43,7 @@
 				{
 					name: 'Access From',
 					type: 'pie',
-					radius: ['60%', '80%'],
+					radius: ['50%', '80%'],
 					avoidLabelOverlap: false,
 					itemStyle: {
 						borderRadius: 10,

src/components/baseEcharts/sjfdjjgChart.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+let xAxisData: string[] = [];
+let data1: number[] = [];
+let data2: number[] = [];
+let data3: number[] = [];
+let data4: number[] = [];
+
+for (let i = 0; i < 10; i++) {
+    xAxisData.push('201' + i);
+    data1.push(+(Math.random() * 2).toFixed(2));
+    data2.push(+(Math.random() * 5).toFixed(2));
+    data3.push(+(Math.random() + 0.3).toFixed(2));
+    data4.push(+Math.random().toFixed(2));
+}
+
+var emphasisStyle = {
+    itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0,0,0,0.3)'
+    }
+};
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999'
+                }
+            }
+        },
+        legend: {
+            data: ['发电量', '光伏发电', '风力发电','水力发电','火力发电'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+                axisPointer: {
+                    type: 'shadow'
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '发电量',
+                min: 0,
+                interval: 50,
+                axisLabel: {
+                    formatter: '{value}'
+                }
+            },
+        ],
+        series: [
+            {
+                name: '光伏发电',
+                type: 'bar',
+                stack: 'Ad',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
+            },
+            {
+                name: '风力发电',
+                type: 'bar',
+                stack: 'Ad',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 30, 30, 30, 90, 30, 20, 30, 40, 50, 30, 20]
+            },
+            {
+                name: '水力发电',
+                type: 'bar',
+                stack: 'Ad',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 30, 30, 30, 90, 30, 20, 30, 40, 50, 30, 20]
+            },
+            {
+                name: '火力发电',
+                type: 'bar',
+                stack: 'Ad',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 30, 30, 30, 90, 30, 20, 30, 40, 70, 10, 20]
+            },
+            {
+                name: '发电量',
+                type: 'line',
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' KWH';
+                    }
+                },
+                data: [80, 100, 120, 110, 280, 140, 80, 120, 160, 180, 90, 100]
+            }
+        ]
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/baseEcharts/sjydlEcharts.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+let xAxisData: string[] = [];
+let data1: number[] = [];
+let data2: number[] = [];
+let data3: number[] = [];
+let data4: number[] = [];
+
+for (let i = 0; i < 10; i++) {
+    xAxisData.push('201' + i);
+    data1.push(+(Math.random() * 2).toFixed(2));
+    data2.push(+(Math.random() * 5).toFixed(2));
+    data3.push(+(Math.random() + 0.3).toFixed(2));
+    data4.push(+Math.random().toFixed(2));
+}
+
+var emphasisStyle = {
+    itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0,0,0,0.3)'
+    }
+};
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+            }
+        },
+        legend: {
+            data: ['省总用电量'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                boundaryGap: false,
+                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value'
+            }
+        ],
+        series: [
+            {
+                name: '省总用电量',
+                type: 'bar',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                tooltip: {
+                    valueFormatter: function (value) {
+                        return value + ' Kwh';
+                    }
+                },
+                data: [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
+            }
+        ]
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/baseEcharts/tpfzlChart.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        tooltip: {
+        trigger: 'axis',
+        formatter: function (params) {
+            // params 是一个数组，数组中包含每个系列的数据信息
+            console.log(params)
+            let result = `${params[0].axisValue}<br/>`;
+            let tolValue = 0
+            params.forEach(function (item) {
+                tolValue += item.value;
+                // item 是每一个系列的数据
+                const seriesName = item.seriesName; // 系列名称
+                const value = item.value; // 数据值
+                const marker = item.marker; // 标志图形
+                result += `${marker}${seriesName}: ${value}  ${'（CO2e）'}<br/>`;
+            });
+            return result + '合计：' + tolValue + '（CO2e）';
+        }
+    },
+        legend: {
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value'
+        },
+        yAxis: {
+            type: 'category',
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月','十一月','十二月']
+        },
+        series: [
+            {
+                name: '水利',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 302, 301, 334, 390, 330, 320,301, 334, 390, 330, 320]
+            },
+            {
+                name: '煤气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [120, 132, 101, 134, 90, 230, 210,301, 334, 390, 330, 320]
+            },
+            {
+                name: '天然气',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 330, 310,301, 334, 390, 330, 320]
+            },
+            {
+                name: '电力',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 212, 201, 154, 190, 330, 410,301, 334, 390, 330, 320]
+            },
+            {
+                name: '民用',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: true
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [820, 832, 901, 934, 1290, 1330, 1320,301, 334, 390, 330, 320]
+            }
+        ]
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/baseEcharts/zslyzbEcharts.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    message: {
+        type: Array,
+        default: true
+    }
+})
+let xAxisData: string[] = [];
+let data1: number[] = [];
+let data2: number[] = [];
+let data3: number[] = [];
+let data4: number[] = [];
+
+for (let i = 0; i < 10; i++) {
+    xAxisData.push('201' + i);
+    data1.push(+(Math.random() * 2).toFixed(2));
+    data2.push(+(Math.random() * 5).toFixed(2));
+    data3.push(+(Math.random() + 0.3).toFixed(2));
+    data4.push(+Math.random().toFixed(2));
+}
+
+var emphasisStyle = {
+    itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0,0,0,0.3)'
+    }
+};
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        angleAxis: {},
+        tooltip: {
+            trigger: 'item'
+        },
+        radiusAxis: {
+            type: 'category',
+            data: ['再生能源占比'],
+            z: 10
+        },
+        polar: {},
+        series: [
+            {
+                type: 'bar',
+                data: [20],
+                coordinateSystem: 'polar',
+                name: '风力发电',
+                emphasis: {
+                    focus: 'series'
+                }
+            },
+            {
+                type: 'bar',
+                data: [10],
+                coordinateSystem: 'polar',
+                name: '光伏发电',
+                emphasis: {
+                    focus: 'series'
+                }
+            }, {
+                type: 'bar',
+                data: [50],
+                coordinateSystem: 'polar',
+                name: '火力发电',
+                emphasis: {
+                    focus: 'series'
+                }
+            }, {
+                type: 'bar',
+                data: [100],
+                coordinateSystem: 'polar',
+                name: '总发电量',
+                emphasis: {
+                    focus: 'series'
+                }
+            }
+        ],
+        legend: {
+            show: true,
+            data: ['风力发电', '光伏发电', '火力发电', '总发电量'],
+            textStyle: {
+                color: 'white' // 设置字体颜色为红色
+            }
+        }
+    };
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+watch(
+    //监控数据变化
+    () => props.message,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/visualization/index.vue

@@ -2,6 +2,12 @@
 	<div class="Vbox">
 		<div class="head">
 			<div class="VisTitle"></div>
+			<div class="Vgradation">
+				<div class="tab" v-for="(item, index) in HeadgradationMun" :key="index"
+					:class="{ active: headactiveTab === index }" @click="HeadsetActiveTab(index, item)">
+					{{ item.name }}
+				</div>
+			</div>
 		</div>
 		<div class="container">
 			<div class="center">
@@ -10,18 +16,18 @@
 			<div class="left" v-if="activeTab === 0">
 				<div class="rightParkBox">
 					<div class="rightParkTtile">
-						<div>整体指标</div>
-						<div @click="dialogTableVisible = true">列表配置></div>
+						<div>碳排放比例</div>
+						<div @click="dialogTableVisible = true">详细数据></div>
 					</div>
 					<div class="rightParkContent">
 						<div class="SBZT_right">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/onLine.png" alt="" />
-								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">煤气:351</div>
+								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">煤气:351(万)</div>
 							</div>
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/offline.png" alt="" />
-								<div style="color: #ccc;font-size: 20px;font-weight: bold;">电力:20</div>
+								<div style="color: #ccc;font-size: 20px;font-weight: bold;">电力:20(万)</div>
 							</div>
 						</div>
 						<div class="SBZT_center">
@@ -30,120 +36,60 @@
 						<div class="SBZT_left">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/warn.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">天然气:50</div>
+								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">天然气:50(万)</div>
 							</div>
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/fault.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">水利:30</div>
+								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">水利:30(万)</div>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="leftTwoBox">
-					<div class="leftGDPTitle">碳排放监测</div>
+					<div class="leftGDPTitle">能耗强度</div>
 					<div class="leftGDPContent">
-						
+
 						<div class="SBZT_center">
 							<BarEcharts :message="PieChartData"></BarEcharts>
 						</div>
 					</div>
 				</div>
 				<div class="leftThreeBox">
-					<div class="leftTaxationTitle">能耗排名</div>
-					<el-scrollbar height="calc(100% - 40px)">
-						<div class="leftTaxationContent">
-							<div class="GJXX_table">
-								<div class="GJXX_name" v-for="(item, index) in GJXXData"
-									:style="{ backgroundImage: 'url(' + item.img + ')' }">
-									<div class="">
-										{{ item.id }}
-									</div>
-									<div class="">
-										{{ item.text }}
-									</div>
-									<div class="" style='cursor:pointer;'>
-										{{ item.stateData }}
-									</div>
-								</div>
-							</div>
+					<div class="leftTaxationTitle">碳排放强度</div>
+					<!-- <el-scrollbar height="calc(100% - 40px)"> -->
+					<div class="leftTaxationContent" style="height:calc(100% - 40px)">
+						<div class="GJXX_table" style="height:100%;">
+							<BarEcharts :message="PieChartData"></BarEcharts>
 						</div>
-					</el-scrollbar>
+					</div>
+					<!-- </el-scrollbar> -->
 				</div>
 			</div>
 
 			<div class="left" v-if="activeTab === 1">
 				<div class="rightParkBox">
 					<div class="rightParkTtile">
-						<div>省级风电设备</div>
-						<div @click="dialogTableVisible = true">列表配置></div>
+						<div>省级发电及结构</div>
 					</div>
 					<div class="rightParkContent">
-						<div class="SBZT_right">
-							<div class="SBZT_onLine">
-								<img src="../../assets/visualizationimg/onLine.png" alt="" />
-								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">运行:351</div>
-							</div>
-							<div class="SBZT_onLine">
-								<img src="../../assets/visualizationimg/offline.png" alt="" />
-								<div style="color: #ccc;font-size: 20px;font-weight: bold;">安装:20</div>
-							</div>
-						</div>
 						<div class="SBZT_center">
-							<PieEcharts :message="PieChartData"></PieEcharts>
-						</div>
-						<div class="SBZT_left">
-							<div class="SBZT_onLine">
-								<img src="../../assets/visualizationimg/warn.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">故障:50</div>
-							</div>
-							<div class="SBZT_onLine">
-								<img src="../../assets/visualizationimg/fault.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">维修:30</div>
-							</div>
+							<sjfdjjgChart :message="PieChartData"></sjfdjjgChart>
 						</div>
 					</div>
 				</div>
 				<div class="leftTwoBox">
-					<div class="leftGDPTitle">可再生资源年产值</div>
+					<div class="leftGDPTitle">行业用电里</div>
 					<div class="leftGDPContent">
-						
 						<div class="SBZT_center">
-							<!-- <BarEcharts :message="PieChartData"></BarEcharts> -->
-							<LinEcharts :message="PieChartData"></LinEcharts>
+							<LinEcharts></LinEcharts>
 						</div>
 					</div>
 				</div>
 				<div class="leftThreeBox">
-					<div class="leftTaxationTitle">水库产值排名</div>
-					<el-scrollbar height="calc(100% - 40px)">
-						<div class="leftTaxationContent">
-							<div class="GJXX_table">
-								<div class="GJXX_name" style="font-size: 20px;">
-									<div class="">
-										排名
-									</div>
-									<div class="">
-										名称
-									</div>
-									<div class="">
-										产能
-									</div>
-								</div>
-								<div class="GJXX_name" v-for="(item, index) in GJXXData"
-									:style="{ backgroundImage: 'url(' + item.img + ')' }">
-									<div class="">
-										{{ item.id }}
-									</div>
-									<div class="">
-										水库名称{{ item.id }}
-									</div>
-									<div class="" style='cursor:pointer;'>
-										54525
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-scrollbar>
+					<div class="leftTaxationTitle">省级用电量</div>
+					<div class="leftTaxationContent" style="height:calc(100% - 40px)">
+						<sjydlEcharts></sjydlEcharts>
+					</div>
 				</div>
 			</div>
 
@@ -158,9 +104,9 @@
 
 			<div class="right" v-if="activeTab === 0">
 				<div class="leftOneBox">
-					<div class="leftOBTitle">运行状态</div>
+					<div class="leftOBTitle">能源消费总量</div>
 					<div class="leftOBContent">
-						<div class="SBZT_right">
+						<!-- <div class="SBZT_right">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/kq.png" alt="" />
 								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">开启:351</div>
@@ -169,11 +115,11 @@
 								<img src="../../assets/visualizationimg/hd.png" alt="" />
 								<div style="color: #ccc;font-size: 20px;font-weight: bold;">晃动:20</div>
 							</div>
-						</div>
+						</div> -->
 						<div class="SBZT_center">
-							<PieEcharts :message="PieChartDataTwo"></PieEcharts>
+							<nyxfzlChart></nyxfzlChart>
 						</div>
-						<div class="SBZT_left">
+						<!-- <div class="SBZT_left">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/qs.png" alt="" />
 								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">潜水:50</div>
@@ -182,106 +128,73 @@
 								<img src="../../assets/visualizationimg/fg.png" alt="" />
 								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">翻盖:30</div>
 							</div>
-						</div>
+						</div> -->
 					</div>
 				</div>
 				<div class="leftTwo_GDCL">
-					<div class="leftOBTitle">碳排放量</div>
-					<el-scrollbar height="calc(100% - 90px)">
-						<div class="GJXX_table">
-							<div class="GJXX_name" v-for="(item, index) in GDCLData" :key="index"
-								:style="{ backgroundImage: 'url(' + item.img + ')' }">
-								
-								<!-- :class="{ 'active': item.stateNumber === 0 }" -->
-								<div class="">
-									{{ item.id }}
-								</div>
-								<div class="">
-									{{ item.text }}
-								</div>
-								<div class="">
-									{{ item.text }}
-								</div>
-								<div class="">
-									{{ item.stateData }}
-								</div>
-							</div>
-						</div>
-					</el-scrollbar>
+					<div class="leftOBTitle">碳排总放量</div>
+					<!-- <el-scrollbar height="calc(100% - 90px)"> -->
+					<div class="GJXX_table" style="height:calc(100% - 90px)">
+						<tpfzlChart :message="PieChartDataTwo"></tpfzlChart>
+					</div>
+					<!-- </el-scrollbar> -->
 				</div>
 			</div>
 
-			<div class="right" v-if="activeTab === 1">
-				<div class="leftOneBox">
-					<div class="leftOBTitle">省级光伏设备</div>
-					<div class="leftOBContent">
+			<div class="right" v-if="activeTab === 1" style="display:block">
+				<div class="leftOneBox" style="height:30%">
+					<div class="leftOBTitle">省级电源装机容量及结构</div>
+
+					<div class="leftOBContent" style="display:flex">
 						<div class="SBZT_right">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/kq.png" alt="" />
-								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">开启:351</div>
+								<div style="color: #44eefb;font-size: 20px;font-weight: bold;">火力发电:351</div>
 							</div>
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/hd.png" alt="" />
-								<div style="color: #ccc;font-size: 20px;font-weight: bold;">晃动:20</div>
+								<div style="color: #ccc;font-size: 20px;font-weight: bold;">光伏发电:20</div>
 							</div>
 						</div>
 						<div class="SBZT_center">
-							<PieEcharts :message="PieChartDataTwo"></PieEcharts>
+							<PieEcharts :message="PieChartDataTwoTwo"></PieEcharts>
 						</div>
 						<div class="SBZT_left">
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/qs.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">潜水:50</div>
+								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">风力发电:50</div>
 							</div>
 							<div class="SBZT_onLine">
 								<img src="../../assets/visualizationimg/fg.png" alt="" />
-								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">翻盖:30</div>
+								<div style="color: #5470c6;font-size: 20px;font-weight: bold;">水力发电:30</div>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="leftTwo_GDCL">
-					<div class="leftOBTitle">地区光伏产能</div>
-					<el-scrollbar height="calc(100% - 90px)">
-						<div class="GJXX_table">
-							<div class="GJXX_name" style="font-size: 18px;">
-									<div class="">
-										名称
-									</div>
-									<div class="">
-										光伏数量
-									</div>
-									<div class="">
-										产能
-									</div>
-								</div>
-
-							<div class="GJXX_name" v-for="(item, index) in GDCLData" :key="index"
-								:style="{ backgroundImage: 'url(' + item.img + ')' }"
-								style="font-weight: bold;">
-								<div class="">
-									地区{{ item.id }}
-								</div>
-								<div class="">
-									101
-								</div>
-								<div class="">
-									{{ item.text }}
-								</div>
-							</div>
-						</div>
-					</el-scrollbar>
+				<div class="leftTwo_GDCL" style="height:30%">
+					<div class="leftOBTitle">再生能源电力占比</div>
+					<div class="GJXX_table" style="height:calc(100% - 40px)">
+						<zslyzbEcharts></zslyzbEcharts>
+
+					</div>
+				</div>
+
+				<div class="leftTwo_GDCL" style="height:30%">
+					<div class="leftOBTitle">电力自给率</div>
+					<div class="GJXX_table" style="height:calc(100% - 40px)">
+						<dlzjlEcharts></dlzjlEcharts>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<el-dialog v-model="dialogTableVisible" title="设备列表">
+	<el-dialog v-model="dialogTableVisible" title="详细数据">
 		<el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
 			<el-table-column prop="id" label="序号" width="80" />
 			<el-table-column prop="SBBH" label="设备编号" />
 			<el-table-column prop="address" label="地址" width="300" />
 			<el-table-column prop="tag" label="状态" :filters="[
-				{ text: '在线', value: 'onLine' },
+				{ text: '正常', value: 'onLine' },
 				{ text: '离线', value: 'offLine' },
 				{ text: '故障', value: 'fault' },
 				{ text: '告警', value: 'alarm' },
@@ -316,10 +229,22 @@ import {
 import PieEcharts from '@/components/baseEcharts/pieChart.vue'
 import BarEcharts from '@/components/baseEcharts/barChart.vue'
 import LinEcharts from '@/components/baseEcharts/LinChart.vue'
+import nyxfzlChart from '@/components/baseEcharts/nyxfzlChart.vue'
+import tpfzlChart from '@/components/baseEcharts/tpfzlChart.vue'
+import sjfdjjgChart from '@/components/baseEcharts/sjfdjjgChart.vue'
+import sjydlEcharts from '@/components/baseEcharts/sjydlEcharts.vue'
+import dlzjlEcharts from '@/components/baseEcharts/dlzjlEcharts.vue'
+import zslyzbEcharts from '@/components/baseEcharts/zslyzbEcharts.vue'
+
 
 import GJXXYCL from '@/assets/visualizationimg/GJXXYCL.png';
 import GJXXDCL from '@/assets/visualizationimg/GJXXDCL.png';
 import ALL from '@/assets/visualizationimg/allh.png';
+
+import MQ from '@/assets/visualizationimg/MQ.png';
+import TRQ from '@/assets/visualizationimg/TRQ.png';
+import SY from '@/assets/visualizationimg/SY.png';
+import GT from '@/assets/visualizationimg/GT.png';
 const mapContainer = ref(null);
 const dialogTableVisible = ref(false)
 
@@ -331,6 +256,29 @@ const filterHandler = (value, row, column) => {
 	return row[property] === value
 }
 
+
+const HeadgradationMun = [{
+	name: "全部",
+	state: 0,
+	type: 0
+}, {
+	name: "煤气",
+	state: 1,
+	type: 1
+}, {
+	name: "石油",
+	state: 2,
+	type: 2
+}, {
+	name: "天然气",
+	state: 3,
+	type: 3
+}, {
+	name: "钢铁",
+	state: 4,
+	type: 4
+}]
+
 const tableData = [{
 	id: 1,
 	SBBH: 'ZTD95588',
@@ -424,6 +372,20 @@ const PieChartDataTwo = [{
 	name: '翻盖'
 }]
 
+const PieChartDataTwoTwo = [{
+	value: 50,
+	name: '风力发电'
+}, {
+	value: 20,
+	name: '光伏发电'
+}, {
+	value: 351,
+	name: '火力发电'
+}, {
+	value: 30,
+	name: '水力发电'
+}]
+
 const JgjkData = [{
 	value: 351,
 	name: '一号监控'
@@ -497,78 +459,79 @@ const GJXXData = [{
 }]
 
 const GDCLData = [{
-	id: 2010+'年',
+	id: 2010 + '年',
 	stateData: '工业',
 	stateNumber: 1,
 	text: '24501',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '电力',
 	stateNumber: 1,
 	text: '24501',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '24501',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '运输',
 	stateNumber: 1,
 	text: '24501',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '工业',
 	stateNumber: 1,
 	text: '24501',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '电力',
 	stateNumber: 1,
 	text: '12123',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '23435',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '运输',
 	stateNumber: 1,
 	text: '23435',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '634324',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '232423',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '642432',
 	img: GJXXYCL
-},{
-	id: 2010+'年',
+}, {
+	id: 2010 + '年',
 	stateData: '风力',
 	stateNumber: 1,
 	text: '2423542',
 	img: GJXXYCL
 }]
+const headactiveTab = ref(0); // 默认激活第一个tab  
 const activeTab = ref(0); // 默认激活第一个tab  
 const jgjkactiveTab = ref(0); // 默认激活第一个tab
 let IMGICon = ALL;
@@ -576,6 +539,7 @@ let IMGICon = ALL;
 let map = null;
 let marker = null;
 let ttwo = [];
+let points = [];
 var whiteLayer = new mapvgl.HeatPointLayer({
 	blend: 'lighter',
 	style: 'grid',
@@ -602,42 +566,75 @@ var yellowLayer = new mapvgl.HeatPointLayer({
 		1: 'rgb(239, 209, 19, 0.9)'
 	}
 });
+
+
+const HeadsetActiveTab = (index, value) => {
+	//获取地图上所有的覆盖物
+	var allOverlay = map.getOverlays();
+
+	console.log(111, value, points)
+	let statev = value.type;
+	for (var i = 0; i < allOverlay.length; i++) {
+		console.log(11, allOverlay[i].toString())
+		if (allOverlay[i].toString() == "Marker") {
+			map.removeOverlay(allOverlay[i]);
+		}
+	}
+	getImgType(statev);
+	headactiveTab.value = index;
+};
 const setActiveTab = (index, value) => {
 	activeTab.value = index;
-	// map.clearOverlays();
-	let proname = '湖南省'
-	let prokind = 1
-	let dist = null
+	headactiveTab.value = 0;
 	if (value.type === 'B') {
 		addRelitu();
 		getImgType()
 
-		// addDis(proname, prokind, dist)
 	} else if (value.type === 'A') {
 		getImgType()
-		// addDis(proname, prokind, dist)
 		whiteLayer.setData([])
 		yellowLayer.setData([])
-		// HeatPointLayer.removeDistrictLayer(yellowLayer)
 	}
 };
 
-const JgjksetActiveTab = (index, value) => {
-	jgjkactiveTab.value = index;
-};
-
-
 //添加区域点
-const getImgType = () => {
+const getImgType = (getImgTypestate = 0) => {
 	if (activeTab.value == '0') {
 		fetch('hunanzuobiaotu.json').then(response => response.json()).then(data => {
-			let points = data.list;
-			// for (var j = 0; j < points.length; j++) {
+			if (getImgTypestate == 0) {
+				points = data.list;
+			} else {
+				points = []
+				for (var i = 0; i < data.list.length; i++) {
+					if (data.list[i].type == getImgTypestate) {
+						points.push(data.list[i])
+					}
+				}
+			}
 			for (var j = 0; j < points.length; j++) {
 				var lng = points[j].lng;
 				var lat = points[j].lat;
 				let markers = new BMapGL.Point(lng, lat)
-
+				let pointsType = points[j].type;
+				let aa = ''
+				switch (pointsType) {
+					case 1:
+						IMGICon = MQ;
+						aa = "煤气"
+						break;
+					case 2:
+						IMGICon = SY;
+						aa = "石油"
+						break;
+					case 3:
+						IMGICon = TRQ;
+						aa = "天然气"
+						break;
+					case 4:
+						IMGICon = GT;
+						aa = "钢铁"
+						break;
+				}
 				var icon = new BMapGL.Icon(IMGICon, new BMapGL.Size(23, 25), {
 					anchor: new BMapGL.Size(10, 25),
 				});
@@ -647,17 +644,18 @@ const getImgType = () => {
 				// 创建信息窗口
 				var opts = {
 					width: 300,
-					// height: 100,
 					title: '艾欧里特种玻璃有限公司'
 				};
-				var infoWindow = new BMapGL.InfoWindow("排放总量：" + '1880' + "<br/>" +
-					"煤排放：" + '3.6' + "<br/>" +
-					"信噪比：" + '16db' + "<br/>" +
-					"负责人：" + '张三' + "<br/>" +
-					"联系方式：" + '121234564', opts);
 				// 点标记添加点击事件
 				marker.addEventListener('click', function (e) {
-					map.openInfoWindow(infoWindow, markers); // 开启信息窗口
+					// console.log(e, pointsType)
+					map.openInfoWindow(new BMapGL.InfoWindow(
+						"排放总量：" + '1880' + "<br/>" +
+						"类型：" + aa + "<br/>" +
+						"能源消费总量：" + '3.6' + "<br/>" +
+						"信噪比：" + '16db' + "<br/>" +
+						"负责人：" + '张三' + "<br/>" +
+						"联系方式：" + '121234564', opts), markers); // 开启信息窗口
 				});
 				map.addOverlay(marker);
 				ttwo.push(marker)
@@ -672,6 +670,56 @@ const getImgType = () => {
 
 }
 
+
+const createDOM = (config) => {
+	var canvas = document.createElement('canvas');
+	var dpr = window.devicePixelRatio || 1;
+	canvas.style.width = 150 + 'px'
+	canvas.style.height = 150 + 'px'
+	canvas.setAttribute('width', 150 * dpr);
+	canvas.setAttribute('height', 150 * dpr);
+
+	var ctx = canvas.getContext('2d');
+	ctx.scale(dpr, dpr);
+	ctx.save();
+	ctx.beginPath();
+	ctx.fillStyle = '#fff';
+	ctx.arc(75, 75, 40, 0, Math.PI * 2, true);
+	ctx.closePath();
+	ctx.fill();
+
+	ctx.save();
+	ctx.beginPath();
+	ctx.translate(75, 75);
+	ctx.rotate(0.6 * Math.PI);
+	ctx.lineWidth = config.lineWidth;
+	ctx.lineCap = 'round';
+	ctx.strokeStyle = config.bgBase;
+	ctx.arc(0, 0, config.radius, 0, 1.8 * Math.PI);
+	ctx.stroke();
+	ctx.beginPath();
+	ctx.arc(0, 0, config.radius, 0, 1.8 * Math.PI * config.data);
+	ctx.strokeStyle = config.bgFill;
+	ctx.stroke();
+	ctx.restore();
+
+	ctx.save();
+	ctx.beginPath();
+	ctx.fillStyle = '#000';
+	ctx.font = '26px Arial';
+	ctx.textAlign = 'center';
+	ctx.textBaseline = 'middle';
+	ctx.fillText(config.data * 100 + '%', config.width * 1.5, config.height * 1.5);
+	ctx.restore();
+
+	return canvas;
+}
+// 绑定点击事件
+// customOverlay.addEventListener('click', function (e) {
+// 	var data = e.target.properties.data * 100;
+// 	alert(data);
+// });
+
 // --- 添加行政区 ---
 const addDis = (proname, prokind, dist) => {
 	// map.removeDistrictLayer(dist);
@@ -737,6 +785,8 @@ onMounted(async () => {
 	var prokind = 1;
 	var dist = null;
 	map.centerAndZoom(point, 7); // 初始化地图,设置中心点坐标和地图级别
+
+	map.enableKeyboard();
 	map.enableScrollWheelZoom(true);
 	map.setMaxZoom(19);
 	map.setMapStyleV2({
@@ -748,13 +798,89 @@ onMounted(async () => {
 
 	map.addControl(zoomCtrl);
 
+	// 实例化自定义canvas图层
+	var canvasLayer = new BMapGL.CustomHtmlLayer(createDOM, {
+		offsetX: 0,
+		offsetY: 0,
+		minZoom: 10,
+		maxZoom: 19,
+		enableDraggingMap: true
+	});
+	var data = {
+		type: 'FeatureCollection',
+		features: [
+			{
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [113.038599, 28.136759]
+				},
+				properties: {
+					width: 50,
+					height: 50,
+					radius: 50,
+					lineWidth: 20,
+					bgBase: '#add',
+					bgFill: '#9d55ef',
+					data: 0.5
+				}
+			},
+			{
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [113.234714, 28.342484]
+				},
+				properties: {
+					width: 50,
+					height: 50,
+					radius: 50,
+					lineWidth: 20,
+					bgBase: '#add',
+					bgFill: '#91cc75',
+					data: 0.3
+				}
+			},
+			{
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: [112.825298, 28.351380]
+				},
+				properties: {
+					width: 50,
+					height: 50,
+					radius: 50,
+					lineWidth: 20,
+					bgBase: '#add',
+					bgFill: 'red',
+					data: 0.8
+				}
+			}
+		]
+	};
+	canvasLayer.setData(data);
+	// 添加自定义canvas图层到地图上
+	map.addCustomHtmlLayer(canvasLayer);
+
+
 	map.addEventListener("click", function (e) {
-		getImgType()
+		// getImgType()
 		if (e.overlay) {
 			console.log('你点击的是覆盖物:' + e.overlay.toString());
 		} else {
 			// 点击的是地图本身
-			map.clearOverlays();
+			// map.clearOverlays();
+			var allOverlay = map.getOverlays();
+
+			console.log(111, allOverlay);
+			for (var i = 0; i < allOverlay.length; i++) {
+				console.log(11, allOverlay[i].toString())
+				if (allOverlay[i].toString() == "Polygon") {
+					map.removeOverlay(allOverlay[i]);
+				}
+			}
+
 			var pt = e.latlng; // 获取点击位置的点坐标
 			var geoc = new BMapGL.Geocoder(); // 创建地址解析器实例
 			geoc.getLocation(pt, function (rs) {
@@ -773,8 +899,6 @@ onMounted(async () => {
 			});
 		}
 	});
-
-
 	// 导入JSON文件
 	try {
 		addDis(proname, prokind, dist);
@@ -835,6 +959,34 @@ onMounted(async () => {
 			height: 60px;
 			background-image: url("../../assets/visualizationimg/title.png");
 		}
+
+
+		.Vgradation {
+			height: 60px;
+			width: 40vw;
+			margin-left: 30vw;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.tab {
+				width: 100px;
+				height: 40px;
+				margin: 0 10px;
+				text-align: center;
+				line-height: 40px;
+				color: white;
+				font-weight: 500;
+				font-size: 0.9vw;
+				background-image: url("../../assets/visualizationimg/headg.png");
+				background-size: 100% 100%;
+			}
+
+			.active {
+				background-image: url("../../assets/visualizationimg/headgactive.png");
+				background-size: 100% 100%;
+			}
+		}
 	}
 
 	.container {
@@ -959,7 +1111,7 @@ onMounted(async () => {
 				.leftGDPContent {
 					height: calc(100% - 40px);
 
-					
+
 					.SBZT_center {
 						flex: 2;
 						height: 100%;
@@ -991,7 +1143,6 @@ onMounted(async () => {
 				}
 
 				.leftTaxationContent {
-					height: calc(100% - 40px);
 
 					.GJXX_table {
 						display: flex;