提交可视化

public/jwdata.json

@@ -1,422 +1,422 @@
 [
-    "109.93408115,27.41951379",
-    "109.93275954,27.41992023",
-    "109.93186919,27.41875939",
-    "109.93149617,27.4177294",
-    "109.93173493,27.41680863",
-    "109.93205427,27.41547843",
-    "109.93198641,27.41444598",
-    "109.9316697,27.41351241",
-    "109.931353,27.41257884",
-    "109.93061442,27.41145749",
-    "109.92940846,27.41036332",
-    "109.92820252,27.40926915",
-    "109.92715771,27.40811313",
-    "109.92611293,27.40695711",
-    "109.92501629,27.40645319",
-    "109.92391966,27.40594926",
-    "109.92263274,27.40552832",
-    "109.92134583,27.40510738",
-    "109.92005893,27.40468642",
-    "109.91879885,27.40424953",
-    "109.91753879,27.40381262",
-    "109.91620662,27.40291384",
-    "109.9153259,27.40174314",
-    "109.9144452,27.40057244",
-    "109.9142929,27.39942089",
-    "109.91414059,27.39826934",
-    "109.91376081,27.39692517",
-    "109.91338575,27.39593025",
-    "109.9130107,27.39493532",
-    "109.9127901,27.39390485",
-    "109.9125695,27.39287438",
-    "109.91239932,27.39189468",
-    "109.91222915,27.39091497",
-    "109.91222879,27.39007672",
-    "109.91222844,27.38923848",
-    "109.91239982,27.3882851",
-    "109.91257119,27.38733173",
-    "109.91293154,27.38631957",
-    "109.91329187,27.3853074",
-    "109.91426215,27.38398669",
-    "109.91560598,27.38285409",
-    "109.91657677,27.38232734",
-    "109.91754755,27.38180057",
-    "109.91859577,27.38123628",
-    "109.91964398,27.38067198",
-    "109.92076488,27.37959859",
-    "109.92178333,27.3786596",
-    "109.92198081,27.37768574",
-    "109.92209354,27.37664679",
-    "109.92191588,27.37559379",
-    "109.92149562,27.37412863",
-    "109.92107537,27.37266347",
-    "109.92097865,27.37189508",
-    "109.92084639,27.37028804",
-    "109.92070474,27.36890339",
-    "109.92050735,27.36796273",
-    "109.92021543,27.36699759",
-    "109.91971276,27.36541998",
-    "109.91986704,27.36538707",
-    "109.92057766,27.36515859",
-    "109.92039319,27.36455524",
-    "109.92164409,27.36468758",
-    "109.92289499,27.3648199",
-    "109.9241459,27.36495221",
-    "109.92516444,27.3650572",
-    "109.92618298,27.36516219",
-    "109.92747764,27.36530221",
-    "109.92877229,27.36544221",
-    "109.93006695,27.36558221",
-    "109.93082626,27.36493774",
-    "109.93158555,27.36429326",
-    "109.93206553,27.36390811",
-    "109.93306741,27.36309216",
-    "109.93414835,27.3632409",
-    "109.93495193,27.36339974",
-    "109.93601358,27.36375724",
-    "109.93707525,27.36411474",
-    "109.93707993,27.36412524",
-    "109.93718394,27.36433197",
-    "109.93730372,27.36454914",
-    "109.937408,27.36472204",
-    "109.93746079,27.3648029",
-    "109.93754151,27.36492653",
-    "109.93766798,27.36510566",
-    "109.93779071,27.365268",
-    "109.93785624,27.3653503",
-    "109.93794716,27.36546002",
-    "109.93808969,27.36562817",
-    "109.93826904,27.36582889",
-    "109.93849466,27.36607536",
-    "109.93869335,27.36628822",
-    "109.93901321,27.36663117",
-    "109.93928113,27.36691875",
-    "109.9396159,27.36727707",
-    "109.9398403,27.36751856",
-    "109.94018861,27.36789262",
-    "109.94038016,27.3680978",
-    "109.94068401,27.36842788",
-    "109.94078668,27.36854273",
-    "109.94094945,27.36873264",
-    "109.94107685,27.36889123",
-    "109.94119734,27.36905363",
-    "109.94130995,27.36922005",
-    "109.94138893,27.36934735",
-    "109.9414137,27.36938945",
-    "109.94152363,27.3695913",
-    "109.94158696,27.36972053",
-    "109.94166644,27.36990191",
-    "109.94172547,27.37005321",
-    "109.94178108,27.37021532",
-    "109.94181592,27.37032917",
-    "109.94185737,27.37048416",
-    "109.94188895,27.37062216",
-    "109.94191307,27.37074675",
-    "109.94193648,27.37089567",
-    "109.94195454,27.37104511",
-    "109.94196617,27.37118114",
-    "109.94196702,27.37120004",
-    "109.94196792,27.37121969",
-    "109.94197321,27.3713361",
-    "109.94197288,27.37156493",
-    "109.94196212,27.37176384",
-    "109.94194197,27.3719574",
-    "109.94191024,27.37215959",
-    "109.94187066,27.37235115",
-    "109.94182209,27.37254056",
-    "109.94176442,27.3727277",
-    "109.94169944,27.37290787",
-    "109.94162379,27.37309023",
-    "109.94153899,27.37327026",
-    "109.94146961,27.37340675",
-    "109.94143952,27.37345827",
-    "109.94138872,27.37354815",
-    "109.94136983,27.3735794",
-    "109.94129952,27.37369228",
-    "109.94120809,27.37382825",
-    "109.94112494,27.37394802",
-    "109.9410409,27.37406266",
-    "109.94097668,27.37414765",
-    "109.94082403,27.37434696",
-    "109.94058547,27.37465049",
-    "109.9405849,27.37465121",
-    "109.93968285,27.37577075",
-    "109.93935278,27.37620463",
-    "109.93889493,27.37679103",
-    "109.93846948,27.37733519",
-    "109.93835384,27.3774833",
-    "109.93829659,27.37755723",
-    "109.93781922,27.37832409",
-    "109.93734184,27.37909095",
-    "109.93727013,27.37922911",
-    "109.93722356,27.37933683",
-    "109.93712351,27.37959306",
-    "109.9370954,27.37968085",
-    "109.93701213,27.37994089",
-    "109.93692476,27.38020079",
-    "109.93684618,27.38051062",
-    "109.93678734,27.38077696",
-    "109.93672918,27.38108937",
-    "109.9366901,27.38135918",
-    "109.93665866,27.38167509",
-    "109.93663526,27.38230946",
-    "109.93666958,27.38298608",
-    "109.93668928,27.383167",
-    "109.9367209,27.38339224",
-    "109.93682026,27.38389164",
-    "109.93699093,27.38452082",
-    "109.93719368,27.3850903",
-    "109.93748822,27.38585018",
-    "109.9377625,27.38654362",
-    "109.93796455,27.38705403",
-    "109.93811135,27.38742089",
-    "109.93822882,27.38771867",
-    "109.93836048,27.38804956",
-    "109.93842734,27.38821979",
-    "109.93852766,27.38847526",
-    "109.93866144,27.38881588",
-    "109.93876372,27.38907632",
-    "109.93884732,27.3892892",
-    "109.93898109,27.38962985",
-    "109.93909846,27.38992773",
-    "109.93923123,27.39026853",
-    "109.9393458,27.39056717",
-    "109.93944189,27.39082363",
-    "109.93953575,27.39108088",
-    "109.93962831,27.39133843",
-    "109.93971869,27.39159673",
-    "109.93982414,27.39189821",
-    "109.93991453,27.3921566",
-    "109.93998976,27.39237195",
-    "109.94007992,27.39263043",
-    "109.94014012,27.39280273",
-    "109.94021036,27.39303834",
-    "109.94024021,27.3931869",
-    "109.94028982,27.39336377",
-    "109.94041926,27.39375374",
-    "109.940495,27.39396927",
-    "109.94056541,27.39416762",
-    "109.9404248,27.39547315",
-    "109.94047033,27.39560643",
-    "109.94053766,27.39587349",
-    "109.94059649,27.39623058",
-    "109.94095313,27.39764687",
-    "109.94095313,27.3976469",
-    "109.94101871,27.39790731",
-    "109.94102342,27.39792605",
-    "109.94102813,27.3979448",
-    "109.94103284,27.39796357",
-    "109.94103754,27.39798237",
-    "109.94104224,27.39800118",
-    "109.94104691,27.39802",
-    "109.94104692,27.39802002",
-    "109.94105158,27.39803887",
-    "109.94105623,27.39805774",
-    "109.94106085,27.39807664",
-    "109.94106545,27.39809557",
-    "109.94107003,27.39811451",
-    "109.94107457,27.39813348",
-    "109.94107909,27.39815248",
-    "109.94108356,27.3981715",
-    "109.941088,27.39819054",
-    "109.9410924,27.39820961",
-    "109.94109675,27.39822871",
-    "109.94110106,27.39824784",
-    "109.94110531,27.39826699",
-    "109.94110952,27.39828617",
-    "109.94111367,27.39830537",
-    "109.94111775,27.39832461",
-    "109.94112178,27.39834388",
-    "109.94112574,27.39836317",
-    "109.94112963,27.39838249",
-    "109.94113345,27.39840185",
-    "109.9411372,27.39842123",
-    "109.94114086,27.39844064",
-    "109.94114445,27.39846008",
-    "109.94114795,27.39847956",
-    "109.94115137,27.39849906",
-    "109.9411547,27.39851859",
-    "109.94115793,27.39853816",
-    "109.94116107,27.39855775",
-    "109.94116411,27.39857738",
-    "109.94116705,27.39859704",
-    "109.94116988,27.39861672",
-    "109.9411726,27.39863644",
-    "109.9411752,27.39865615",
-    "109.94120139,27.39918361",
-    "109.94117836,27.39948916",
-    "109.94117592,27.39950874",
-    "109.94117335,27.39952847",
-    "109.94117067,27.39954818",
-    "109.94116789,27.39956785",
-    "109.941165,27.39958749",
-    "109.94116201,27.39960711",
-    "109.94115892,27.39962669",
-    "109.94115574,27.39964625",
-    "109.94115248,27.39966577",
-    "109.94115156,27.39967106",
-    "109.94110485,27.40055947",
-    "109.94082731,27.40169669",
-    "109.94082633,27.4017007",
-    "109.94081881,27.40173153",
-    "109.94081131,27.40176234",
-    "109.94080382,27.40179313",
-    "109.94079634,27.40182391",
-    "109.94078888,27.40185466",
-    "109.94078145,27.4018854",
-    "109.94077403,27.40191613",
-    "109.94076664,27.40194683",
-    "109.94075928,27.40197753",
-    "109.94075195,27.4020082",
-    "109.94074466,27.40203886",
-    "109.9407374,27.40206951",
-    "109.94073017,27.40210015",
-    "109.94072299,27.40213077",
-    "109.94071586,27.40216138",
-    "109.94070876,27.40219197",
-    "109.94070172,27.40222256",
-    "109.94069473,27.40225313",
-    "109.94068779,27.40228369",
-    "109.94068091,27.40231424",
-    "109.94067409,27.40234478",
-    "109.94066732,27.40237531",
-    "109.94066063,27.40240583",
-    "109.940654,27.40243634",
-    "109.94064743,27.40246685",
-    "109.94064094,27.40249734",
-    "109.94063453,27.40252783",
-    "109.94062819,27.4025583",
-    "109.94062193,27.40258877",
-    "109.94061575,27.40261923",
-    "109.94060965,27.40264969",
-    "109.94060364,27.40268014",
-    "109.94059772,27.40271058",
-    "109.94059189,27.40274101",
-    "109.94057254,27.40283074",
-    "109.94055699,27.40292217",
-    "109.94054278,27.40301481",
-    "109.94053123,27.40309641",
-    "109.94042965,27.40439977",
-    "109.94042952,27.40443071",
-    "109.9404295,27.4044615",
-    "109.94042957,27.40449231",
-    "109.94042974,27.40452315",
-    "109.94043,27.404554",
-    "109.94043036,27.40458488",
-    "109.9404308,27.40461577",
-    "109.94043133,27.40464669",
-    "109.94043194,27.40467762",
-    "109.94043264,27.40470857",
-    "109.94043342,27.40473954",
-    "109.94043427,27.40477053",
-    "109.94043519,27.40480154",
-    "109.94043619,27.40483256",
-    "109.94043726,27.40486361",
-    "109.94043839,27.40489467",
-    "109.94043959,27.40492575",
-    "109.94044084,27.40495685",
-    "109.94044216,27.40498797",
-    "109.94044353,27.40501911",
-    "109.94044496,27.40505027",
-    "109.94044644,27.40508144",
-    "109.94044797,27.40511264",
-    "109.94044954,27.40514385",
-    "109.94045115,27.40517508",
-    "109.94045281,27.40520633",
-    "109.94045451,27.4052376",
-    "109.94045624,27.40526888",
-    "109.940458,27.40530019",
-    "109.94045979,27.40533152",
-    "109.94046162,27.40536286",
-    "109.94046346,27.40539423",
-    "109.94046533,27.40542561",
-    "109.94046722,27.40545701",
-    "109.94046913,27.40548844",
-    "109.94047105,27.40551988",
-    "109.94047298,27.40555134",
-    "109.94047492,27.40558282",
-    "109.94047671,27.40561174",
-    "109.9404805,27.40567289",
-    "109.94048217,27.40569994",
-    "109.94048384,27.405727",
-    "109.94048384,27.40572704",
-    "109.9404855,27.4057541",
-    "109.94048551,27.40575415",
-    "109.94048716,27.40578121",
-    "109.94048716,27.40578128",
-    "109.9404888,27.40580835",
-    "109.94048881,27.40580842",
-    "109.94049044,27.40583551",
-    "109.94049044,27.40583559",
-    "109.94049673,27.40594104",
-    "109.94066867,27.4060794",
-    "109.94185377,27.40602932",
-    "109.94303886,27.40597924",
-    "109.94303612,27.40497962",
-    "109.94310078,27.40404823",
-    "109.94312889,27.40373112",
-    "109.94313175,27.40372204",
-    "109.94315482,27.40361316",
-    "109.943186,27.40330881",
-    "109.94317549,27.40320943",
-    "109.94319266,27.40312562",
-    "109.94332425,27.40282115",
-    "109.94345291,27.40282891",
-    "109.94358587,27.40282656",
-    "109.94366606,27.4028313",
-    "109.9437487,27.40285022",
-    "109.94377711,27.4028722",
-    "109.9438463,27.40292757",
-    "109.94386371,27.40293875",
-    "109.94391432,27.40295385",
-    "109.94398621,27.40294644",
-    "109.94403431,27.40294078",
-    "109.94407849,27.40292822",
-    "109.94410746,27.40291377",
-    "109.9441222,27.4029023",
-    "109.94415261,27.4028743",
-    "109.94418317,27.40284532",
-    "109.94422934,27.40279338",
-    "109.94427962,27.40273637",
-    "109.94428907,27.40272466",
-    "109.94436719,27.40266782",
-    "109.94436919,27.40266771",
-    "109.9443712,27.4026676",
-    "109.94438399,27.40267352",
-    "109.94441183,27.40268642",
-    "109.9446937,27.40281693",
-    "109.94499504,27.40328705",
-    "109.94511872,27.40347912",
-    "109.94527059,27.40373268",
-    "109.94546614,27.40407948",
-    "109.9455696,27.40427881",
-    "109.94571316,27.4045624",
-    "109.9458097,27.40476651",
-    "109.94623876,27.40568317",
-    "109.94666782,27.40659982",
-    "109.94717373,27.40768234",
-    "109.94726992,27.40788842",
-    "109.94566436,27.40799685",
-    "109.9440588,27.40810526",
-    "109.94406838,27.40915578",
-    "109.94410096,27.40946389",
-    "109.94439651,27.41091263",
-    "109.94308856,27.41110935",
-    "109.9417806,27.41130605",
-    "109.94047263,27.41150275",
-    "109.94068708,27.41234587",
-    "109.93902939,27.41252286",
-    "109.93912442,27.41325729",
-    "109.93813848,27.41343205",
-    "109.93715253,27.41360681",
-    "109.9372353,27.41455346",
-    "109.93731808,27.41550011",
-    "109.93701963,27.41553062",
-    "109.9371344,27.41678081",
-    "109.93724918,27.41803099",
-    "109.93736395,27.41928117",
-    "109.9359085,27.4193793",
-    "109.93445304,27.41947741",
-    "109.93408115,27.41951379"
-]
+    "109.94503788697, 27.42222019334",
+    "109.94370937383, 27.42264297961",
+    "109.94281591336, 27.421493024758",
+    "109.94244191059, 27.420467567709",
+    "109.94268255379, 27.419544296039",
+    "109.94293731256, 27.417178821771",
+    "109.94300467525, 27.4182104061",
+    "109.94262000669, 27.416249186407",
+    "109.94230242088, 27.415319217231",
+    "109.93914103067, 27.412042780516",
+    "109.94156131057, 27.414206201167",
+    "109.93809291601, 27.410896508325",
+    "109.93704495261, 27.409749140726",
+    "109.93594536055, 27.409253909674",
+    "109.93484545334, 27.408757180532",
+    "109.94035120399, 27.413125122128",
+    "109.93355527108, 27.408343939189",
+    "109.93097620826, 27.407513224594",
+    "109.92971422628, 27.407079609828",
+    "109.92845231733, 27.40664457709",
+    "109.9271193581, 27.405746789268",
+    "109.92623849635, 27.404575509229",
+    "109.92520572424, 27.402252189467",
+    "109.92535747188, 27.403404052792",
+    "109.92505337225, 27.401100287814",
+    "109.93226542962, 27.407929027551",
+    "109.924673756, 27.399754875345",
+    "109.92392378227, 27.397763199815",
+    "109.92429891505, 27.398759243246",
+    "109.92348275139, 27.39570076103",
+    "109.92331218519, 27.394720189786",
+    "109.92370315411, 27.396731873279",
+    "109.92314211666, 27.393739581501",
+    "109.92314144341, 27.392901330311",
+    "109.92331181564, 27.391110001604",
+    "109.92314073338, 27.392063069959",
+    "109.92348285788, 27.390156895437",
+    "109.92420271734, 27.38813419748",
+    "109.92384279844, 27.389145610971",
+    "109.92517233442, 27.386815323963",
+    "109.92845921317, 27.384629394486",
+    "109.92748749699, 27.385157075954",
+    "109.92651625202, 27.38568390223",
+    "109.92950846999, 27.384063481077",
+    "109.93055795759, 27.38349631121",
+    "109.93168012037, 27.382418846549",
+    "109.93289751824, 27.380500006851",
+    "109.93270019501, 27.381475150143",
+    "109.93300946247, 27.379460204047",
+    "109.93283041428, 27.37840768536",
+    "109.9324078736, 27.376943760237",
+    "109.93188765231, 27.374711739622",
+    "109.93198531076, 27.375479939159",
+    "109.93175361415, 27.373104470651",
+    "109.93160997215, 27.371719984515",
+    "109.93141134442, 27.370779624471",
+    "109.93111791739, 27.369814937584",
+    "109.93061263551, 27.368238581592",
+    "109.93380133159, 27.367624726873",
+    "109.93147887824, 27.367973976312",
+    "109.93076710029, 27.368204888455",
+    "109.93129333109, 27.367371073384",
+    "109.93254716385, 27.367498436967",
+    "109.93505582548, 27.3677491612",
+    "109.93607764426, 27.367847150249",
+    "109.9409992203, 27.368328115985",
+    "109.93709966772, 27.367944316647",
+    "109.93839930858, 27.368073729831",
+    "109.93969925511, 27.368201369467",
+    "109.94176123608, 27.367675256273",
+    "109.94252334025, 27.367021761278",
+    "109.94401114528, 27.365802429108",
+    "109.94590562202, 27.366085984281",
+    "109.94300519409, 27.366630747818",
+    "109.94509770407, 27.365937568998",
+    "109.94697330946, 27.366429342758",
+    "109.94804603066, 27.366782719575",
+    "109.94815081264, 27.366988120004",
+    "109.94804139046, 27.366772209489",
+    "109.94827140099, 27.367203580019",
+    "109.94837642293, 27.367375050296",
+    "109.94842960958, 27.367455346495",
+    "109.94863852412, 27.367755145575",
+    "109.94851116223, 27.367577796021",
+    "109.94876205756, 27.367915726809",
+    "109.94882804725, 27.367997169537",
+    "109.9489196652, 27.368105609384",
+    "109.94906308867, 27.36827183134",
+    "109.94924358616, 27.368470014778",
+    "109.94947070521, 27.368713566932",
+    "109.94967110233, 27.36892334454",
+    "109.95026276982, 27.369545703602",
+    "109.94999310827, 27.369261925177",
+    "109.95060005599, 27.369899172816",
+    "109.95082610002, 27.37013749544",
+    "109.9511767591, 27.370506430112",
+    "109.95136981411, 27.370708635936",
+    "109.95167576575, 27.371034312138",
+    "109.95177938956, 27.371147632384",
+    "109.95194328795, 27.371335375161",
+    "109.95207147155, 27.371491963643",
+    "109.95230605924, 27.371817434823",
+    "109.95238599777, 27.371943620803",
+    "109.95219257707, 27.371652737395",
+    "109.95241082773, 27.371985532143",
+    "109.95258548835, 27.372313896202",
+    "109.95252162012, 27.372185543658",
+    "109.95266575105, 27.372494068269",
+    "109.95272500929, 27.372644746306",
+    "109.95278128056, 27.372805784797",
+    "109.95281653039, 27.372919422367",
+    "109.95285862893, 27.373073644381",
+    "109.9528903595, 27.373211218318",
+    "109.95291472205, 27.373335621053",
+    "109.95293828978, 27.373484185874",
+    "109.95295668174, 27.373633380646",
+    "109.95296852291, 27.373769390584",
+    "109.95296935763, 27.373788098571",
+    "109.95297019335, 27.373807891878",
+    "109.9529760225, 27.373924195883",
+    "109.95297568995, 27.374152936367",
+    "109.95296524971, 27.374352272035",
+    "109.95294472406, 27.374546079908",
+    "109.95291303681, 27.374749030075",
+    "109.95287371123, 27.374941255514",
+    "109.95282484845, 27.375131470803",
+    "109.95276699337, 27.375319666508",
+    "109.95270177592, 27.375500659569",
+    "109.95254083173, 27.375865869647",
+    "109.95262566362, 27.375684277189",
+    "109.95247094304, 27.37600325366",
+    "109.95244075117, 27.376055314198",
+    "109.95237084906, 27.376177773756",
+    "109.95238988993, 27.376145979507",
+    "109.95230012198, 27.376291563546",
+    "109.95220843994, 27.376429038051",
+    "109.95212464318, 27.376549827552",
+    "109.95197581135, 27.376751745519",
+    "109.95204056999, 27.376666007543",
+    "109.95158289704, 27.377260799313",
+    "109.95182234878, 27.376953735811",
+    "109.95158235294, 27.377261622349",
+    "109.9506756836, 27.378395014682",
+    "109.95034427724, 27.378834015519",
+    "109.94988416207, 27.379427281462",
+    "109.94945642955, 27.379977905612",
+    "109.94934024605, 27.380127638416",
+    "109.94928283519, 27.380202356539",
+    "109.94832366976, 27.381750220917",
+    "109.9488032535, 27.380976467602",
+    "109.94825187075, 27.381889715769",
+    "109.94807652789, 27.382343920728",
+    "109.9481047904, 27.382255574424",
+    "109.94799282593, 27.382605413359",
+    "109.94820483216, 27.381998163286",
+    "109.9479053091, 27.382866419057",
+    "109.94782626406, 27.383177482983",
+    "109.94776733981, 27.383444822786",
+    "109.94770925799, 27.383757999083",
+    "109.94767020879, 27.384028555384",
+    "109.94765043321, 27.385655894384",
+    "109.94761548127, 27.384979793716",
+    "109.94763853617, 27.384345119372",
+    "109.94767040715, 27.385836818639",
+    "109.94770211172, 27.386061784107",
+    "109.94780257286, 27.386559974054",
+    "109.9479744308, 27.387186731363",
+    "109.94847526202, 27.388509626773",
+    "109.94817865399, 27.387753553308",
+    "109.94875140035, 27.389199246315",
+    "109.94922076742, 27.390367835427",
+    "109.9489547448, 27.389706596727",
+    "109.94910247589, 27.390071574857",
+    "109.94935349968, 27.390696684793",
+    "109.9495216594, 27.391120179464",
+    "109.94965629099, 27.391458748222",
+    "109.9497593056, 27.391717791476",
+    "109.9494205465, 27.390865979018",
+    "109.94984324161, 27.391929664478",
+    "109.94997786226, 27.392268487519",
+    "109.95009612802, 27.392564435585",
+    "109.95034518475, 27.393200329855",
+    "109.95022992272, 27.392903258974",
+    "109.95044191561, 27.393455650621",
+    "109.95053619232, 27.393711550584",
+    "109.95062937662, 27.393967465091",
+    "109.9507203791, 27.394224768517",
+    "109.95082663565, 27.39452467917",
+    "109.95091735925, 27.394781980414",
+    "109.9509933685, 27.394995846535",
+    "109.95108381418, 27.395253146771",
+    "109.95114456359, 27.395424399854",
+    "109.95121511922, 27.395659237637",
+    "109.95129520655, 27.395983433985",
+    "109.95124535728, 27.395807392546",
+    "109.95142540808, 27.396371357363",
+    "109.95150167381, 27.396586018727",
+    "109.95143102272, 27.398091071825",
+    "109.95157249015, 27.396783407767",
+    "109.95154456415, 27.398489835477",
+    "109.95147677017, 27.398223772013",
+    "109.95160362493, 27.398846099513",
+    "109.95202824815, 27.400516448383",
+    "109.95196238612, 27.400257148712",
+    "109.95196238612, 27.400257148712",
+    "109.9520328746, 27.400535087272",
+    "109.95203777343, 27.400553721596",
+    "109.95204702611, 27.400591541832",
+    "109.95204239985, 27.400572360467",
+    "109.9520519249, 27.400610176127",
+    "109.95205655126, 27.400628814971",
+    "109.9520565512, 27.400629086222",
+    "109.95206144994, 27.400647720498",
+    "109.95206607621, 27.400666630575",
+    "109.95207070252, 27.400685269391",
+    "109.95207995496, 27.4007230895",
+    "109.95207532875, 27.40070417945",
+    "109.95208458115, 27.40074199954",
+    "109.95208893492, 27.400760914132",
+    "109.95209791482, 27.400798738729",
+    "109.95209356108, 27.400779824155",
+    "109.95210254094, 27.400817648734",
+    "109.95210689458, 27.400836834542",
+    "109.95211097586, 27.400855753652",
+    "109.95211968303, 27.400894125224",
+    "109.95213192652, 27.400951424957",
+    "109.95212376426, 27.40091304431",
+    "109.95211532945, 27.400874939443",
+    "109.9521278454, 27.400932234637",
+    "109.95215096969, 27.401047941749",
+    "109.95214362489, 27.401009276242",
+    "109.95214743347, 27.401028742343",
+    "109.95213573522, 27.400970619831",
+    "109.95213981623, 27.400990081384",
+    "109.95215450582, 27.401067412398",
+    "109.95215804193, 27.40108688304",
+    "109.95216157802, 27.401106353674",
+    "109.95216484169, 27.401125828865",
+    "109.95216810527, 27.401145575298",
+    "109.9521713689, 27.401165050475",
+    "109.9521743601, 27.40118453021",
+    "109.95217735122, 27.401204281188",
+    "109.95218006998, 27.401223765475",
+    "109.95218278865, 27.401243521004",
+    "109.95218577971, 27.401263271962",
+    "109.95221177944, 27.401790139851",
+    "109.95218853096, 27.402095951718",
+    "109.95218607305, 27.402115793774",
+    "109.95218361521, 27.402135364578",
+    "109.95217515179, 27.402194637705",
+    "109.95217214906, 27.402214217614",
+    "109.95217815458, 27.402174786544",
+    "109.95216914632, 27.402233797516",
+    "109.95216587115, 27.402253381977",
+    "109.95216259597, 27.40227296643",
+    "109.95218088486, 27.402155211187",
+    "109.95216177699, 27.402278405033",
+    "109.95211407027, 27.403167523071",
+    "109.95183467886, 27.404308955513",
+    "109.95183385993, 27.404313037731",
+    "109.95182621955, 27.40434408621",
+    "109.95181857925, 27.404374863427",
+    "109.95181121119, 27.404405907314",
+    "109.9518035708, 27.404436684483",
+    "109.95179620266, 27.404467728323",
+    "109.95178856219, 27.404498505445",
+    "109.95178119407, 27.404529278",
+    "109.95177355352, 27.404560055074",
+    "109.95176618532, 27.404590827582",
+    "109.95175854456, 27.404621875846",
+    "109.95175144868, 27.404652643767",
+    "109.95174408035, 27.404683416205",
+    "109.95172961609, 27.404744685236",
+    "109.95171515155, 27.404806225414",
+    "109.95172224764, 27.404775457606",
+    "109.9517367121, 27.404713917383",
+    "109.95170123187, 27.404867213951",
+    "109.95170805553, 27.404836721962",
+    "109.95169413565, 27.404897981692",
+    "109.95168731179, 27.404928744874",
+    "109.95167366406, 27.404989999938",
+    "109.95168021561, 27.404959241335",
+    "109.95166001616, 27.405051254915",
+    "109.95166684019, 27.405020491819",
+    "109.95165346461, 27.405081742219",
+    "109.95164691289, 27.405112500738",
+    "109.95163408198, 27.405173470709",
+    "109.95164063365, 27.405142983466",
+    "109.95162780253, 27.405204224633",
+    "109.95162152317, 27.405234707302",
+    "109.95161551616, 27.405265185418",
+    "109.95157783939, 27.405446995958",
+    "109.9516032295, 27.405326417361",
+    "109.95159722237, 27.40535689542",
+    "109.95160950898, 27.405295934751",
+    "109.95156226882, 27.405538660318",
+    "109.95143347855, 27.407018190421",
+    "109.95154778692, 27.405631391351",
+    "109.95143346149, 27.407049110658",
+    "109.95143344454, 27.407079759655",
+    "109.95153630632, 27.405713223065",
+    "109.9514336826, 27.407141595557",
+    "109.95143342739, 27.407110679872",
+    "109.95143393791, 27.407172240001",
+    "109.95143472051, 27.407234066797",
+    "109.95143524794, 27.407264977918",
+    "109.95143419303, 27.407203155665",
+    "109.95143577532, 27.407295889029",
+    "109.95143630267, 27.407326800129",
+    "109.95143790187, 27.407388884483",
+    "109.95143897387, 27.407419786508",
+    "109.95143977344, 27.407450693044",
+    "109.95143710237, 27.407357706697",
+    "109.95144084521, 27.407481866276",
+    "109.95144218949, 27.407512763747",
+    "109.95144567696, 27.407606007596",
+    "109.95144460536, 27.407574834407",
+    "109.95144326117, 27.407543936958",
+    "109.9514472933, 27.40763717173",
+    "109.95144863721, 27.407668340374",
+    "109.95144998107, 27.407699509008",
+    "109.95145482959, 27.407793001275",
+    "109.95145321346, 27.407761837197",
+    "109.95145159729, 27.407730673108",
+    "109.9514631817, 27.407949359429",
+    "109.95145644568, 27.407824165342",
+    "109.95146156593, 27.40791792418",
+    "109.95145967758, 27.407886764669",
+    "109.95145806173, 27.407855329397",
+    "109.95146695788, 27.408012220847",
+    "109.95146506997, 27.407980518917",
+    "109.95146884607, 27.408043380312",
+    "109.951472622, 27.408106241661",
+    "109.95147073405, 27.408074810992",
+    "109.9514745099, 27.408137672319",
+    "109.9514839514, 27.408290485812",
+    "109.95148017482, 27.408229523183",
+    "109.95147639776, 27.408169102965",
+    "109.95147828557, 27.408200533599",
+    "109.9514855693, 27.408317581305",
+    "109.95148880517, 27.40837150104",
+    "109.95148718717, 27.408344676789",
+    "109.95148718717, 27.408344676789",
+    "109.95149042297, 27.408398596507",
+    "109.951488805, 27.408371772266",
+    "109.9514904228, 27.408398867734",
+    "109.95149204074, 27.408425691967",
+    "109.95149204058, 27.408425963193",
+    "109.95149365832, 27.408453058644",
+    "109.95149365832, 27.408453058644",
+    "109.95167301661, 27.408694176054",
+    "109.95150040321, 27.408558452356",
+    "109.95286536901, 27.40862616798",
+    "109.95405805396, 27.408557642518",
+    "109.95405565517, 27.407558222176",
+    "109.95412128252, 27.406625979387",
+    "109.95414978219, 27.406308426001",
+    "109.95417572378, 27.406189998186",
+    "109.95415251125, 27.406299157612",
+    "109.95420720747, 27.405885139874",
+    "109.95419690479, 27.405786045067",
+    "109.95421410911, 27.405701940758",
+    "109.95434665637, 27.405395354159",
+    "109.9544760557, 27.405401279303",
+    "109.95460981923, 27.405396821326",
+    "109.95469045597, 27.405400323397",
+    "109.95477381027, 27.405418153711",
+    "109.95487212038, 27.405493770995",
+    "109.95488955056, 27.405504592875",
+    "109.95480213245, 27.405439638492",
+    "109.95494021521, 27.405519184898",
+    "109.95501268556, 27.405510348159",
+    "109.95506118098, 27.405504092031",
+    "109.95510559336, 27.405490853724",
+    "109.95513475051, 27.405475978324",
+    "109.95514973976, 27.405464329452",
+    "109.95518026572, 27.405435597617",
+    "109.95525767505, 27.405353713335",
+    "109.95521079192, 27.405406323244",
+    "109.95530810215, 27.405295889011",
+    "109.95531764282, 27.40528406224",
+    "109.95539830969, 27.405225989814",
+    "109.95540021685, 27.40522568584",
+    "109.95539640266, 27.405226022553",
+    "109.95541329081, 27.405231428521",
+    "109.95544107284, 27.405243970733",
+    "109.95572461384, 27.405370106165",
+    "109.95602787537, 27.405835481649",
+    "109.95615228097, 27.40602564555",
+    "109.95630498605, 27.406277162516",
+    "109.95660546291, 27.406818521541",
+    "109.95650150072, 27.406620685319",
+    "109.9568468411, 27.407302579818",
+    "109.95727838373, 27.408212444581",
+    "109.9567496969, 27.407099745253",
+    "109.95770961631, 27.409122582882",
+    "109.95821834079, 27.410197379934",
+    "109.95669903607, 27.410534826732",
+    "109.95831463832, 27.41040185592",
+    "109.95508315508, 27.410668095068",
+    "109.95509192865, 27.411718360409",
+    "109.95542102716, 27.413470163043",
+    "109.95512438943, 27.412025901907",
+    "109.95410448783, 27.413686890313",
+    "109.95147239387, 27.414119911583",
+    "109.95168715391, 27.41495979364",
+    "109.95278854027, 27.413903684364",
+    "109.95001946748, 27.415161613172",
+    "109.94912288942, 27.416083486157",
+    "109.9501147063, 27.41589449026",
+    "109.94813115406, 27.416272421439",
+    "109.94821363704, 27.417217633147",
+    "109.94829609898, 27.41816310808",
+    "109.94799596732, 27.418198162106",
+    "109.94811025298, 27.419446343463",
+    "109.94833874721, 27.421943213275",
+    "109.94687524823, 27.422061453876",
+    "109.9454117071, 27.422179044635",
+    "109.94822451114, 27.420694783803"
+  ]
+  

src/components/baseEcharts/config.js

@@ -1,74 +0,0 @@
-// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from "echarts/core";
-
-// 引入内置组件，组件后缀都为Component
-import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  PolarComponent,
-  AriaComponent,
-  ParallelComponent,
-  LegendComponent,
-  RadarComponent,
-  ToolboxComponent,
-  DatasetComponent, // 数据集组件
-  DataZoomComponent,
-  VisualMapComponent,
-  TimelineComponent,
-  CalendarComponent,
-  GraphicComponent,
-  TransformComponent, // 数据转换器组件(filter, sort)
-} from "echarts/components";
-
-// 引入渲染器：echarst默认使用canvas渲染，引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-
-// 标签自动布局、全局过渡动画等特性
-import { LabelLayout, UniversalTransition } from "echarts/features";
-
-// 引入图表类型，后缀都为Chart
-import {
-  BarChart,
-  LineChart,
-  PieChart,
-  MapChart,
-  RadarChart,
-  PictorialBarChart,
-} from "echarts/charts";
-
-// 注册必须的组件
-echarts.use([
-  // 内置组件
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  PolarComponent,
-  AriaComponent,
-  ParallelComponent,
-  LegendComponent,
-  RadarComponent,
-  ToolboxComponent,
-  DatasetComponent,
-  DataZoomComponent,
-  VisualMapComponent,
-  TimelineComponent,
-  CalendarComponent,
-  GraphicComponent,
-  TransformComponent,
-  // 渲染器
-  CanvasRenderer,
-  SVGRenderer,
-  // 特性
-  LabelLayout,
-  UniversalTransition,
-  // 图表
-  BarChart,
-  LineChart,
-  PieChart,
-  MapChart,
-  RadarChart,
-  PictorialBarChart,
-]);
-
-export default echarts;

src/components/baseEcharts/index.vue

@@ -1,41 +1,207 @@
 <template>
-    <div :style="{
-        width: width,
-        height: height,
-    }" ref="echartsRef" />
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
 </template>
-  
-<script setup lang="ts">
-import { ref, onMounted, watch, PropType } from "vue";
-import { useEcharts, EChartsCoreOption } from "../../hooks/useEcharts"; // 引入hooks
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 
 const props = defineProps({
-    options: { type: Object as PropType<EChartsCoreOption>, required: true },
-    height: { type: String, default: "100%" },
-    width: { type: String, default: "100%" },
-    themeColors: { type: Array as PropType<string[]>, default: () => [] },
-});
-
-const echartsRef = ref();
-
-const { setOptions, initCharts } = useEcharts(echartsRef, props.options);
-
-watch(
-    () => props.options,
-    (nVal) => {
-        let targetOptions: EChartsCoreOption = {};
-        if (props.themeColors && props.themeColors.length > 0) {
-            targetOptions = { ...nVal };
-            targetOptions.color = props.themeColors;
-        } else {
-            targetOptions = { ...nVal };
+    xDataArray: {
+        // 柱形图x轴数据
+        type: Array,
+        default: function () {
+            return ['1', '2', '3', '4', '5']
+        }
+    },
+    yDataArray: {
+        //图标信息提示
+        type: Array,
+        default: function () {
+            return [
+                {
+                    name: '图例二',
+                    type: 'bar',
+                    label: {
+                        // 柱状图上的文字设置
+                        show: true, // 是否显示
+                        //   rotate: 60, // 文字旋转角度
+                        position: 'top' // 显示位置
+                    },
+                    // barWidth: '50%', // 柱的宽度
+                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
+                    data: [2, 2, 7, 5, 7, 4]
+                },
+                {
+                    name: '图例三',
+                    type: 'bar',
+                    label: {
+                        show: true, // 是否显示
+                        position: 'top' // 显示位置
+                    },
+                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
+                    data: [4, 2, 5, 8, 4, 2]
+                }
+            ]
         }
-        setOptions(targetOptions);
     }
-);
+})
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        // title: {
+        //   text: '接口请求耗时分布', // 标题文字
+        //   textStyle: {
+        //     color: '#C0C4CC', // 标题样式设置
+        //     fontWeight: 'bold' // 标题文字大小
+        //   }
+        // },
+        legend: {
+            //图标信息提示
+            type: 'scroll',
+            orient: 'horizontal',
+            //   right: '50%',
+            left: '40%',
+            top: 0,
+            //   bottom: 20,
+            align: 'auto',
+            icon: 'circle'
+        },
+        grid: {
+            //图表距离边框的偏离
+            right: '8%', //图表距离容器右侧距离
+            left: '8%',
+            top: '20%',
+            bottom: '20%'
+        },
+        tooltip: { trigger: 'axis' }, // 设置图案和容器的距离
+        xAxis: {
+            type: 'category',
+            //   name: '时间',
+            nameLocation: 'end',
+            data: props.xDataArray
+            //   axisLabel: {
+            //     interval: 20 //制显示间隔
+            //     // rotate: 60 // 设置倾斜角度
+            //   }
+            //   // 坐标轴轴线
+            //   axisLine: {
+            //     show: false
+            //   },
+            //   // 坐标轴刻度
+            //   axisTick: {
+            //     show: false
+            //   },
+            //   // 刻度标签
+            //   axisLabel: {
+            //     show: false
+            //   }
+        },
+        yAxis: {
+            type: 'value',
+            //   name: '值',
+            nameLocation: 'end',
+            //   // 坐标轴轴线
+            //   axisLine: {
+            //     show: false
+            //   },
+            //   // 坐标轴刻度
+            //   axisTick: {
+            //     show: false
+            //   },
+            //   // 刻度标签
+            //   axisLabel: {
+            //     show: false
+            //   },
+            min: 0
+            //   splitLine: {
+            //     show: false // 不显示网格线
+            //   }
+            // axisLabel: { formatter: '{value} ' },
+        },
+        series: props.yDataArray,
+        dataZoom: [
+            // 数据选择范围 最下面的范围拉条
+            {
+                type: 'slider', // 开启滑动条
+                show: true, // 显示缩放条
+                start: 0,
+                end: 100,
+                backgroundColor: '#26CAF026',
+                selectedDataBackground: {
+                    lineStyle: {
+                        type: 'dotted'
+                    },
+                    areaStyle: {
+                        color: '#26CAF0'
+                    }
+                },
+                // handleSize: '150%',
+                bottom: '3%',
+                height: 10,
+                brushSelect: false,
+                handleIcon:
+                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABQtJREFUWEfNmVtMI2UUx883M/SybXfbQNht4wM3dxMgqNEIMc26+oIYfFB4EROzhocmWizECyGRtKsRa8wuEULCPiyiEZNNQIObUN92TSSLGBL7QBYtaDUbKNIGKtPpbS7mm+10p9OyHVZo2mQyk5nv8vv+Z86Z850iKP5DsibitcfjIQYHB5+hKOo5kiSfBICzAGBFCJ3EzwVB+BcAtnieD3Act8IwzK2enp7bPp+Px49l40nX8nviEFIb+eRy1EL3UTgctlosFhdBEK8DwOnia8tpsZ1Op78OBAJjTU1NWwrIQqDivYIgiomR3+/XNzc3v0sQxPsAcOKQYMrmTCKRuDw5OXllYGCAyTzEMNIhtS8IqARGDMO06fX6rwCg/n+C5XQXBOGPUCj0hs1m+7kAZFbRvPdL/r6l0+kPKIq6dJRgeXIyzIcGg+ETmYI5ahYEDAQCpvr6+msIoe7jhJPGZln226mpKYfD4diXOYgIWggQ8Tx/vVRwEmQqlfpOq9W+plRSAsyeS2HWg6xC0/RHJpPJm4EUQxIGy8JlHGKxFGY9aI6NjY3nGxoasONgE/NZQL/ff6KlpcV/1N562MXyPP9nf39/6/j4eEyuIOI4bpggCI+aARO8AAkewEzlh9FggoMaHZk3DM3hPgJUVRBFp6Bp+uOMqe8pGA6HbZWVlb+rCcKsIMAjS3sQYQW489QpaNDfh/H+HYehYBwcVi1MPmrIgmC4M7d3ISkAbLWZ1UAyc3Nzj3d3d29iQILjOC9BEO8VXRoAYIVql6Ni0y/OGuDiGW2228XfaPhyOwXPnqLg1mPiZ1n8yfvcbDHBBXNF0alomv7cZDINI4/HQ7nd7rtqv62lAhQE4Z+6urpzKB6Pn9fpdD8WXVIBNY5TQTzd2traCyidTrspilLlHEpzHTdgNBodwV+N7xFCL5Wjgslk0ocB1xBC58oRkGXZAAaMSpmwGshSOQlmwZk5EgRBmW4/kLOUgBik/AHL3sRl7yQsy94gSbJTjYOUOg4mEokfUDKZ9Gg0Gnc5AkYiES/a3d29YDabb5Yj4MrKSifq6OjQLiws/FWOyYLNZmvG6RaVSqW8FRUV76hRsVRxcG9vb9xisVwSAVdXV22NjY13DpOwhlkB1g6ZsLIAcLdVXcI6MTHxtNPpDImAOGDH4/FhnU43rEbFeym/AGYqP31/UMqPxzaSB5WD7s8ciUQ+raqq+kzak4iAo6OjBpfLtYIQqlMDeVxtOI4LdnV1nZ+fn8d1G3FPgjcVWAq0ubnZZrVaVSevxwG5uLj4ot1uX5ZvOzGguDfJmHpIp9OpjotHCbmzs+Otrq6+LNu4iwqKYLIzzrK/oSjqlaOcvNhYsVjshtFo7MVmVVYWJMAs5NjY2EmHw3FVo9G8XGzgo3iO4ZxO59vT09NS8UisKkhOIrlinpr7+/tDRqNRlWc/LGjGrFdkyknlt5zajFQCkZ8xOLG+vt5aW1t7jSCI2oeFKNQPe+vS0tKbdrv9lwK1wayZlWBiEqt8L/v6+gwjIyMuo9E4oCaYF1kIE4lExnt7eycyoUTM7mWHBJdbPMqASVE0773E0LOzs9b29va3DAbDqwih6sMoijfi0Wj0+szMzFX8hcj0lYMpr/PLb5lOB5lbuk/U1NSQPp+v1Wq14k3/EyRJNpAkeVr+NwTHcdssy27EYrFfg8HgT52dncuhUAhPqlRMXuHPOofkyf8BM+lL3UtbDgUAAAAASUVORK5CYII='
+            }
+        ]
+    }
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
 
+watch(
+    //监控数据变化
+    () => props.xDataArray,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+watch(
+    //监控数据变化
+    () => props.yDataArray,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
 onMounted(() => {
-    initCharts();
-});
+    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/hooks/useEcharts.ts

@@ -1,59 +0,0 @@
-import {
-  Ref,
-  shallowRef,
-  unref,
-  onMounted,
-  onDeactivated,
-  onBeforeUnmount,
-} from "vue";
-
-import echarts from "../components/baseEcharts/config";
-
-export type EChartsCoreOption = echarts.EChartsCoreOption;
-
-const useEcharts = (elRef: Ref<HTMLDivElement>, options: EChartsCoreOption) => {
-  const charts = shallowRef<echarts.ECharts>();
-
-  const setOptions = (options: EChartsCoreOption) => {
-    charts.value && charts.value.setOption(options);
-  };
-
-  // 初始化
-  const initCharts = (themeColor?: Array<string>) => {
-    const el = unref(elRef);
-    if (!el || !unref(el)) {
-      return;
-    }
-    charts.value = echarts.init(el);
-    if (themeColor) {
-      options.color = themeColor;
-    }
-    setOptions(options);
-  };
-
-  // 重新窗口变化时，重新计算
-  const resize = () => {
-    charts.value && charts.value.resize();
-  };
-
-  onMounted(() => {
-    window.addEventListener("resize", resize);
-  });
-
-  // 页面keepAlive时，不监听页面
-  onDeactivated(() => {
-    window.removeEventListener("resize", resize);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", resize);
-  });
-
-  return {
-    initCharts,
-    setOptions,
-    resize,
-  };
-};
-
-export { useEcharts };

src/router/index.js

@@ -38,15 +38,6 @@ export const constantRoutes = [
           icon: 'user',
           affix: true
         }
-      },{
-        path: 'visualization',
-        name: 'visualization',
-        component: () => import('@/views/visualization/index.vue'),
-        meta: {
-          title: '可视化',
-          icon: '',
-          affix: true
-        }
       }
     ]
   },
@@ -72,6 +63,11 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+  {
+    path: '/visualization',
+    component: () => import('@/views/visualization/index.vue'),
+    hidden: true,
+  },
   //个人中心
   {
     path: '/user',

src/views/home/index.vue

@@ -17,8 +17,9 @@
       </div>
     </div>
     <div class="listContainer" ref="listContainer">
-      <div class="listContent" ref="listContent" :style="{transform:'translateY('+moveValue+'px)'}">
-        <div class="lsitItem" v-for="(item,index) in homeList" :key="index" style="position: relative"><span style="position: absolute;left: 10px;">{{ index + 1 + '、' }}</span>{{item.enterpriseName}}</div>
+      <div class="listContent" ref="listContent" :style="{ transform: 'translateY(' + moveValue + 'px)' }">
+        <div class="lsitItem" v-for="(item, index) in homeList" :key="index" style="position: relative"><span
+            style="position: absolute;left: 10px;">{{ index + 1 + '、' }}</span>{{ item.enterpriseName }}</div>
       </div>
     </div>
     <div class="footerContianer">
@@ -61,11 +62,12 @@
 
 // const imgUrl = new URL('../../assets/logo/logo.png', import.meta.url).href
 
-import {nextTick, onMounted, onUnmounted, watch} from "vue";
-import {getHomeList} from "../../api/home/home";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
+import { getHomeList } from "../../api/home/home";
 
+const router = useRouter()
 const username = localStorage.getItem('username')
-const toLink = (index)=>{
+const toLink = (index) => {
   switch (index) {
     case 1:
       window.open('https://gxt.hunan.gov.cn/gxt/ztzl/zxzj/zdbf/202404/t20240403_33269363.html');
@@ -80,14 +82,17 @@ const toLink = (index)=>{
       window.open('http://222.240.80.54:18080/hnibdp-daq/login');
       break
     case 5:
-      window.open('../visualization/index.vue');
+      const c = router.resolve({
+        path: "/visualization",
+      });
+      window.open(c.href, "_blank");
   }
 }
-const moveList = ()=>{
+const moveList = () => {
   // console.log(listContent.value.offsetHeight);
   // console.log(listContainer.value.offsetHeight);
   // console.log(limitRange.value);
-  if(moveValue.value<=-limitRange.value){
+  if (moveValue.value <= -limitRange.value) {
     moveValue.value = 0;
   }
   moveValue.value = moveValue.value - 0.5;
@@ -98,45 +103,49 @@ const limitRange = ref(0);
 const moveValue = ref(0);
 const homeList = ref([]);
 
-onMounted(()=>{
-  getHomeList().then(res=>{
-    if(res.code == 200){
+onMounted(() => {
+  getHomeList().then(res => {
+    if (res.code == 200) {
       homeList.value = res.data;
-      nextTick(()=>{
-        limitRange.value = listContent.value.offsetHeight-listContainer.value.offsetHeight;
+      nextTick(() => {
+        limitRange.value = listContent.value.offsetHeight - listContainer.value.offsetHeight;
       })
     }
   })
 })
-let interval = setInterval(moveList,16.6);
-onUnmounted(()=>{
+let interval = setInterval(moveList, 16.6);
+onUnmounted(() => {
   clearInterval(interval);
 })
 
 </script>
 
 <style scoped lang="scss">
-
 .user__info {
   display: flex;
   align-items: center;
   padding: 20px;
+
   .user__info--right {
     margin-left: 20px;
+
     span {
       font-size: 26px;
     }
+
     div {
       font-size: 14px;
     }
   }
 }
-.homeContainer{
+
+.homeContainer {
   margin-top: 30px;
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  .title{
+
+  .title {
     position: absolute;
     z-index: 9999;
     left: 51.5vw;
@@ -150,18 +159,22 @@ onUnmounted(()=>{
     text-align: center;
     box-shadow: #EEF2FBFF 0 0 5px;
   }
+
   //background-color: #EEF2FBFF;
-  .carouselContainer{
+  .carouselContainer {
     width: 50vw;
   }
-  .listContainer{
+
+  .listContainer {
     margin-top: 50px;
     height: 450px;
     width: 30vw;
     overflow: hidden;
-    .listContent{
+
+    .listContent {
+
       //height: 100px;
-      .lsitItem{
+      .lsitItem {
         width: 95%;
         height: 40px;
         margin-bottom: 10px;
@@ -176,19 +189,23 @@ onUnmounted(()=>{
       }
     }
   }
-  .footerContianer{
+
+  .footerContianer {
     margin-top: 70px;
     width: 80vw;
   }
 }
-.imgContainer{
+
+.imgContainer {
   position: relative;
   cursor: pointer;
   width: 23%;
-  img{
+
+  img {
     width: 100%;
   }
-  .textContainer{
+
+  .textContainer {
     position: absolute;
     bottom: 10px;
     width: 100%;
@@ -197,5 +214,4 @@ onUnmounted(()=>{
     background-color: white;
     opacity: 0.55;
   }
-}
-</style>
+}</style>

src/views/visualization/index.vue

@@ -1,20 +1,82 @@
 <template>
-    <div class="mapBox">
-        <div ref="mapContainer" id="allmap"></div>
+    <div class="Vbox">
+        <div class="head">
+            <div class="VisTitle"></div>
+            <div class="Vgradation">
+                <div class="tab" v-for="(item, index) in gradationMun" :key="index" :class="{ active: activeTab === index }"
+                    @click="setActiveTab(index, item)">
+                    {{ item.name }}
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <div class="center">
+                <div ref="mapContainer" class="allmap"></div>
+            </div>
+            <div class="left">
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <!-- <div>2</div> -->
+            </div>
+            <div class="right">
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <!-- <div>1</div> -->
+                <!-- <div>2</div> -->
+            </div>
+        </div>
     </div>
 </template>
   
 <script setup>
 import { ref, onMounted } from 'vue';
-import axios from 'axios'
+import baseEcharts from '@/components/baseEcharts/index.vue'
 
 const mapContainer = ref(null);
 let map = null;
 
+const gradationMun = [{
+    name: "3A企业",
+    state: 3
+}, {
+    name: "2A企业",
+    state: 2
+}, {
+    name: "1A企业",
+    state: 1
+}, {
+    name: "取消选择",
+    state: 0
+}]
+const activeTab = ref(3); // 默认激活第一个tab  
+
+const setActiveTab = (index, value) => {
+    activeTab.value = index;
+};
 onMounted(async () => {
     // 初始化地图
     map = new BMapGL.Map(mapContainer.value);
-    var point = new BMapGL.Point(109.929285, 27.392879);
+    var point = new BMapGL.Point(109.94023319075, 27.395641605743);
 
     map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
     map.enableScrollWheelZoom(true);
@@ -22,188 +84,45 @@ onMounted(async () => {
         styleId: '62ce43ad2a1362c23e612b783d7406e7'
     });
     map.setTilt(50);
-    map.addControl(new BMapGL.NavigationControl());
-
-
-    var convertor = new BMapGL.Convertor();
-    var pointArr = [];
-    pointArr.push(point);
-    convertor.translate(pointArr, 1, 5, function (data) {//坐标转换完之后的回调函数
-        if (data.status === 0) {
-            var marker = new BMapGL.Marker(data.points[0]);
-            map.addOverlay(marker);
-            var label = new BMapGL.Label("转换的GPS坐标（正确）", { offset: new BMapGL.Size(20, -10) });
-            marker.setLabel(label); //添加百度label
-            map.setCenter(data.points[0]);
-        }
-    })
-
-
+    // map.addControl(new BMapGL.NavigationControl());
 
-    var view = new mapvgl.View({
-        map: map
-    });
-
-    // 制造数据
-    var sparkData1 = [];
-    var sparkData2 = [];
-    var sparkData3 = [];
-    var randomNum = 40;
-    // 随机生成点的偏移尺度，勿修改变量名
-    var RANDOM_SIZE = 0.01;
-    for (var i = 0; i < randomNum; i++) {
-        var coord = [
-            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
-            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
-        ];
-        sparkData1.push({
-            geometry: {
-                type: 'Point',
-                coordinates: coord
-            },
-            properties: {
-                height: parseInt(200 * Math.random(), 10)
-            }
-        });
-    }
-    for (var i = 0; i < randomNum; i++) {
-        var coord = [
-            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
-            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
-        ];
-        sparkData2.push({
-            geometry: {
-                type: 'Point',
-                coordinates: coord
-            },
-            properties: {
-                height: parseInt(200 * Math.random(), 10)
-            }
-        });
-    }
-    for (var i = 0; i < randomNum; i++) {
-        var coord = [
-            point.lng + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2,
-            point.lat + RANDOM_SIZE * Math.random() - RANDOM_SIZE / 2
-        ];
-        sparkData3.push({
-            geometry: {
-                type: 'Point',
-                coordinates: coord
-            },
-            properties: {
-                height: parseInt(200 * Math.random(), 10)
+    // var convertor = new BMapGL.Convertor();
+    // var pointArr = [];
+    // pointArr.push(point);
+    // convertor.translate(pointArr, 1, 5, function (data) {//坐标转换完之后的回调函数
+    //     if (data.status === 0) {
+    //         console.log(data)
+    //         var marker = new BMapGL.Marker(data.points[0]);
+    //         // map.addOverlay(marker);
+    //         // var label = new BMapGL.Label("转换的GPS坐标（正确）", { offset: new BMapGL.Size(20, -10) });
+    //         marker.setLabel(label); //添加百度label
+    //         map.setCenter(data.points[0]);
+    //     }
+    // })
+    // 导入JSON文件
+    try {
+        var path = [];
+        // await Promise.all(
+        // 假设你有一个json文件，里面包含了管辖区域的边界数据
+        fetch('jwdata.json').then(response => response.json()).then(data => {
+            var points = data
+            for (var j = 0; j < points.length; j++) {
+                var lng = points[j].split(',')[0];
+                var lat = points[j].split(',')[1];
+                path.push(new BMapGL.Point(lng, lat));
             }
-        });
-    }
 
-    var sparkLayer1 = new mapvgl.SparkLayer({
-        height: function (data) {
-            return data.properties.height;
-        },
-        step: 0.1,
-        startTime: 1,
-        endTime: 12,
-        color: 'rgb(255, 153, 51)'
-    });
-    view.addLayer(sparkLayer1);
+            var prism = new BMapGL.Prism(path, 10, {
+                topFillColor: '#5679ea',
+                topFillOpacity: 0.5,
+                sideFillColor: '#5679ea',
+                sideFillOpacity: 0.5
 
-    var sparkLayer2 = new mapvgl.SparkLayer({
-        height: function (data) {
-            return data.properties.height;
-        },
-        color: 'rgb(255, 0, 255)'
-    });
-    view.addLayer(sparkLayer2);
-
-    var sparkLayer3 = new mapvgl.SparkLayer({
-        height: function (data) {
-            return data.properties.height;
-        },
-        step: 0.1,
-        startTime: 2,
-        endTime: 10,
-        color: 'rgb(0, 204, 255)'
-    });
-    view.addLayer(sparkLayer3);
-
-    sparkLayer1.setData(sparkData1);
-    sparkLayer2.setData(sparkData2);
-    sparkLayer3.setData(sparkData3);
-
-    fetch('jwdata.json').then(function (rs) {
-        return rs.json();
-    }).then(function (rs) {
-        var data = rs;
-        var polygons = [];
-        var len = data.length;
-        for (var i = 0; i < len / 10; i++) {
-            var line = data[i];
-            var polygon = [];
-            var pt = [line[1] * 512, line[2] * 512];
-            for (var j = 3; j < line.length; j += 2) {
-                pt[0] += line[j] / 100 / 2;
-                pt[1] += line[j + 1] / 100 / 2;
-                polygon.push([pt[0], pt[1]]);
-            }
-
-            polygons.push({
-                geometry: {
-                    type: 'Polygon',
-                    coordinates: [polygon]
-                },
-                properties: {
-                    height: line[0] / 2
-                }
             });
-        }
-
-        var shaperLayer = new mapvgl.ShapeLayer({
-            blend: false,
-            color: [36 / 255, 44 / 255, 60 / 255, 1]
-        });
-
-        view.addLayer(shaperLayer);
-
-        shaperLayer.setData(polygons);
+            map.addOverlay(prism);
+        })
+        // );
 
-    });
-    // 导入JSON文件
-    try {
-        // 假设你有一个json文件，里面包含了管辖区域的边界数据
-        fetch('jwdata.json')
-            .then(response => response.json())
-            .then(data => {
-                var path = [];
-                var points = data
-                var ssp = [];
-
-                for (var j = 0; j < points.length; j++) {
-                    var lng = points[j].split(',')[0];
-                    var lat = points[j].split(',')[1];
-                    path.push(new BMapGL.Point(lng, lat));
-                    // const a = [new BMapGL.Point(lng, lat)]
-                    // new BMapGL.Convertor().translate(a, 1, 5, function (data) {//坐标转换完之后的回调函数
-
-                    //     if (data.status === 0) {
-                    //         var marker = new BMapGL.Marker(data.points[0]);
-                    //         map.addOverlay(marker);
-                    //         map.setCenter(data.points[0]);
-                    //         console.log(111, data.points[0])
-                    //         path.push(data.points[0]);
-                    //     }
-                    // })
-                }
-                
-                var prism = new BMapGL.Prism(path, 50, {
-                    topFillColor: '#5679ea',
-                    topFillOpacity: 1,
-                    sideFillColor: '#5679ea',
-                    sideFillOpacity: 1
-
-                });
-                map.addOverlay(prism);
-            });
     } catch (error) {
         console.error('Error loading JSON data:', error);
     }
@@ -220,19 +139,127 @@ onBeforeUnmount(() => {
 });
 </script>
   
-<style scoped>
-/* 样式 */
+<style scoped lang="scss">
+.Vbox {
+    height: 100vh;
+    overflow: hidden;
 
-.mapBox {
-    width: 100%;
-    height: 100%;
-}
+    .head {
+        height: 120px;
+        top: 0;
+        width: 100%;
+        position: absolute;
+        z-index: 999;
+        // background-color: rgba($color: #0e2a41, $alpha: .5);
 
-#allmap {
-    /* // 注意给dom宽高，不然地图不出来 */
-    width: 100%;
-    height: 100%;
-    margin: auto;
-    padding: 0;
+        .VisTitle {
+            height: 60px;
+            background-image: url("../../assets/visualizationimg/title.png");
+        }
+
+        .Vgradation {
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .tab {
+                width: 130px;
+                height: 40px;
+                margin: 0 30px;
+                text-align: center;
+                line-height: 40px;
+                color: white;
+                font-weight: 500;
+                background-image: url("../../assets/visualizationimg/headg.png");
+                background-size: 100% 100%;
+            }
+
+            .active {
+                background-image: url("../../assets/visualizationimg/headgactive.png");
+                background-size: 100% 100%;
+            }
+        }
+    }
+
+    .container {
+        height: 100%;
+        position: relative;
+
+        .left {
+            float: left;
+            position: relative;
+            margin-left: -100%;
+            width: 500px;
+            background-color: rgba($color: #000000, $alpha: 0.2);
+            height: 100%;
+            top: 60px;
+            z-index: 999;
+
+            .leftOneBox {
+                height: 45%;
+                background-color: rgba($color: #000000, $alpha: .5);
+
+                .leftOBTitle {
+                    height: 40px;
+                    color: white;
+                    line-height: 40px;
+                    padding-left: 60px;
+                    font-weight: bold;
+                    background-image: url("../../assets/visualizationimg/centertitle.png");
+                    background-size: 100% 100%;
+                }
+
+                .leftOBContent {
+                    height: calc(100% - 40px);
+                }
+            }
+        }
+
+        .center {
+            float: left;
+            height: 100%;
+            width: 100%;
+            background-color: green;
+
+            .allmap {
+                /* // 注意给dom宽高，不然地图不出来 */
+                width: 100%;
+                height: 100%;
+                margin: auto;
+                padding: 0;
+            }
+        }
+
+        .right {
+            float: left;
+            position: relative;
+            margin-left: -500px;
+            width: 500px;
+            background-color: rgba($color: #000000, $alpha: 0.2);
+            height: 100%;
+            top: 60px;
+            z-index: 999;
+
+            .leftOneBox {
+                height: 45%;
+                background-color: rgba($color: #000000, $alpha: .5);
+
+                .leftOBTitle {
+                    height: 40px;
+                    color: white;
+                    line-height: 40px;
+                    padding-left: 60px;
+                    font-weight: bold;
+                    background-image: url("../../assets/visualizationimg/centertitle.png");
+                    background-size: 100% 100%;
+                }
+
+                .leftOBContent {
+                    height: calc(100% - 40px);
+                }
+            }
+        }
+    }
 }
 </style>