正文
echarts map 地图在react项目中的使用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
需求- 展示海南省地图，点击市高亮展示，并在右侧展示对应市的相关数据。
准备工作- Echarts
- 海南地图json
效果图
- Echarts
- 海南地图json
效果图
代码
index.tsx
import React, { useRef, useEffect, useState } from "react";
import Sss from "../../images/index/sss.png";
import SssActive from "../../images/index/sss-on.png";
// 按需引入Echarts
import * as echarts from "echarts/core";
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
VisualMapComponent,
GeoComponent,
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
// HainanMap-地图json，HainanData-各市名称映射，HainanIntro-各市展示数据
import { HainanMap, HainanData, HainanIntro } from "../../utils/hainan";
import "./index.less";echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
VisualMapComponent,
GeoComponent,
MapChart,
CanvasRenderer,
]);
function Index() {
// 需要渲染地图的Dom
const chartDom: any = useRef();
// 需要展示的市数据
const [cityInfo, setCityInfo] = useState(HainanIntro["haikou"]);
// 是否选中三沙市
const [isSS, setIsSS] = useState(false); //海南地图
useEffect(() => {
if (chartDom.current) {
// Echarts初始化
const myChart = echarts.init(chartDom.current);
echarts.registerMap("Hainan", HainanMap); myChart &&
myChart.setOption({
title: {
show: false,
},
tooltip: {
show: false,
trigger: "item",
},
toolbox: {
show: false,
},
visualMap: {
show: false,
},
});
// 点击地图上市，进行高亮区域和相应数据切换
myChart.on("click", function (params: any) {
const data: any = params.data;
if (data) {
setIsSS(false);
HainanData.map((item: any) => {
if (item.name === data.name) {
item.selected = true;
}
return item;
});
setCityInfo(HainanIntro[data.key]);
}
});
if (isSS) {
myChart.setOption(
{
series: [
{
id: "hainan",
name: "",
type: "map",
map: "Hainan", // 自定义扩展图表类型
label: {
show: true,
},
data: HainanData,
itemStyle: {
// 设置每个市区的默认颜色
areaColor: "#eff9ff",
borderColor: "#1b85f2",
},
emphasis: {
// 设置每个市区hover的颜色和边框
itemStyle: {
areaColor: "#90eaff",
borderWidth: 2,
},
},
select: {
// 设置选中市区的颜色和边框
itemStyle: {
areaColor: "#90eaff",
borderWidth: 2,
},
},
},
],
},
true // 必须设置为true，否则数据不能正确渲染
);
} else {
myChart.setOption(
{
series: [
{
id: "hainan",
name: "",
type: "map",
map: "Hainan", // 自定义扩展图表类型
label: {
show: true,
},
data: HainanData,
itemStyle: {
areaColor: "#eff9ff",
borderColor: "#1b85f2",
},
emphasis: {
itemStyle: {
areaColor: "#90eaff",
borderWidth: 2,
},
},
select: {
itemStyle: {
areaColor: "#90eaff",
borderWidth: 2,
},
},
},
],
},
true // 必须设置为true，否则数据不能正确渲染
);
}
}
}, [isSS]);
// 选中三沙市
const selectSS = () => {
setIsSS(true);
setCityInfo(HainanIntro["sansha"]);
// 海南数据selected全部置为false
HainanData.map((item: any) => {
item.selected = false;
return item;
});
};
return (
<div className="city-wrap">
<div className="normal-box">
<div className="title">各县市专场</div>
{/* 海南地图 */}
<div className="hainan" ref={chartDom}></div>
{/* 三沙市图片 */}
<img
className="sss"
src={isSS ? SssActive : Sss}
alt=""
onClick={selectSS}
/>
{/* 市区数据 */}
<div className="city-intro">
<div className="main-info">
<img
className="city-img"
src={require(`../../images/index/${cityInfo.img}.jpeg`).default}
alt=""
></img>
<div>
<div className="city-name">{cityInfo.name}</div>
<div className="city-info">{cityInfo.detail}</div>
</div>
</div>
<div className="city-company">
<div className="company-row">
<div className="row-idx th">序号</div>
<div className="row-content th">部分知名企业</div>
</div>
<div className="company-row">
<div className="row-idx">1</div>
<div className="row-content">海南电网有限责任公司</div>
</div>
<div className="company-row">
<div className="row-idx tb">2</div>
<div className="row-content tb">海南航空控股股份有限公司</div>
</div>
<div className="company-row">
<div className="row-idx">3</div>
<div className="row-content">
海南天然橡胶产业集团股份有限公司
</div>
</div>
</div>
</div>
</div>
</div>
);
}export default Index;
index.less
.normal-box {
width: 1200px;
margin: 0 auto;
padding-top: 52px;
}
.city-wrap {
width: 100%;
height: 740px;
//padding-top: 60px;
background-image: linear-gradient(to right bottom, #81bcff, #006def); .title {
color: #fff;
} .hainan {
display: inline-block;
width: 600px;
height: 600px;
} .sss {
position: relative;
top: -50px;
left: -200px;
} .city-intro {
display: inline-block;
width: 500px;
margin-top: 50px;
padding: 30px 18px;
background-color: #fff;
vertical-align: top; .main-info {
display: flex;
}
} .city-img {
width: 150px;
margin-right: 18px;
object-fit: contain;
} .city-name {
font-size: 22px;
color: @primary-color;
} .city-company {
margin-top: 40px; .company-row {
width: 100%;
height: 50px;
line-height: 50px;
display: flex;
} .row-idx {
width: 48px;
margin-right: 3px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
} .row-content {
flex: 1;
padding-left: 40px;
padding-right: 10px;
} .th {
background-color: #d9f2ff;
} .tb {
background-color: #eff9ff;
}
}
}
hainan.ts
export const HainanMap:any = {
"type": "FeatureCollection",
"features": [{
"id": "460100",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@¢NDxBrCpI^OTGjGfBBBFFB\\PlRRPJhJ\\DC|K|Q¤kfGL@PDFAHGFMFENEJGNODK@OCE@AFAHEXGJEL@BEFAD@BC@MFGD@DAL_CKAEN@D@BBNKF@BEFEDGFCFICMAEJGDUBGAEKIAEHQJAXFN@DCBEJIJCBGACWMCG@CFGDYFKCEMEGEE@SAKFELBFEDEIEBIAKOGCEGAAACECCBCABIB@FDB@ACXA@CCAKAACBGAAEAEEAIEICOCCCAGEGSBEHKBIDA^IDE@ICEGBOCKBIGE@CAGBGGACJCJ@HDDABMGGFU@MAEFGPMFBHCHBTADCBCDAVBD@@AEEGAGEKABGC@CCDECIDIAEGIEMGECIIGAC@[AKFMDCEI@CFBDAAGBGCQGACIE@@AOEEDKACC@EGBCAEBGACFC@EA[CCAG@ECG@EDC@EBCDELEDC@OABDAFDDDJBBBFBF@HDJMCWBECAEA@UVGDC@ABC^ABM@IHGDABOEEK@ACAODGDK@EGDCAGACCAGBKFI@KHIBGDGNAJDLFJ@@EDC@CCAB@DCAKBEEABGAEBADCAAFA@AH@BABBFADBBC@BDADGA@BCB@FCDANEHGDAD@HADBNBXBFHJ@FAHXLFJBFAFCB@HEFCNIBBD@HDDADIAASCEeDCBIECBIFEBEACCEAOCEICCGOEEICABWJC@CAI@GAG@A@EGEDE@ECG@ACBKqGUIE@KJAHHFBTFNBBABCDAJQ@IBAT@BFDBJFF@LNFFNFADBABCBELDVCDYL@JGJIhABHR@H@FCFARWRGBIAMB@FHHPAHBET@BABCCMCAA]LEAKIMGC@C@CDAJ@BF@HDRA@FCF@DBVGHKDAFFJFDNF@DEHI@MLEJ@JDHB@DABCH@BDFBBBAFDABCJEDGB@AJID@DFBLA@BGFCCGBEBAFLZBBBBCH@FDBHBCLDFCREBACCAODGAILKBBNBHKJmx"],
"encodeOffsets": [
[112750, 20508]
]
},
"properties": {
"cp": [110.43119, 19.900071],
"name": "海口市",
"childNum": 1
}
}, {
"id": "460200",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@FDFFAF@DZRRD@B@LLTFDFFABJDLALPRDHADBHHLBJABCD@RdD@XMHDJHDBFFLDDLRE@ABCDDBABFRDREBDF@DDLDDADEJAFCFKDCTCVL@BEFBDJBBHFFAHBVCPCDEBAF@JCJBPBFDBDH@HBLBBF@BFJFANBHDFFDFBF@FCHA\\CRHJHF@FGLCD@VODINQLBFAHC@EACBMDIB@JHHDHEJBFFFJBLKVAFBHFJXZBLDFFDLDPDLLJ@NLJDNNNJNZNJHAFB@CHG@OCKFEACF@BC@CBGLU@GDCD@@A@CEIFGF@FDBBBFDABBB@LCFETIDCN@XFJEFALEJBFAL@DDFGBSDAFAZCPGFCBECWBG@A@EBC@OCCDMCEIGGIDIEEAQEC@I@ALI@GCGAIGGKFBMNMPE@ADABKLE@E@IBGFCJAJDFAFBDAFBBAH@@CTIHJNFNMHBDCFAJFF@D@DBBBDBDAFBDBDFDAF@LL@CJKJCHBJCB@DBHAD@@FBDLDFEDALFGN@DHF@HN@@LAF@JPTB@JIFAHI@@BB@HER@RDNBLFJLNFBFAB@@FCHDJCFBH@DP@NHHHDCNFNDDRBD@R@DH@HFHGD@HI@MBAECEQFOFENGV@BCJMHGFO@EAEGIAWCGCA]ECC@EDODEF[MEFGFBB@\\«UEQICCGUEmW{C]CgW¡QO]MeIgC_DUDO@QCeMc[YKWEWAUBMDWP_`IDO@}CUDMDGHM\\KJSH×VUJsRħI_BUBQLELIjMlEHGDSD½DAQCKGEGGCKGBGDGHYl"],
"encodeOffsets": [
[111547, 18776]
]
},
"properties": {
"cp": [109.508268, 18.247872],
"name": "三亚市",
"childNum": 1
}
}, {
"id": "460400",
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
["@@EGICEEDIEKDKEGAODIHEAIQMEKSUMGGKEW@EHGHAR@D@DEAQ@KCOBOBEHCBELABE@KGQE@GBGFIAACFMAEEBIAKAIGUHONO@GAQCSKK@KDGAQECEAE@CJGBC@CCCASLMIUBIDAJCFDL@HCHFLADEPB\\A@@CC@CFE@EFBDDF@@IFKDCAACCBABK@SCOIQEMGGCMAGDEDCHSBKDGAuCGGGAKEECEAOGIAGCKKNITEVCDEBMEUCaCCLSNQTAXAF@ZABKDIAAAAEAGE@GGEBCHCRADGHAHABKFEHEBAD@DGHEHAJGDADEPIDCNE@GGMAMIKCGCC@CFFB@DKBeKCACA[HBBFJDLBDTAAH@FHDBPHFFAFBAJHL@DC@CH@JFDH@DF@DCFEDG@@F@FGDELIJAFNLAFEDEHAFC@IIQCKBI@EGQWEMDOEEQKEEKEABMDCDGEC@G@IIGDEAE@KFEDDD@BEFADBF@DIDABEAAAA@CFEFC@@AAAAFE@DE@EEGCB@FA@CCCA@HABCEIBCRINIBIHA@EEA@ADBDAFCDAA@CGAEKCDAFABAC@CEEGD@HCDADCDA@CCBMAGC@A@W@@CFC@AAASB@ABGAAMFEFAHOAILM@AEC@A@AHA@IE@ECCO@ABEJQLGBOEECE@IFGJBH@JHNZRGP]AUBEFITINOFGFCHAJKTEHIACCAKCEEAEHEDGAWBIFCHUJODW@GBG@EEESB]NWBIEQMIWJWMGCM@KBGDEDBF@HAFCBEPAJDB@BABGDCDE`OBUHENGHKDIAEACBEHWvTVXRtX|lXhN\\Xj^b^NXHhDRDNLZ`DN@HMbELCLBd@PP^JJPHlTFHDXDFV\\JFPJL@PCFBPJBNFN@bFLDBF@LALEH@BBAJDHFD\\JN@rKFAVUFAJ@JBN@IQĘyPEDIFe@aAU@KJgDKHEXCJEHUAOAEBYAGGI@EGCKDBIKGIIEAKAKLC@@IAMDIDEDAJBNY@OEEXOJUIMAGHAF@VJJOHADEN@DCJJXBF@DCFID@@FFDBADEFBL@DBNAJB@ASEIMBEAIJACGDCBCAADGBD@JHK@AACF@@CF@@GBAAFDBEHAF@@JCDCBCBB@E@ABAAAB@BFB@DGB@FEBBGFADBBD@@EDABBNABEJKFAJJRJREBCJBIHC@DB@BFGHCDFCBH@BHBAAECCAEK@FGFABCDBHCL@DAJHPB"],
["@@MEGBID@FDHRJNBP@dEjIHGBCACICGIC@KBCBI@]JCBAFM@GA"]
],
"encodeOffsets": [
[
[112404, 20049]
],
[
[112059, 20391]
]
]
},
"properties": {
"cp": [109.376782, 19.517486],
"name": "儋州市",
"childNum": 2
}
}, {
"id": "469001",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@@AFSLKEEAK@IJKDKDANQHU@YJQDCbKDABMHMDAbAJYRFRADDBJJDF@TKFFPBREF@FFPHFFLALFNEFEPDHCFIfEBA@ECEMKGCKBGAUSAEBIHKHCHGHGBCBKAKAQ@OBCAAKCc@ECAECEFMJI@EIEEI@CFMKIAAHEDEAIBCHIBIJKDKPa@CCCAOAAAAIDEAK@MHKBEAGAIASBKEKB@IEIAGECAC@EDIEOCAGDCAIQ@EA@MJEFAHGDADE@CAIBIRGD@HCJKDK@AD@HDDJBD@H@DTAJKDCBICIDG@@AD@@EGEQGAKIEEOEGCAKCIG@EFGJaACCCAGDEHMDA@EGAOAAIEEI@SJiMI@IBMACFK@EFI@KDCBKMCMEKMMICa@CBCJGDEFGLHhAPKLE@IBAHCHEFEFONIFKRAF@LAPBHFH@DGRCPBDFB@DIP@LBFDBHADBED@B@JEZBJEH@NHJDLFFARBD@HFDBFNJDHADYbGDI@QFDFDB@DG@HF@DIJ@DBHILAHEHMBEJFBCHBFBDTLBJBFPDBFVEFCDGDCD@TJFD@LBDHBJHJ@TNHDAJNTNHHPDBNALBHBJDPBFDDHFbFZDDFCFEDALBVHRGJ@HFNCLD"],
"encodeOffsets": [
[112153, 19488]
]
},
"properties": {
"cp": [109.516662, 18.776921],
"name": "五指山市",
"childNum": 1
}
}, {
"id": "469002",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@o·}WyocGcQÉFUBKFCHANC@CBIEE@GFSWIQKEE@GFQTOJQ@OKHaKOOKaAQGMGOG[S[KmMWCACC@@EBCAGBGAAACE@@CCAIAM@IEE@EAA@CHC@CCG@CKII[MMDQASIYEIHMTAFADADILECGEIBGAEBKEGBEFBLDHAFKBEAAAAQHMAGA@MAIDGRMHEJA@CCIQCJEFADDLFH@BGHQDINAHCBEBIHAHGBGZFF@JBFBPGf@^KlD@PPPTLT@P@NHNEZDPHLJ@Z[NGRFVJZHRHNDT@EZJ@XFLCZQL@JBJHJDZINB`\\RBJEFEFCJBHHDPCJGJCJ@LDVHLDDZDFJ@JALCLEFUHcTCNLTDP@DFXLJf@FFBLCP@PLTPHZBHBNLLXHFHAFCPCHFL^HJNNLJLBN@VIL@JAHDFFDRJNLJJBRCTEPDVDHcFITCJCPULW@QEQBGLGDKEiBKHK`KRH`VCXBJFPDDJANGFPJDLBPCVG¬Y"],
"encodeOffsets": [
[113388, 19844]
]
},
"properties": {
"cp": [110.496785, 19.246011],
"name": "琼海市",
"childNum": 1
}
}, {
"id": "469005",
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
["@@FHFBBBAHBDLBDB@DWBBDA@ECA@AJDBDAFDBDBBFHHDLPJBFAFJFCAEFKLETBF@HFNFDFELCZEH@DDHXNBDAHIDIJAFCDM@WEIBGRBFLJBFAHCVIHBFDNEJEDCHEFAFE@MLAAC@M@BFDLK`CBC@EH@NADC@EBAFK@IFWHGFEB@BDF@PCLMPIHMFEFENGHEB fjRPPLXLXJLDRRTTTRHDL@HA\\MLM`³N_JErETE\\SRWPUZSlQbGXCPVL\\H\\ANGJKFOhÉtý~ñrģFmEUMMWIQCASE¥{{gg{qiiQGOEuEEAIM«ZUHODKAICEOMHIBCCEOAIDW_UQGODOHGLALFjCLKHAHFR@RCLKTKNIDSDEJGdHHDTAJORGFeXMBK@mQM@GDCDCJC^BLJJLFNJHNJHLDVDLHNKB@BFFDXANDCI@GAEAEAACICCBEACPBD@FCFKDCFAD@FCH@FDH@DB\\DFBD@DEHBFADBHA@FDDLBFCPF@BF@DJHBDRAHBHCBEA@DFJCDENBL@\\BDJHDJHFFNHJBFCJDJCFDDD@AHLBHFHBFF@BC@UACBADCDSBGAGDEAONEHBF@NEVHHANCBGCI@IDBDHHHADBF@JHLAPDHADF@JCF]JCBAJGLAFHTHFDBDDDPHR"],
["@@@HJD@CAAFK@CA@KJ"],
["@@BDB@DBB@CGEB"],
["@@BB@AA@"],
["@@B@A@"],
["@@FFFBAGEACB"],
["@@@FB@@CAA"],
["@@BBAA"],
["@@@BBAA@"],
["@@BDDAEA"],
["@@BBB@CA"],
["@@BHFAHK@ECACBGJ@B"]
],
"encodeOffsets": [
[
[113296, 20243]
],
[
[113943, 20459]
],
[
[113936, 20444]
],
[
[113935, 20443]
],
[
[113930, 20442]
],
[
[113924, 20438]
],
[
[113872, 20402]
],
[
[113873, 20404]
],
[
[113875, 20391]
],
[
[113886, 20359]
],
[
[113885, 20360]
],
[
[113871, 20387]
]
]
},
"properties": {
"cp": [110.793975, 19.612986],
"name": "文昌市",
"childNum": 12
}
}, {
"id": "469006",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@cšO@cFqDa@_EeEQMWWU_O¥[AACY@sHA[AEGCOAŁcI@KBQTY@WsW]QdWBK@KBEDAJC@QBEGMEGIKCEFIJEBOZCBKAG@CBYVGNEB]@KCC@IFGHGNARMJI^@HEV@RDJBFEX@HDL@N`JBNAF@DLHHPJ@NID@FDHPJLBBH@BDEHDRDBNDDBRRJLBJENKNGRALQXUTKVW\\FJzXTJPFHDLLDLA\\FPtPPAPBFPPBFJRDDB@FINGHQJCJ@FBBHGN@PDDJ@H@BA@CCGAKDCFCD@LFFAHBJAHFFDJKBCBCBENSJGZFTJRBNC\\NJJDLH@DDD@DGB@FBF@JFN@JBDB@DF@BDBBAHBHAD@FD@BDXDnN\\L\\TPHNHRHbBPLLPGbPLR@PIRSHEF@LFJRTXHEF@JFDAD@BMDGLEVAE"],
"encodeOffsets": [
[113266, 19543]
]
},
"properties": {
"cp": [110.388793, 18.796216],
"name": "万宁市",
"childNum": 1
}
}, {
"id": "469007",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@BEE[SESBQEMOKGGIACAmAEKKSBSACCAECAKDM@KDMBKFGEQAECKOAEIKIDQBC@CEEAKBOHQCEBYBwOUIIGSKQQmQ_YccM@]DKAKKGFILOPKDOG{@ICUMGCTI\\ejqrapI^A^@TDTL^pp\\ZDFHTMäADaXIRUK¦ATôJFXNZbtZVYJOHUAEDKHCDE@CHKDETOBEBCDKDGJGNGTEXCNDJAfMxOD@LHFBX@LBJDPLRDFCHEHMJCNAJCp]\\BDAROPEJBJDNB`CLAHGHIDKLKBaHYFKNOFEJAL@NE@AIKOAEA@CDG@ERGF@NDHCFGBGFEDS@AEBCCEICACE@EDEDKAIICCEHIEa@EVULDREFDFH\\@FA\\QL@`GL@DCRuBA@IDC@EDYAIDICI@ECC@CGKAIMS@YMKCQBCBCNCPMDEDIDCNENK"],
"encodeOffsets": [
[111745, 19332]
]
},
"properties": {
"cp": [108.7866700000, 19.0961400000],
"name": "东方市",
"childNum": 1
}
}, {
"id": "469021",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@HBDA@AEEBEACJADMFE@GDABEAEEIWKBG@EGIAEAWAMBC@GBCHCFGBMDC@EDA@AHBBCACD@AABCAEBA@ABGB@BEDBBCFAHBBAFFLADB@CBADDD@FCEICKBIFKJEJAHGF@H@RGFBDJ@DCBFHL@HCPCDB@BFLPFBAHCJGN@BAD]BAD@HCHE@CKGUCKCIGGMMIKEIIAKD]DIDCHCH@F@nRL@NAfWHEPQBICSGGUCOCSFQDIAKIIMCQEEGCIBK@UJM@KAKIMMGIK]GEODEDGBGEKWMKGAYAOGKS@ODOAKEEe@KIEW@CCOKSDMdSVGFEDKBUEIYCCCGKCU@KDIHIDICOGGIAEDEFIFQA_[MAYJICIGIAK@YRKDWEI@DXC`DTBlDJCDBHDF@BEPABEAE@CBAFMPCEM@SGIAEHCDHJABGBCBCJBDRRBFAJEHFHKFIEC@EFCHIH@FBNCHAHCHCPHJB~LRZTJNLHRAPGTCPDJR@jBLNJRALJ@LIRORIDKBOJO@IF]NAD@NBBFBDB@DEB@DDNAFCLBN@BEBEFCHBLCDG@GCEFABECCBKKABMCAADCAGBCGA@CDAICBAGCBEI@CAACCA@EA@IFAJCDADBRTD@HI@@JAD@FC@CCCCACE@CFCFBJFFDDRHHJ@HAPKXGXFHTBHL@JHJRFNEB@FARO@CCEDIAEFGF@DA@IHAXKJOLDDAJEDKD@HDBDCHGDCJFFDHFBHJN@A`DFNHNBHHALJVAHBJH@FDF@FCFHRBJ@DBJADANEBAJDFFHPDDFJPDFBDDFBFAJEDAJFDAfCDFBT"],
"encodeOffsets": [
[113028, 20202]
]
},
"properties": {
"cp": [110.369235, 19.484966],
"name": "定安县",
"childNum": 1
}
}, {
"id": "469022",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@HCBFDBBDDBJ@AFHDABJDCB@DHBADBHCDBBNDBALLDAFDBAFEHDH@DCAKDGFEFA@AAMDKBECM@CFA@CCAEAAA@MBC^MJEP@PILAJCPQJQ@KKIQBMIAK@iIQOCSDOHQBKGIMYSKQA}GIDODGBGDGAM@EJGDGFED@JFLEEGFGBIAEQQACDIDAHABAGIDCFGJBTHN@DFNOBEDAF@FBBAFO@ACEAGDCCIAkCSD_CWFYS@MCQGYGUIQEMHY\\I@GKCOFYGM@M@OKSOSOOC@KJODO@S@eIQAKHEHAPGPSPCDCJDHEBAAAAQDEAGFCAI@CHEB@DBDEBAFCAADa@GA_CGN@FBT@HGNKNMLOFMJKBKA_AQRcnEFGDMBM@CCA@MLQBQVDdDFCJDHD^@DGDFHHDHFF@LJ@VFPLTPJJBJC@DDBDCFBHIHGJ@D@PNRBJJ@FGA@DC@@BDDJBBD@DELIAC@ADFBJBFB@F@NDJDBFED@RDNAFB@DGLICEBGB@FBFDDF@JH@LJLCH@BLBDB@DIBKN@BDHALVBZFXA`KRANBbFJCJEDIDYHKNCTFTHNJDJ@JGNDPRJLBdAPDPJAJCHILBLDD@FADEFCAABCACBBDDDCHEFBBAHNDD@FABABB@BFBBBBBADFBJHFAJ@BABB"],
"encodeOffsets": [
[112781, 20030]
]
},
"properties": {
"cp": [110.032773, 19.362916],
"name": "屯昌县",
"childNum": 1
}
}, {
"id": "469023",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@nwLIAGAMLAJKHBPCDBBDDAB@BGBICEDKGACA@EDGAAAAKYBEFAHADDHE@AKBEA@CJCBIA@CHIFADCBBEAAEAACG@ADCBA@CG@IFINKJ@FG@CMEECEIBELCHGAU@CDE@EQBGCE@@ABIDCH@NHLJFB^KBBNDDDBA@AFSGAOBGG@ENAJBHAXQBQDE@E@GGQBAJgHI@IZKDCCUFKDABACAEBEMME@KEEAIEC@ABSJAR@BIDCBAAAEMASGEBGLIF@VJrH@EIQBKGGMAICEE@cM@GIEACGEEDIHCDGACGCC@CLIFCBKCIPWLGB@JCBE@EHBFCJDF@DQPEBA@MFQEGI@IGKSAEGHWLWBO@GGIQGCCEEAIDEDEF@BDDDDDD@@EBC@IJ@@GSCAQBCDCBIBAAAABI@EBIGEABCAAAAEA@AAAABEBC@MCBGAAFEDGCCACDADBBADBFEBC@ECCAKJKDGBIOIOCcBKAQICOHM@ICIMISGSEMDGLCZCJIFIDaEMAQB_LWBYEUABKCG@ALMJA@CCAKA@ADGIK@KIGE@CCAE@EHAFAJDHK@CEAMBQCC@EFCACI@M@EEAIAEABCD@JBFK@CACIACC@AD@@CHB@EIIQAQMI@C@EHOVIBBL@JIJGBCBABHJADEBEEBGCGGEOCAI@CJCLGDABAACIBGIA@GJC@ONC@ICIGQAKKMAECAMI@AHGBE@EHEFABDJKPUFY@OLBFENBDJBHEHAF@HR@LAFKBAFGDAFAPDP@LBRCFC@Q@GBGH@FFXHLNHTVFLRNBJGFCJBPFHCLFLCJFFJDDFHDFHBHJNHT@FDBH@FGLGLAJBRELBPJCH[HENBJHFLJDDBPFHNHTDLFDJ@JDNJR@VBPFL\\`HLBXFNCNANJBBBFL@JDJDL@DEHGDEJWJADFT@JFFJD@DCLUF@FDJLBFBB\\KDI@CJCBMAGBORQDHJFBDFAHKPLBJALPFQDAHBDC@CHABCFBLNHV@^BLYFIRc¤ZFPBpCbK`OZBTÄ"],
"encodeOffsets": [
[112750, 20508]
]
},
"properties": {
"cp": [110.007147, 19.737095],
"name": "澄迈县",
"childNum": 1
}
}, {
"id": "469024",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@X|VLR~p^\\NJNDP^@^NTRJDNDP@TCN@dHL@NCTK^cZUNCXAPBLDZRNFNDR@LALG\\Kd£JQZEAK@]GUKMEAADGB@DCDGACBERKOIBKALOBGCEEAGIRCPQHANBDADIJ@LCA[EAKACI@EVEDK@CICEE@IESBCXIFIHCFG@CCKCI@IEKAAIABMDMEMAWGK[_EKAO@UIQCM@ICIKESCMGEGAOCCKIGEAIFM\\GDGOIKAQFIAKBKHEHG@CA@EGSIMAGEGEAOAIGCBK@GDCAADEBEHL@BFDDBFABAGG@DACEGDEH@ACAD@JGIAADQFQIIIEBILAFMBAACB@FC@AABCHEAAEFA@CHA@AEA@BBAB@B@FAAADCDIDBEFGCABEAB@HE@@DE@BD@BGL@IACCHBBADCDDHIBBJAFJNTF@BIAMBCAK@EACFABEC@EC@EJCDE@WAIICDM@CFGBIPUIE@GBBHJNIVWPFF@PMZIACBCFCJBN@JD@LKLBFBJJLHAJLCHD@FHJBHAZBFBPGVIFWDGFCLIhDxGrCJOF·`"],
"encodeOffsets": [
[112127, 20351]
]
},
"properties": {
"cp": [109.687697, 19.908293],
"name": "临高县",
"childNum": 1
}
}, {
"id": "469025",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@PCVIDGJEXAHBFCFGFBDFBLDDJBFGLSBIDGHEPEJMJSFEVA^BHOYQGM@IAGHIJEF@FDPFHARKFIBAP@DD@FJFB@BGB@D@BFN@JKPBBGFENEBBAH@BTABB@BED@DX@B@D@BHANDDB@DCBCDC@GHCFF@DBDBABEDCFLHB@DBBDCBEACBCB@FFB@JGJAJMDQJADFBA@GDBDDB@@EDAFH@FCFF@BEBB@BD@FEDEB@BBFBBAJC@CAEBCFE@ACCFCLEF@FBHCJJH@D@HFDCNCBALFFFRLFFCPFNRXFHJ@LARDJJD@BEFGFCBEMKBEJIFKHC@E@EH@FCDE@CCEG@EC@IDGD@@CGKBIEAEBGEAOGC@EBGSBACCKEIAA\\GDBDBfLLA@CEADED@HDLDNJNBHHF@DMJCFOBCHCBIFGHG@CBCFAFGLEBABGHGBCDQDGFAHHF@BHBFBBJBNC@[BEBWRSTMDKrFTHFADAFWJSLMCKJSBCTKBICQDKACY_YTW@IGGMAKBMAAICKIOCIBE@EGUKEG@EJ]CMGEEAKAw`OFOBIAGCCCEECE@QCMAMKCIGIEKCMDGEI@QHUGKAEBGHC@G[EaCGECOAICGAKAMBCAGOMGMSBIGCSMI@IGGAAC@G@CECSIEBEJED]HMJKCC@IFeLKFCCIDS@AHBTILADBBDFJNBD@FAHEDCFD`AFCDBJCFAHCFDLBNCH@JKDKECBM@KFINMAI@CDGDGCG@IRKHMDIAOIGAGAIBMtKXEHANFVCLIJk\\KNM^ETBLXnRrBNBRIPGHGJKLGTADIAGCK@SLKTCTIL]@QFKFSRERBRDHHHJL@VIVCNCjBNNJFRAJMXA^FTFFH@HAX@"],
"encodeOffsets": [
[111689, 19955]
]
},
"properties": {
"cp": [109.452606, 19.154584],
"name": "白沙黎族自治县",
"childNum": 1
}
}, {
"id": "469026",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@ASDcDMJU@UIKGGCGAQFQTQLERE^@JKDSLSTKL@HDJBBCHSLKHIHGJOAQAMQqWmAKFSN]LMl[JIDKEUBMFGLWNsJAHBHBPJJBNCLGJQH@HDHCDCJ@NBJMLEN@DALFLC@IDGAMCKDEBGDEAIDCBEC_DEFCBG@EACMSACLMASBGT@JC@EGOG@SUMCIGGYB[AAEAKAACEAMCOBQAGGECKDOAYNEDCHKDKDS@GGSBKGQ@EQQ[EEA@MLMFCDCJCFONMDADADDRNL@ZNTBJHL@DDD@FDJCJBJCZ@FCD@JABQvCDK@_HK@[REB[@EGECQFKCUV@FFbGJDFJDBJCLCF@FDFDBFJDDFA@BCTEFAHEHGDMCE@QH@FCH@DFBPBJL@BMFK@IBEFMPELGZAbKLCLGJGHKB_DMAICIAOFQPCB[Ao^IDMBIDGNGFEDQCOKICKAW@EAKGC@wPeNIBMCWDSFMHIHCHCLADAFSPCFGL@DCFGDCLBFGVIPUZNVZ^`N\\LXDBTDdRNNj\\XbNhLZLjXuFGDAFBJBLCHGFMVGPAF_DCHCBA@ACABIFODABE@GAEFCHCLAN@HDXNXI"],
"encodeOffsets": [
[111662, 19897]
]
},
"properties": {
"cp": [109.053351, 19.260968],
"name": "昌江黎族自治县",
"childNum": 1
}
}, {
"id": "469027",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@EAGBIEEECMGIMIMMICMKI@MKMCQGCEAKWYEIAGBELUAKEIEEIAGFGCIGA@CJANBD@FGDEBKAMRCJUPC@KDEHE@IGQG[DGBEDE@EAECCEAGBMIEAEE@AAAK@GCGCAAEAODI@IBEFADCDOAUBGEEAGIAACFE@AUKSDCDELEDIBCFCBKCCCE@ACQFQCAEABCCAD@BQFCKKCEECAIGGCWNC@QcC@ADIBKAGGCAGBQCKOKBICBAEEECKS@K@AQCYQ@CBEEEECwapIFCBsBTqTkJÇDkHePWNQXIZGtChDbÆNIHVNJD|@PHLCPOJKHELLLB^CN@dd`ZnRRRTLJHVJxPZAFARDPGLAFBDFD@RAJCJLBFLPFDRBHFLENALCN@LCDBBFDDTBVAJLBFBnBDHJLHNPRFTATFF\\AFHFR\\FRP@NHTAHHT@XGDGFCVKFANBJCHDHHRBPANDFBDFPBBFAXHZJHNDTVH@B@FP@FDDLEfKJED@LDNIHAAEOCAEAISKCIDGEAFINAFGBGJKAGJOACECF@BAGIREJ@HCZaBCCGMIAEEC@GACBQEECKGI@MFGAIFY@I@AFCCAGBCAAE@KJO@CEAACDOHQ@CEGAGBO@KBELQJEPMFEFEDGBGJAF@LKBOGgHKFEHCDKEG"],
"encodeOffsets": [
[112031, 19071]
]
},
"properties": {
"cp": [109.105444, 18.64758],
"name": "乐东黎族自治县",
"childNum": 1
}
}, {
"id": "469028",
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
["@@@MCK@GFWAECI@IF]@GJ]NIBQHMHGLEND^@FAHMZUDAH@LBDAPYFAJIFELDHJNFFHRAD@BIFCLAL@XAcµaQe_IKQaM}U»GOKQSK¡aOA_BSFuReFsBË][[¬A@EAEHNFE\\CFCP@FDD^FDBDHBXHJBF@FEPGHINADC@Q@MHEFEPFRFDJAH@JJJAHHD@BE@EBGHAFB@FDFDELCJDNTDJALCFBNPHD@FHDB@LDF@DCHEB@F@DQCCAC@CDI@EDANAFEDG@CAGD@@@FEBEJDJ@NAH@FFXALLDHHNBJCDB@NALCHEJAHDDN@B@BJDDFRORIRGDANBD[@CBCBCN@PBDC@QIYEA@MJAD@JLNADOH@BHdAB_HABDPCLBRNLDLRRDIACBADA@CBAFGP@`[BGBGHIAOBQFOJ@B@HKPQJ@NFJ@RCDBNPJFDLBBLAJPFDFABAHQFIDAF@BHJFJHHHHLJBFFL@HJJF`DN@ROJBFEDKLGDEBKPKHIHCL@"],
["@@DBBAECADB@"]
],
"encodeOffsets": [
[
[112656, 19183]
],
[
[112788, 18878]
]
]
},
"properties": {
"cp": [110.037218, 18.505006],
"name": "陵水黎族自治县",
"childNum": 2
}
}, {
"id": "469029",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@QQCKKGACAIDSCOBA`GBAGc@APGBCKM@IDENGZFRJD@AC@ODMDADA\\@ACBMHCJQPQEQCCAIA@M@CCBGFIDGBK@MCAIDMAGGIC@KE]BOCOFIFA@EHCDBH@FCBEBMFCJ@DCD@DBRD@C@EFADG@CCE@KCAEGC@OGAMDEBKCIMSICKDCFCE@EEAGBAH@FAFA@EACEIBIIG@IBABANEJC@GHGEG@@C@QACCQMCMECDGGMGO@@CAGDECIDG@EA@EBEAKMEIAKCM@QFQ@GAA@@GJEBIJA@OS@IBE@KM@@GGE@CHMKECBEFKCAC@EC@GBCAA@IDGAIDIL@DKKE@CBCECAEACBCAAACAC@E@IEEBCDGAMNMEGISJ@DG@ABEACBEAEBICOFAH@J@FKFALCB@BOFMNANLEHHBJDH@HKJ@B@JFDBRFFCJHJJHDFCNDD@PAD@F@BAHDXAFEDOHYDEBCBATEHCCK@EBIAKFEBIFWEM@CDSJEFKDA@AACBAEAAECE@EHFJ@D@BC@CD@HKVAH@DADE@BDEFDL@PGH@DFHF@V@N@FDNNFLDNLNDALCJ@FEL@DENBJAJ@jNTIJ@FFBJPBHB@FCBGNCFBHDDBDIbEH@FJHLDDBFHFPJFBLRHHF@FC@@BH@JCJDDALCBICSG@C@IACC@GBCL@LCDI@GHCJQJADBF@BCHCBGFENIB@@FJRDBHCDBFPCJ@FBDFDBHFJ@JLALFTAJBHBFBLANGL@FBLABBBPDD@DObCLILAJGJADBJCFGFBBLJENBJNJ@HIHENDFBFFDd@LDBBLAJGHAPQFAJANDL@LDD@JGFO"],
"encodeOffsets": [
[112409, 19261]
]
},
"properties": {
"cp": [109.70245, 18.636371],
"name": "保亭黎族苗族自治县",
"childNum": 1
}
}, {
"id": "469030",
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": ["@@EAEDAA@CIDIAOIKSEO@UKIE@GEGCEGHC@CC]CGDICEA[AEBEPQRANKB@DDN@NAHCFEdmRQ`BLBLANIPENKLMHM@GAS@EHM`DHBb@BCDBBEFAAC@CFADGJ@DBHEFBRCBBBBFACGDIDCTOHOBOFGLGRBfJd@PCLILk@]HeAOAE@IEEHYHABGJGFADABGJMRCHG@AEGCKBCFEDMAAOOAEBOOO
sEOB[CKKKGCOESIyWEIX[LUVSRWBKHQLMFMAIIKQQCAMCCACQFGACG@AAIKGOECC@MJI@GOKG@CBEAM_IK@GDGJOLALCFKHCLEFIAQPM@_CIEGIK@EEIAGKGGIGIEAGE@CBEJGRABEBECIOKBAACKIEIKEEYDIAGCKBMPGLA@I@EPARBPGJAHAH_\\O@EHAB@DCBABBDADIVIHMCK@MCIBEBORGBGHMBAD@PBRBLALADGHGHGDGLAJBFVTHBLAHDRR@DADeFEJGDCAIAGFMFKEKBEEOGEEE@QFOAEESLE@ICAICCQBQEIZaBCBGNANCBaLCDIR@ZGVMRCBCLIL@JBLFFKLET@BJFFFRF@NDN@RJLLHPBZGx_LBFBHFDNI^@FFHVLFHF@JAPDLJJDBBANBLHNJHX@ZS\\bCNDRAJSLADGPADHXBHHJBPDFFFBLHHDHBvCHALGTCDCFBHDNHHFNJRDP@TALABDDBBCDEL@JE@CCEA@FEF@DDD@@[BOACFKBGEGDK@ECIDCBAJJVKNBTDD@DADIH@DBHDDVHD@LCL@TLRDHBP@PMVGNHRDVMZ@VELOCIBAFEFGLABABEHABB@DBJFDNBLLRBJHJDD@PMD@HIB@HJJABDABCBKHID@HBFPDHFDHAHDDDBDABCGIBADAHAFEDGAQJAHK"],
"encodeOffsets": [
[112514, 19853]
]
},
"properties": {
"cp": [109.839996, 19.00557],
"name": "琼中黎族苗族自治县",
"childNum": 1
}
}],
"UTF8Encoding": true
}export const HainanData: any = [
{ name: "海口市", key: "haikou", selected: true},
{ name: "三亚市", key: "sanya" },
{ name: "儋州市", key: "danzhou" },
{ name: "五指山市", key: "wuzhishan" },
{ name: "琼海市", key: "qionghai" },
{ name: "文昌市", key: "wenchang" },
{ name: "万宁市", key: "wangning" },
{ name: "东方市", key: "dongfang" },
{ name: "定安县", key: "dingan" },
{ name: "屯昌县", key: "dunchang" },
{ name: "澄迈县", key: "cengmai" },
{ name: "临高县", key: "lingao" },
{ name: "白沙黎族自治县", key: "baisha" },
{ name: "昌江黎族自治县", key: "changjiang" },
{ name: "乐东黎族自治县", key: "ledong" },
{ name: "陵水黎族自治县", key: "lingshui" },
{ name: "保亭黎族苗族自治县", key: "baoting" },
{ name: "琼中黎族苗族自治县", key: "qunzhong" },
{ name: "三沙市", key: "sansha" }
]export const HainanIntro: any = {
"haikou": { name: "海口市", img: "hk", detail: "别称“椰城”，是海南省省会，国务院批复确定的中国旅游度假胜地，是海南省政治、经济、科技、文化中心和最大的交通枢纽，是国家“一带一路”战略支点城市，中国（海南）自由贸易试验区（港）核心城市。" },
"sanya": {name:"三亚市",img:"sy",detail:"别称“鹿城”。三亚是具有热带海滨风景特色的国际旅游城市，被称为“东方夏威夷”。三亚是我国对外开放黄金海岸线上最南端的对外贸易重要口岸，是中国通向世界的门户之一，是海南最美丽的旅游胜地。"},
"danzhou": {name:"儋州市",img:"dz",detail:"地处海南西北部，濒临北部湾，是海南西部的经济、交通、通信和文化中心，海南洋浦经济开发区处于其境内。儋州市荣获“国家园林城市”、“全国城市环境综合整治优秀城市”、“中国优秀旅游城市”等称号。"},
"wuzhishan": {name:"五指山市",img:"wzs",detail:"是海南省直辖县级市，地处海南岛中南部腹地，是海南岛中部地区的中心城市和交通枢纽，也是海南省中部少数民族的聚居地。五指山是海南岛的象征，也是中国名山之一，被国际旅游组织列为A级旅游点。"},
"qionghai": {name:"琼海市",img:"qh",detail:"位于海南省东部沿海，旅居世界的华侨、华人及港澳台同胞55万人，素有“文化之乡”“华侨之乡”“文明之乡”美誉，是充满传奇色彩的红色娘子军故乡、博鳌亚洲论坛永久会址所在地、著名的中国温泉之乡。"},
"wenchang": {name:"文昌市",img:"wc",detail:"古称紫贝，为海南三大历史古邑之一，南闽南文化发源地，海南文昌航天发射中心所在地，是中国第四座航天城，被全球机构推选获评为“中国特色魅力城市”，是海南重点旅游城市，誉为“阳光东海岸上的明珠”。"},
"wangning": {name:"万宁市",img:"wn",detail:"于海南岛东南部沿海，是世界长寿之乡，享有世界冲浪胜地、中国槟榔之乡等美誉。近年来，成功举办中非合作圆桌会议、国际冲浪赛等一系列重大会议和品牌体育赛事，城市美誉度和知名度得到显著提升。"},
"dongfang": {name:"东方市",img:"df",detail:"地处海南省西南部，历史悠久，资源富饶，基础厚实。物华天宝，奇珍异禽。酸豆青梅，沉香花梨，珍奇林木数百种。中国-东盟自由贸易区的建设，使包括东方在内的北部湾地区正形成产业发展的集聚区域。"},
"dingan": {name:"定安县",img:"da",detail:"位于海南岛的中部偏东北，海榆东线、中线公路贯通全境，县级公路286条，“五纵五横”公路网络，四通八达，辐射全省各地，交通方便快捷，具有无以伦比的区位优势，被誉为海口的后花园。"},
"dunchang": {name:"屯昌县",img:"tc",detail:"位于海南岛中部偏北，地处五指山北麓，南渡江南岸。早在100多年前，屯昌就形成了男女老少习武的习俗，并延续至今。2015年，屯昌被国家体育总局武术运动管理中心命名为“全国武术之乡”。"},
"cengmai": {name:"澄迈县",img:"cm",detail:"是世界长寿之乡，世界富晒福地，中国绿色名县。澄迈县按照“一都二中心三区四基地五镇”的产业发展战略，先后获得 “中国最美休闲度假胜地”、“十大文化特色旅游名县”等七十多项国家级以上殊荣。"},
"lingao": {name:"临高县",img:"lg",detail:"于海南岛西北部，交通便利。临高风土人情独特，被评为“中国民间艺术之乡”，渔歌“哩哩美”和人偶戏被列为我国民间艺术的瑰宝。临高发展海水养殖条件优越，海洋捕捞业发达，是全省重要的渔业生产县。"},
"baisha": {name:"白沙黎族自治县",img:"bs",detail:"有“山的世界、水的源头、林的海洋、云的故乡”的美誉。是海南生态核心功能区，南渡江、珠碧江、石碌河三大河流的发源地，民族文化浓郁独特，双面绣等8项民族文化被列入国家或省非物质文化遗产名录。"},
"changjiang": {name:"昌江黎族自治县",img:"cj",detail:"位于海南的西北部，依山面海。海榆西线公路、环岛高速公路、粤海铁路贯穿全境，水利、电力、通讯等基础设施完善。生态环境好，土地肥沃，发展名特优水果、反季节瓜菜等热带高效农业具有得天独厚的条件。"},
"ledong": {name:"乐东黎族自治县",img:"ld",detail:"乐东靠山临海，历史悠久，文化源远流长。交通区位优势明显，位于莺歌海镇的国电西南部电厂配套码头水工结构按照靠泊7万吨级散货船设计，目前有停泊5万吨级煤炭泊位。"},
"lingshui": {name:"陵水黎族自治县",img:"ls",detail:"位于海南岛的东南部，2018年获批建设国家海洋经济发展示范区。陵水具有光辉的革命斗争历史和丰富的人文和自然旅游资源。全县共有旅游景点17处，其中南湾猴岛是全国唯一的中华?猴自然保护区。"},
"baoting": {name:"保亭黎族苗族自治县",img:"bt",detail:"位于海南省南部内陆五指山南麓，拥有丰富的旅游资源，七仙岭国家温泉森林公园是海南省著名温泉旅游胜地，仙安石林热带喀斯特石林地貌气势雄伟，保亭县的三道湾、毛拉洞水库等都极具旅游开发价值。"},
"qunzhong": {name:"琼中黎族苗族自治县",img:"qz",detail:"县境地处海南岛中部，五指山北麓，是海南生态核心区，具有“海南之心、三江之源、森林王国、绿橙之乡、黎苗家园”的美称。2019年11月，琼中黎族苗族自治县被命名为“四好农村路”全国示范县。"},
"sansha": {name:"三沙市",img:"ss",detail:"是中国地理位置最南、总面积最大、陆地面积最小、人口最少的县市，是第二个以群岛建置的地级行政区。未来三沙市将大力扩展旅游项目，充分发挥南海“祖国渔仓”和“海上丝绸之路”的美誉。"},
}
开发中遇到的问题1. 正确引用了echarts并初始化和设置option，但是地图没有显示出来
- 需要给用来渲染echarts的节点设置width和height
2. 海南省有很多岛屿，导致主体部分都挤在一起，无法在正常的区域里展示
- echarts提供了demo，示例：https://echarts.apache.org/v4/examples/zh/editor.html?c=map-usa
registerMap提供了参数specialAreas，可以将地图中的部分区域缩放到合适的位置，使得整个地图的显示更加好看。 - 但是我在项目中这么用，并不起作用。。。目前还没找到原因，所以我换了种方式——删掉了三沙市的岛屿数据，用图片替代。
3. 三沙市用图片替代带来的后果就是在与其他市切换时，需要单独写处理逻辑
点击三沙市图片，更换市区数据，并替换成高亮状态下的三沙市图片。
这个比较容易解决，在图片上绑定click事件，更新图片选中状态isSS和市区数据cityInfo。
点击三沙市图片，海南地区原高亮区域取消。
echarts官方提供了action. downplay，用于取消高亮指定的数据图形。（但我又一次失败了，可能是没能正确理解他的使用方法）
我的解决方法是通过选中状态isSS重新设置option.series，注意setOption第二个参数notMerge为true，否则无法正确更新地图数据。
echarts官方对该参数的说明文档，为了方便后期查看，直接copy过来。
notMerge: boolean
- 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
replaceMerge: string | string[]
- 可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见组件合并模式。
组件合并模式
- 对于一种类型的组件（如：xAxis, series）：
- 如果设置opts.notMerge为true，那么旧的组件会被完全移除，新的组件会根据option创建。
- 如果设置opts.notMerge为false，或者没有设置 opts.notMerge：
- 如果在opts.replaceMerge里指定组件类型，这类组件会进行替换合并。
- 否则，会进行普通合并。
什么是普通合并和替换合并？
普通合并
- 对于一种类型的组件（如：xAxis, series），新来的 option 中的每个“组件描述”（如：{type: 'xAxis', id: 'xx', name: 'kk', ...}）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：
- 先依次对 option 中每个有声明 id 或者 name 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
- 再依次对 option 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。
- 其他 option 中剩余的“组件描述”，用于在组件列表尾部创建新组件。
- 特点：
- 永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。
- 组件的索引（componentIndex）永远不会改变。
- 如果 id 和 name 没有在 option 中被指定（这是经常出现的情况），组件会按照它在 option 中的顺序一一合并到已有组件中。这种设定比较符合直觉。
替换合并
- 对于一种类型的组件（如：xAxis, series），只有 option 中指定了 id 并且已有组件中有此 id 时，已有组件会和 option 相应组件描述进行合并。否则，已有组件都会删除，新组件会被根据 option 创建。细节规则如下：
- 先依次对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
- 删除其他没匹配到的已有组件。
- 依次对 option 中剩余的“组件描述”，创建新组件，填入刚因删除而空出来的位置上，或者增加到末尾。
- 特点：
- 与 普通合并 相比，支持了组件删除。
- 已有组件的索引永远不会变。这是为了保证，option 或者 API 中的 index 引用（例如：xAxisIndex: 2）仍能正常一致得使用。
- 整个处理过程结束后，可能存在一些“洞”，也就是说，在组件列表中的某些 index 上，并没有组件存在（被删除了）。但是这是可以被开发者预期和控制的。
删除组件
有两种方法能删除组件：
- 删除所有：使用 notMerge: true，则所有组件都被删除。
- 删除部分：使用 replaceMerge: [...]，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。
普通合并例子：
// 已有组件：
{
xAxis: [
{ id: 'm', interval: 5 },
{ id: 'n', name: 'nnn', interval: 6 }
{ id: 'q', interval: 7 }
]
}
// 新来的 option ：
chart.setOption({
xAxis: [
// id 没有指定。会寻找到第一个没有进行过合并的已有组件，进行合并。
// 即合并到 `id: 'q'`。
{ interval: 77 },
// id 没有指定。最终会创建新组件。
{ interval: 88 },
// id 没有指定，但是 name 指定了。会被合并到已有的 `name: 'nnn'` 组件。
{ name: 'nnn', interval: 66 },
// id 指定了，会被合并到已有的 `id: 'm'` 组件。
{ id: 'm', interval: 55 }
]
});
// 结果组件：
{
xAxis: [
{ id: 'm', interval: 55 },
{ id: 'n', name: 'nnn', interval: 66 },
{ id: 'q', interval: 77 },
{ interval: 88 }
]
}
替换合并例子：
// 已有组件：
{
xAxis: [
{ id: 'm', interval: 5, min: 1000 },
{ id: 'n', name: 'nnn', interval: 6, min: 1000 }
{ id: 'q', interval: 7, min: 1000 }
]
}
// 新来的 option :
chart.setOption({
xAxis: [
{ interval: 111 },
// id 已经指定了。因此会被合并进已有的组件 `id: 'q'`。
{ id: 'q', interval: 77 },
// id 已经指定了。但是已有组件没有此 id 。
{ id: 't', interval: 222 },
{ interval: 333 }
]
}, { replaceMerge: 'xAxis' });
// 结果组件：
{
xAxis: [
// 原来的 id 为 'm' 的组件，被移除。
// 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
{ interval: 111 },
// 原来的 id 为 'n' 的组件，被移除。
// 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
{ id: 't', interval: 222 },
// 原来的组件没有被移除，而是和 option 中的组件描述进行了合并。
// 所以 `min: 1000` 被保留了。
{ id: 'q', interval: 77, min: 1000 },
// 新添加的组件。
{ interval: 333 }
]
}
registerMap提供了参数specialAreas，可以将地图中的部分区域缩放到合适的位置，使得整个地图的显示更加好看。
点击三沙市图片，更换市区数据，并替换成高亮状态下的三沙市图片。
这个比较容易解决，在图片上绑定click事件，更新图片选中状态isSS和市区数据cityInfo。
点击三沙市图片，海南地区原高亮区域取消。
echarts官方提供了action. downplay，用于取消高亮指定的数据图形。（但我又一次失败了，可能是没能正确理解他的使用方法）
我的解决方法是通过选中状态isSS重新设置option.series，注意setOption第二个参数notMerge为true，否则无法正确更新地图数据。
echarts官方对该参数的说明文档，为了方便后期查看，直接copy过来。
notMerge: boolean
- 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
replaceMerge: string | string[]
- 可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见组件合并模式。
组件合并模式
- 对于一种类型的组件（如：xAxis, series）：
- 如果设置opts.notMerge为true，那么旧的组件会被完全移除，新的组件会根据option创建。
- 如果设置opts.notMerge为false，或者没有设置 opts.notMerge：
- 如果在opts.replaceMerge里指定组件类型，这类组件会进行替换合并。
- 否则，会进行普通合并。
什么是普通合并和替换合并？
普通合并
- 对于一种类型的组件（如：xAxis, series），新来的 option 中的每个“组件描述”（如：{type: 'xAxis', id: 'xx', name: 'kk', ...}）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：
- 先依次对 option 中每个有声明 id 或者 name 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
- 再依次对 option 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。
- 其他 option 中剩余的“组件描述”，用于在组件列表尾部创建新组件。
- 特点：
- 永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。
- 组件的索引（componentIndex）永远不会改变。
- 如果 id 和 name 没有在 option 中被指定（这是经常出现的情况），组件会按照它在 option 中的顺序一一合并到已有组件中。这种设定比较符合直觉。
替换合并
- 对于一种类型的组件（如：xAxis, series），只有 option 中指定了 id 并且已有组件中有此 id 时，已有组件会和 option 相应组件描述进行合并。否则，已有组件都会删除，新组件会被根据 option 创建。细节规则如下：
- 先依次对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。
- 删除其他没匹配到的已有组件。
- 依次对 option 中剩余的“组件描述”，创建新组件，填入刚因删除而空出来的位置上，或者增加到末尾。
- 特点：
- 与 普通合并 相比，支持了组件删除。
- 已有组件的索引永远不会变。这是为了保证，option 或者 API 中的 index 引用（例如：xAxisIndex: 2）仍能正常一致得使用。
- 整个处理过程结束后，可能存在一些“洞”，也就是说，在组件列表中的某些 index 上，并没有组件存在（被删除了）。但是这是可以被开发者预期和控制的。
删除组件
有两种方法能删除组件：
- 删除所有：使用 notMerge: true，则所有组件都被删除。
- 删除部分：使用 replaceMerge: [...]，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。
普通合并例子：
// 已有组件：
{
xAxis: [
{ id: 'm', interval: 5 },
{ id: 'n', name: 'nnn', interval: 6 }
{ id: 'q', interval: 7 }
]
}
// 新来的 option ：
chart.setOption({
xAxis: [
// id 没有指定。会寻找到第一个没有进行过合并的已有组件，进行合并。
// 即合并到 `id: 'q'`。
{ interval: 77 },
// id 没有指定。最终会创建新组件。
{ interval: 88 },
// id 没有指定，但是 name 指定了。会被合并到已有的 `name: 'nnn'` 组件。
{ name: 'nnn', interval: 66 },
// id 指定了，会被合并到已有的 `id: 'm'` 组件。
{ id: 'm', interval: 55 }
]
});
// 结果组件：
{
xAxis: [
{ id: 'm', interval: 55 },
{ id: 'n', name: 'nnn', interval: 66 },
{ id: 'q', interval: 77 },
{ interval: 88 }
]
}
替换合并例子：
// 已有组件：
{
xAxis: [
{ id: 'm', interval: 5, min: 1000 },
{ id: 'n', name: 'nnn', interval: 6, min: 1000 }
{ id: 'q', interval: 7, min: 1000 }
]
}
// 新来的 option :
chart.setOption({
xAxis: [
{ interval: 111 },
// id 已经指定了。因此会被合并进已有的组件 `id: 'q'`。
{ id: 'q', interval: 77 },
// id 已经指定了。但是已有组件没有此 id 。
{ id: 't', interval: 222 },
{ interval: 333 }
]
}, { replaceMerge: 'xAxis' });
// 结果组件：
{
xAxis: [
// 原来的 id 为 'm' 的组件，被移除。
// 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
{ interval: 111 },
// 原来的 id 为 'n' 的组件，被移除。
// 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。
{ id: 't', interval: 222 },
// 原来的组件没有被移除，而是和 option 中的组件描述进行了合并。
// 所以 `min: 1000` 被保留了。
{ id: 'q', interval: 77, min: 1000 },
// 新添加的组件。
{ interval: 333 }
]
}
