mapSecond.js 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551
  1. var mapChart = echarts.init(document.getElementById("map"));
  2. var color = '#a6c84c';
  3. var lineData = [
  4. [{name:'江苏'}, {name:'北京',value:80}],
  5. [{name:'上海'}, {name:'北京',value:90}],
  6. [{name:'四川'}, {name:'北京',value:80}],
  7. [{name:'云南'}, {name:'北京',value:70}]
  8. ];
  9. var geoCoordMap = {
  10. 江苏: [119.18,32.45],
  11. 云南: [102.73,25.04],
  12. 四川: [100.21,30.15],
  13. 上海: [121.48, 31.22],
  14. 北京: [116.46, 39.92]
  15. };
  16. // 获取迁徙线的经纬度
  17. var convertLineData = function (data) {
  18. var res = [];
  19. for (var i = 0; i < data.length; i++) {
  20. var dataItem = data[i];
  21. var fromCoord = geoCoordMap[dataItem[0].name];
  22. var toCoord = geoCoordMap[dataItem[1].name];
  23. if (fromCoord && toCoord) {
  24. res.push({
  25. fromName: dataItem[0].name,
  26. toName: dataItem[1].name,
  27. coords: [fromCoord, toCoord]
  28. });
  29. }
  30. }
  31. return res;
  32. };
  33. var effectScatterData = function(dataArr){
  34. var res = [];
  35. for(var i = 0; i < dataArr.length; i++){
  36. res.push({
  37. name: dataArr[i][1].name,
  38. value: geoCoordMap[dataArr[i][1].name].concat([dataArr[i][1].value])
  39. })
  40. }
  41. return res;
  42. };
  43. var rich = {
  44. a: {
  45. fontSize: 18,
  46. align: 'left',
  47. padding: [0,0,60,40]
  48. },
  49. w: {
  50. fontSize: 16,
  51. align: 'left',
  52. padding: [0,0,-25,110]
  53. },
  54. t1: {
  55. fontSize: 16,
  56. align: 'left',
  57. padding: [0,0,-45,110]
  58. },
  59. t2: {
  60. fontSize: 16,
  61. align: 'left',
  62. padding: [0,0,-5,110]
  63. }
  64. }
  65. // 省份数据
  66. var mapData = [
  67. {
  68. name: '江苏',
  69. valueC: 1250,
  70. itemStyle: {
  71. normal: {
  72. areaColor: '#00b6f6'
  73. },
  74. emphasis: {
  75. areaColor: "#00b6f6"
  76. }
  77. },
  78. label: {
  79. emphasis: {
  80. formatter: function(params){
  81. var data = params.data;
  82. return (
  83. '{a|' + params.name + '}' +
  84. "\n" +
  85. '{w|' + "采购单:" + (data.valueC ? data.valueC : '') + '批次' + '}'
  86. )
  87. }
  88. },
  89. rich: rich
  90. }
  91. },
  92. {
  93. name: '四川',
  94. valueC: 83,
  95. itemStyle: {
  96. normal: {
  97. areaColor: '#0069e8'
  98. },
  99. emphasis: {
  100. areaColor: "#0069e8"
  101. }
  102. },
  103. label: {
  104. emphasis: {
  105. formatter: function(params){
  106. var data = params.data;
  107. return (
  108. '{a|' + params.name + '}' +
  109. "\n" +
  110. '{w|' + "采购单:" + (data.valueC ? data.valueC : '') + '批次' + '}'
  111. )
  112. }
  113. },
  114. rich: rich
  115. }
  116. },
  117. {
  118. name: '上海',
  119. valueC: 209,
  120. valueS: 166,
  121. itemStyle: {
  122. normal: {
  123. areaColor: '#27E9FD'
  124. },
  125. emphasis: {
  126. areaColor: "#27E9FD"
  127. }
  128. },
  129. label: {
  130. emphasis: {
  131. formatter: function(params){
  132. var data = params.data;
  133. return (
  134. '{a|' + params.name + '}' +
  135. "\n" +
  136. '{t1|' + "采购单:" + (data.valueC ? data.valueC : '') + '批次' + '}' +
  137. "\n" +
  138. '{t2|' + "收货单:" + (data.valueS ? data.valueS : '') + '批次' + '}'
  139. )
  140. }
  141. },
  142. rich: rich
  143. }
  144. },
  145. {
  146. name: '云南',
  147. valueC: 165,
  148. itemStyle: {
  149. normal: {
  150. areaColor: '#20CAF8'
  151. },
  152. emphasis: {
  153. areaColor: "#20CAF8"
  154. }
  155. },
  156. label: {
  157. emphasis: {
  158. formatter: function(params){
  159. var data = params.data;
  160. return (
  161. '{a|' + params.name + '}' +
  162. "\n" +
  163. '{w|' + "采购单:" + (data.valueC ? data.valueC : '') + '批次' + '}'
  164. )
  165. }
  166. },
  167. rich: rich
  168. }
  169. },
  170. {
  171. name: '湖南',
  172. valueB: 66.7,
  173. valueVariety: 1.9,
  174. valueM: 2569,
  175. valueStock: 1021,
  176. itemStyle: {
  177. normal: {
  178. areaColor: '#0554E4'
  179. },
  180. emphasis: {
  181. areaColor: "#0554E4"
  182. }
  183. }
  184. },
  185. {
  186. name: '湖北',
  187. valueB: 55.7,
  188. valueVariety: 1.3,
  189. valueM: 1765,
  190. valueStock: 634,
  191. itemStyle: {
  192. normal: {
  193. areaColor: '#005ce5'
  194. },
  195. emphasis: {
  196. areaColor: "#005ce5"
  197. }
  198. }
  199. },
  200. {
  201. name: '河北',
  202. valueB: 52.7,
  203. valueVariety: 2.3,
  204. valueM: 1034,
  205. valueStock: 460,
  206. itemStyle: {
  207. normal: {
  208. areaColor: '#034DE4'
  209. },
  210. emphasis: {
  211. areaColor: "#034DE4"
  212. }
  213. }
  214. },
  215. {
  216. name: '河南',
  217. valueB: 52.7,
  218. valueVariety: 1.1,
  219. valueM: 824,
  220. valueStock: 402,
  221. itemStyle: {
  222. normal: {
  223. areaColor: '#034DE4'
  224. },
  225. emphasis: {
  226. areaColor: "#034DE4"
  227. }
  228. }
  229. },
  230. {
  231. name: '黑龙江',
  232. valueB: 32.7,
  233. valueVariety: 1.4,
  234. valueM: 1240,
  235. valueStock: 645,
  236. itemStyle: {
  237. normal: {
  238. areaColor: '#17A3F1'
  239. },
  240. emphasis: {
  241. areaColor: "#17A3F1"
  242. }
  243. }
  244. },
  245. {
  246. name: '山东',
  247. valueB: 42.7,
  248. valueVariety: 1.3,
  249. valueM: 1732,
  250. valueStock: 734,
  251. itemStyle: {
  252. normal: {
  253. areaColor: '#4BFFFF'
  254. },
  255. emphasis: {
  256. areaColor: "#4BFFFF"
  257. }
  258. }
  259. },
  260. {
  261. name: '新疆',
  262. valueB: 32.1,
  263. valueVariety: 1.4,
  264. valueM: 1324,
  265. valueStock: 509,
  266. itemStyle: {
  267. normal: {
  268. areaColor: '#17A3F1'
  269. },
  270. emphasis: {
  271. areaColor: "#17A3F1"
  272. }
  273. }
  274. },
  275. {
  276. name: '江西',
  277. valueB: 22.7,
  278. valueVariety: 1.1,
  279. valueM: 679,
  280. valueStock: 386,
  281. itemStyle: {
  282. normal: {
  283. areaColor: '#01a4f1'
  284. },
  285. emphasis: {
  286. areaColor: "#01a4f1"
  287. }
  288. }
  289. },
  290. {
  291. name: '甘肃',
  292. valueB: 12.7,
  293. valueVariety: 1.4,
  294. valueM: 834,
  295. valueStock: 379,
  296. itemStyle: {
  297. normal: {
  298. areaColor: '#0042df'
  299. },
  300. emphasis: {
  301. areaColor: "#0042df"
  302. }
  303. }
  304. },
  305. {
  306. name: '内蒙古',
  307. valueB: 22.3,
  308. valueVariety: 1.5,
  309. valueM: 1309,
  310. valueStock: 409,
  311. itemStyle: {
  312. normal: {
  313. areaColor: '#00ccf7'
  314. },
  315. emphasis: {
  316. areaColor: "#00ccf7"
  317. }
  318. }
  319. },
  320. {
  321. name: '广东',
  322. valueB: 25.1,
  323. valueVariety: 1.3,
  324. valueM: 902,
  325. valueStock: 343,
  326. itemStyle: {
  327. normal: {
  328. areaColor: '#00d9fc'
  329. },
  330. emphasis: {
  331. areaColor: "#00d9fc"
  332. }
  333. }
  334. },
  335. {
  336. name: '宁夏',
  337. itemStyle: {
  338. normal: {
  339. areaColor: '#01b0f3'
  340. },
  341. emphasis: {
  342. areaColor: "#01b0f3",
  343. opacity: 0.2
  344. }
  345. },
  346. label: {
  347. show: false
  348. }
  349. },
  350. {
  351. name: '海南',
  352. itemStyle: {
  353. normal: {
  354. areaColor: '#00f0ff'
  355. },
  356. emphasis: {
  357. areaColor: "#00f0ff",
  358. opacity: 0.2
  359. }
  360. },
  361. label: {
  362. show: false
  363. }
  364. },
  365. {
  366. name: '台湾',
  367. itemStyle: {
  368. normal: {
  369. areaColor: '#0067e7'
  370. },
  371. emphasis: {
  372. areaColor: "#0067e7",
  373. opacity: 0.2
  374. }
  375. },
  376. label: {
  377. show: false
  378. }
  379. },
  380. {
  381. name: '香港',
  382. itemStyle: {
  383. normal: {
  384. areaColor: '#00dafa'
  385. },
  386. emphasis: {
  387. areaColor: "#00dafa",
  388. opacity: 0.2
  389. }
  390. },
  391. label: {
  392. show: false
  393. }
  394. },
  395. {
  396. name: '澳门',
  397. itemStyle: {
  398. normal: {
  399. areaColor: '#00dafa'
  400. },
  401. emphasis: {
  402. areaColor: "#00dafa",
  403. opacity: 0.2
  404. }
  405. },
  406. label: {
  407. show: false
  408. }
  409. },
  410. {
  411. name: '北京',
  412. itemStyle: {
  413. normal: {
  414. areaColor: '#034DE4'
  415. },
  416. emphasis: {
  417. areaColor: "#034DE4",
  418. opacity: 0.2
  419. }
  420. },
  421. label: {
  422. show: false
  423. }
  424. },
  425. {
  426. name: '天津',
  427. itemStyle: {
  428. normal: {
  429. areaColor: '#034DE4'
  430. },
  431. emphasis: {
  432. areaColor: "#034DE4",
  433. opacity: 0.2
  434. }
  435. },
  436. label: {
  437. show: false
  438. }
  439. },
  440. {
  441. name: '重庆',
  442. itemStyle: {
  443. normal: {
  444. areaColor: '#0E7DEB'
  445. },
  446. emphasis: {
  447. areaColor: "#0E7DEB",
  448. opacity: 0.2
  449. }
  450. },
  451. label: {
  452. show: false
  453. }
  454. },
  455. {
  456. name: '辽宁',
  457. itemStyle: {
  458. normal: {
  459. areaColor: '#034DE4'
  460. },
  461. emphasis: {
  462. areaColor: "#034DE4",
  463. opacity: 0.2
  464. }
  465. },
  466. label: {
  467. show: false
  468. }
  469. },
  470. {
  471. name: '安徽',
  472. itemStyle: {
  473. normal: {
  474. areaColor: '#27E8FD'
  475. },
  476. emphasis: {
  477. areaColor: "#27E8FD",
  478. opacity: 0.2
  479. }
  480. },
  481. label: {
  482. show: false
  483. }
  484. },
  485. {
  486. name: '浙江',
  487. itemStyle: {
  488. normal: {
  489. areaColor: '#00b6f6'
  490. },
  491. emphasis: {
  492. areaColor: "#00b6f6",
  493. opacity: 0.2
  494. }
  495. },
  496. label: {
  497. show: false
  498. }
  499. },
  500. {
  501. name: '广西',
  502. itemStyle: {
  503. normal: {
  504. areaColor: '#0088ec'
  505. },
  506. emphasis: {
  507. areaColor: "#0088ec",
  508. opacity: 0.2
  509. }
  510. },
  511. label: {
  512. show: false
  513. }
  514. },
  515. {
  516. name: '山西',
  517. itemStyle: {
  518. normal: {
  519. areaColor: '#01d0fa'
  520. },
  521. emphasis: {
  522. areaColor: "#01d0fa",
  523. opacity: 0.2
  524. }
  525. },
  526. label: {
  527. show: false
  528. }
  529. },
  530. {
  531. name: '陕西',
  532. itemStyle: {
  533. normal: {
  534. areaColor: '#01b0f3'
  535. },
  536. emphasis: {
  537. areaColor: "#01b0f3",
  538. opacity: 0.2
  539. }
  540. },
  541. label: {
  542. show: false
  543. }
  544. },
  545. {
  546. name: '吉林',
  547. itemStyle: {
  548. normal: {
  549. areaColor: '#0051e1'
  550. },
  551. emphasis: {
  552. areaColor: "#0051e1",
  553. opacity: 0.2
  554. }
  555. },
  556. label: {
  557. show: false
  558. }
  559. },
  560. {
  561. name: '福建',
  562. itemStyle: {
  563. normal: {
  564. areaColor: '#0158e3'
  565. },
  566. emphasis: {
  567. areaColor: "#0158e3",
  568. opacity: 0.2
  569. }
  570. },
  571. label: {
  572. show: false
  573. }
  574. },
  575. {
  576. name: '贵州',
  577. itemStyle: {
  578. normal: {
  579. areaColor: '#0199ef'
  580. },
  581. emphasis: {
  582. areaColor: "#0199ef",
  583. opacity: 0.2
  584. }
  585. },
  586. label: {
  587. show: false
  588. }
  589. },
  590. {
  591. name: '青海',
  592. itemStyle: {
  593. normal: {
  594. areaColor: '#005ae4'
  595. },
  596. emphasis: {
  597. areaColor: "#005ae4",
  598. opacity: 0.2
  599. }
  600. },
  601. label: {
  602. show: false
  603. }
  604. },
  605. {
  606. name: '西藏',
  607. itemStyle: {
  608. normal: {
  609. areaColor: '#01e9fd'
  610. },
  611. emphasis: {
  612. areaColor: "#01e9fd",
  613. opacity: 0.2
  614. }
  615. },
  616. label: {
  617. show: false
  618. }
  619. }
  620. ];
  621. var option = {
  622. geo: {
  623. map: "china",
  624. label: {
  625. emphasis: {
  626. show: false
  627. }
  628. },
  629. roam: false,
  630. layoutCenter: ["50%", "55%"],
  631. layoutSize: "110%",
  632. regions: [
  633. {
  634. name: '南海诸岛',
  635. itemStyle: {
  636. areaColor: '#6F798D',
  637. opacity: 0.5
  638. }
  639. },
  640. {
  641. name: '北京',
  642. itemStyle: {
  643. areaColor: '#034DE4',
  644. opacity: 0.2
  645. }
  646. },
  647. {
  648. name: '天津',
  649. itemStyle: {
  650. areaColor: '#034DE4',
  651. opacity: 0.2
  652. }
  653. },
  654. {
  655. name: '上海',
  656. itemStyle: {
  657. areaColor: '#27E9FD',
  658. opacity: 0.2
  659. }
  660. },
  661. {
  662. name: '重庆',
  663. itemStyle: {
  664. areaColor: '#0E7DEB',
  665. opacity: 0.2
  666. }
  667. },
  668. {
  669. name: '河北',
  670. itemStyle: {
  671. areaColor: '#034DE4',
  672. opacity: 0.2
  673. }
  674. },
  675. {
  676. name: '河南',
  677. itemStyle: {
  678. areaColor: '#034DE4',
  679. opacity: 0.2
  680. }
  681. },
  682. {
  683. name: '云南',
  684. itemStyle: {
  685. areaColor: '#20CAF8',
  686. opacity: 0.2
  687. }
  688. },
  689. {
  690. name: '辽宁',
  691. itemStyle: {
  692. areaColor: '#034DE4',
  693. opacity: 0.2
  694. }
  695. },
  696. {
  697. name: '黑龙江',
  698. itemStyle: {
  699. areaColor: '#17A3F1',
  700. opacity: 0.2
  701. }
  702. },
  703. {
  704. name: '湖南',
  705. itemStyle: {
  706. areaColor: '#0554E4',
  707. opacity: 0.2
  708. }
  709. },
  710. {
  711. name: '安徽',
  712. itemStyle: {
  713. areaColor: '#27E8FD',
  714. opacity: 0.2
  715. }
  716. },
  717. {
  718. name: '山东',
  719. itemStyle: {
  720. areaColor: '#4BFFFF',
  721. opacity: 0.2
  722. }
  723. },
  724. {
  725. name: '新疆',
  726. itemStyle: {
  727. areaColor: '#17A3F1',
  728. opacity: 0.2
  729. }
  730. },
  731. {
  732. name: '江苏',
  733. itemStyle: {
  734. areaColor: '#00b6f6',
  735. opacity: 0.2
  736. }
  737. },
  738. {
  739. name: '浙江',
  740. itemStyle: {
  741. areaColor: '#00b6f6',
  742. opacity: 0.2
  743. }
  744. },
  745. {
  746. name: '江西',
  747. itemStyle: {
  748. areaColor: '#01a4f1',
  749. opacity: 0.2
  750. }
  751. },
  752. {
  753. name: '湖北',
  754. itemStyle: {
  755. areaColor: '#005ce5',
  756. opacity: 0.2
  757. }
  758. },
  759. {
  760. name: '广西',
  761. itemStyle: {
  762. areaColor: '#0088ec',
  763. opacity: 0.2
  764. }
  765. },
  766. {
  767. name: '甘肃',
  768. itemStyle: {
  769. areaColor: '#0042df',
  770. opacity: 0.2
  771. }
  772. },
  773. {
  774. name: '山西',
  775. itemStyle: {
  776. areaColor: '#01d0fa',
  777. opacity: 0.2
  778. }
  779. },
  780. {
  781. name: '内蒙古',
  782. itemStyle: {
  783. areaColor: '#00ccf7',
  784. opacity: 0.2
  785. }
  786. },
  787. {
  788. name: '陕西',
  789. itemStyle: {
  790. areaColor: '#01b0f3',
  791. opacity: 0.2
  792. }
  793. },
  794. {
  795. name: '吉林',
  796. itemStyle: {
  797. areaColor: '#0051e1',
  798. opacity: 0.2
  799. }
  800. },
  801. {
  802. name: '福建',
  803. itemStyle: {
  804. areaColor: '#0158e3',
  805. opacity: 0.2
  806. }
  807. },
  808. {
  809. name: '贵州',
  810. itemStyle: {
  811. areaColor: '#0199ef',
  812. opacity: 0.2
  813. }
  814. },
  815. {
  816. name: '广东',
  817. itemStyle: {
  818. areaColor: '#00d9fc',
  819. opacity: 0.2
  820. }
  821. },
  822. {
  823. name: '青海',
  824. itemStyle: {
  825. areaColor: '#005ae4',
  826. opacity: 0.2
  827. }
  828. },
  829. {
  830. name: '西藏',
  831. itemStyle: {
  832. areaColor: '#01e9fd',
  833. opacity: 0.2
  834. }
  835. },
  836. {
  837. name: '四川',
  838. itemStyle: {
  839. areaColor: '#0069e8',
  840. opacity: 0.2
  841. }
  842. },
  843. {
  844. name: '宁夏',
  845. itemStyle: {
  846. areaColor: '#01b0f3',
  847. opacity: 0.2
  848. }
  849. },
  850. {
  851. name: '海南',
  852. itemStyle: {
  853. areaColor: '#00f0ff',
  854. opacity: 0.2
  855. }
  856. },
  857. {
  858. name: '台湾',
  859. itemStyle: {
  860. areaColor: '#0067e7',
  861. opacity: 0.2
  862. }
  863. },
  864. {
  865. name: '香港',
  866. itemStyle: {
  867. areaColor: '#00dafa',
  868. opacity: 0.2
  869. }
  870. },
  871. {
  872. name: '澳门',
  873. itemStyle: {
  874. areaColor: '#00dafa',
  875. opacity: 0.2
  876. }
  877. }
  878. ]
  879. },
  880. series: [
  881. {
  882. name: "中国",
  883. type: "map",
  884. mapType: "china",
  885. layoutCenter: ["50%", "55%"],
  886. layoutSize: "110%",
  887. label: {
  888. width: 320,
  889. height: 140,
  890. backgroundColor: {
  891. image: "img/tip-bg.png"
  892. },
  893. emphasis: {
  894. show: true,
  895. color: "#fff"
  896. },
  897. rich: rich
  898. },
  899. itemStyle: {
  900. normal: {
  901. opacity: 0.2
  902. },
  903. emphasis: {
  904. opacity: 1,
  905. borderWidth: 2,
  906. borderColor: '#fff'
  907. }
  908. },
  909. data: [
  910. {
  911. name: '北京',
  912. itemStyle: {
  913. normal: {
  914. areaColor: '#034DE4'
  915. },
  916. emphasis: {
  917. areaColor: '#034DE4',
  918. opacity: 0.2
  919. }
  920. },
  921. label: {
  922. show: false
  923. }
  924. },
  925. {
  926. name: '天津',
  927. itemStyle: {
  928. normal: {
  929. areaColor: '#034DE4'
  930. },
  931. emphasis: {
  932. areaColor: '#034DE4',
  933. opacity: 0.2
  934. }
  935. },
  936. label: {
  937. show: false
  938. }
  939. },
  940. {
  941. name: '上海',
  942. itemStyle: {
  943. normal: {
  944. areaColor: '#27E9FD'
  945. },
  946. emphasis: {
  947. areaColor: '#27E9FD'
  948. }
  949. }
  950. },
  951. {
  952. name: '重庆',
  953. itemStyle: {
  954. normal: {
  955. areaColor: '#0E7DEB'
  956. },
  957. emphasis: {
  958. areaColor: '#0E7DEB',
  959. opacity: 0.2
  960. }
  961. },
  962. label: {
  963. show: false
  964. }
  965. },
  966. {
  967. name: '河北',
  968. itemStyle: {
  969. normal: {
  970. areaColor: '#034DE4'
  971. },
  972. emphasis: {
  973. areaColor: '#034DE4'
  974. }
  975. }
  976. },
  977. {
  978. name: '河南',
  979. itemStyle: {
  980. normal: {
  981. areaColor: '#034DE4'
  982. },
  983. emphasis: {
  984. areaColor: '#034DE4'
  985. }
  986. }
  987. },
  988. {
  989. name: '云南',
  990. itemStyle: {
  991. normal: {
  992. areaColor: '#20CAF8'
  993. },
  994. emphasis: {
  995. areaColor: '#20CAF8'
  996. }
  997. }
  998. },
  999. {
  1000. name: '辽宁',
  1001. itemStyle: {
  1002. normal: {
  1003. areaColor: '#034DE4'
  1004. },
  1005. emphasis: {
  1006. areaColor: '#034DE4',
  1007. opacity: 0.2
  1008. }
  1009. },
  1010. label: {
  1011. show: false
  1012. }
  1013. },
  1014. {
  1015. name: '黑龙江',
  1016. itemStyle: {
  1017. normal: {
  1018. areaColor: '#17A3F1'
  1019. },
  1020. emphasis: {
  1021. areaColor: "#17A3F1"
  1022. }
  1023. }
  1024. },
  1025. {
  1026. name: '湖南',
  1027. itemStyle: {
  1028. normal: {
  1029. areaColor: '#0554E4'
  1030. },
  1031. emphasis: {
  1032. areaColor: '#0554E4'
  1033. }
  1034. }
  1035. },
  1036. {
  1037. name: '安徽',
  1038. itemStyle: {
  1039. normal: {
  1040. areaColor: '#27E8FD'
  1041. },
  1042. emphasis: {
  1043. areaColor: '#27E8FD',
  1044. opacity: 0.2
  1045. }
  1046. },
  1047. label: {
  1048. show: false
  1049. }
  1050. },
  1051. {
  1052. name: '山东',
  1053. itemStyle: {
  1054. normal: {
  1055. areaColor: '#4BFFFF'
  1056. },
  1057. emphasis: {
  1058. areaColor: '#4BFFFF'
  1059. }
  1060. }
  1061. },
  1062. {
  1063. name: '新疆',
  1064. itemStyle: {
  1065. normal: {
  1066. areaColor: '#17A3F1'
  1067. },
  1068. emphasis: {
  1069. areaColor: '#17A3F1'
  1070. }
  1071. }
  1072. },
  1073. {
  1074. name: '江苏',
  1075. itemStyle: {
  1076. normal: {
  1077. areaColor: '#00b6f6'
  1078. },
  1079. emphasis: {
  1080. areaColor: '#00b6f6'
  1081. }
  1082. }
  1083. },
  1084. {
  1085. name: '浙江',
  1086. itemStyle: {
  1087. normal: {
  1088. areaColor: '#00b6f6'
  1089. },
  1090. emphasis: {
  1091. areaColor: '#00b6f6',
  1092. opacity: 0.2
  1093. }
  1094. },
  1095. label: {
  1096. show: false
  1097. }
  1098. },
  1099. {
  1100. name: '江西',
  1101. itemStyle: {
  1102. normal: {
  1103. areaColor: '#01a4f1'
  1104. },
  1105. emphasis: {
  1106. areaColor: '#01a4f1'
  1107. }
  1108. }
  1109. },
  1110. {
  1111. name: '湖北',
  1112. itemStyle: {
  1113. normal: {
  1114. areaColor: '#005ce5'
  1115. },
  1116. emphasis: {
  1117. areaColor: '#005ce5'
  1118. }
  1119. }
  1120. },
  1121. {
  1122. name: '广西',
  1123. itemStyle: {
  1124. normal: {
  1125. areaColor: '#0088ec'
  1126. },
  1127. emphasis: {
  1128. areaColor: '#0088ec',
  1129. opacity: 0.2
  1130. }
  1131. },
  1132. label: {
  1133. show: false
  1134. }
  1135. },
  1136. {
  1137. name: '甘肃',
  1138. itemStyle: {
  1139. normal: {
  1140. areaColor: '#0042df'
  1141. },
  1142. emphasis: {
  1143. areaColor: '#0042df'
  1144. }
  1145. }
  1146. },
  1147. {
  1148. name: '山西',
  1149. itemStyle: {
  1150. normal: {
  1151. areaColor: '#01d0fa'
  1152. },
  1153. emphasis: {
  1154. areaColor: '#01d0fa',
  1155. opacity: 0.2
  1156. }
  1157. },
  1158. label: {
  1159. show: false
  1160. }
  1161. },
  1162. {
  1163. name: '内蒙古',
  1164. itemStyle: {
  1165. normal: {
  1166. areaColor: '#00ccf7'
  1167. },
  1168. emphasis: {
  1169. areaColor: '#00ccf7'
  1170. }
  1171. }
  1172. },
  1173. {
  1174. name: '陕西',
  1175. itemStyle: {
  1176. normal: {
  1177. areaColor: '#01b0f3'
  1178. },
  1179. emphasis: {
  1180. areaColor: '#01b0f3',
  1181. opacity: 0.2
  1182. }
  1183. },
  1184. label: {
  1185. show: false
  1186. }
  1187. },
  1188. {
  1189. name: '吉林',
  1190. itemStyle: {
  1191. normal: {
  1192. areaColor: '#0051e1'
  1193. },
  1194. emphasis: {
  1195. areaColor: '#0051e1',
  1196. opacity: 0.2
  1197. }
  1198. },
  1199. label: {
  1200. show: false
  1201. }
  1202. },
  1203. {
  1204. name: '福建',
  1205. itemStyle: {
  1206. normal: {
  1207. areaColor: '#0158e3'
  1208. },
  1209. emphasis: {
  1210. areaColor: '#0158e3',
  1211. opacity: 0.2
  1212. }
  1213. },
  1214. label: {
  1215. show: false
  1216. }
  1217. },
  1218. {
  1219. name: '贵州',
  1220. itemStyle: {
  1221. normal: {
  1222. areaColor: '#0199ef'
  1223. },
  1224. emphasis: {
  1225. areaColor: '#0199ef',
  1226. opacity: 0.2
  1227. }
  1228. },
  1229. label: {
  1230. show: false
  1231. }
  1232. },
  1233. {
  1234. name: '广东',
  1235. itemStyle: {
  1236. normal: {
  1237. areaColor: '#00d9fc'
  1238. },
  1239. emphasis: {
  1240. areaColor: '#00d9fc',
  1241. opacity: 0.2
  1242. }
  1243. },
  1244. label: {
  1245. show: false
  1246. }
  1247. },
  1248. {
  1249. name: '青海',
  1250. itemStyle: {
  1251. normal: {
  1252. areaColor: '#005ae4'
  1253. },
  1254. emphasis: {
  1255. areaColor: '#005ae4',
  1256. opacity: 0.2
  1257. }
  1258. },
  1259. label: {
  1260. show: false
  1261. }
  1262. },
  1263. {
  1264. name: '西藏',
  1265. itemStyle: {
  1266. normal: {
  1267. areaColor: '#01e9fd'
  1268. },
  1269. emphasis: {
  1270. areaColor: '#01e9fd',
  1271. opacity: 0.2
  1272. }
  1273. },
  1274. label: {
  1275. show: false
  1276. }
  1277. },
  1278. {
  1279. name: '四川',
  1280. itemStyle: {
  1281. normal: {
  1282. areaColor: '#0069e8'
  1283. },
  1284. emphasis: {
  1285. areaColor: '#0069e8'
  1286. }
  1287. }
  1288. },
  1289. {
  1290. name: '宁夏',
  1291. itemStyle: {
  1292. normal: {
  1293. areaColor: '#01b0f3'
  1294. },
  1295. emphasis: {
  1296. areaColor: '#01b0f3',
  1297. opacity: 0.2
  1298. }
  1299. },
  1300. label: {
  1301. show: false
  1302. }
  1303. },
  1304. {
  1305. name: '海南',
  1306. itemStyle: {
  1307. normal: {
  1308. areaColor: '#00f0ff'
  1309. },
  1310. emphasis: {
  1311. areaColor: '#00f0ff',
  1312. opacity: 0.2
  1313. }
  1314. },
  1315. label: {
  1316. show: false
  1317. }
  1318. },
  1319. {
  1320. name: '台湾',
  1321. itemStyle: {
  1322. normal: {
  1323. areaColor: '#0067e7'
  1324. },
  1325. emphasis: {
  1326. areaColor: '#0067e7',
  1327. opacity: 0.2
  1328. }
  1329. },
  1330. label: {
  1331. show: false
  1332. }
  1333. },
  1334. {
  1335. name: '香港',
  1336. itemStyle: {
  1337. normal: {
  1338. areaColor: '#00dafa'
  1339. },
  1340. emphasis: {
  1341. areaColor: '#00dafa',
  1342. opacity: 0.2
  1343. }
  1344. },
  1345. label: {
  1346. show: false
  1347. }
  1348. },
  1349. {
  1350. name: '澳门',
  1351. itemStyle: {
  1352. normal: {
  1353. areaColor: '#00dafa'
  1354. },
  1355. emphasis: {
  1356. areaColor: '#00dafa',
  1357. opacity: 0.2
  1358. }
  1359. },
  1360. label: {
  1361. show: false
  1362. }
  1363. }
  1364. ],
  1365. },
  1366. {
  1367. type: 'lines',
  1368. zlevel: 1,
  1369. effect: {
  1370. show: true,
  1371. period: 6,
  1372. trailLength: 0.7,
  1373. color: '#fff',
  1374. symbolSize: 3
  1375. },
  1376. lineStyle: {
  1377. normal: {
  1378. color: color,
  1379. width: 0,
  1380. curveness: 0.2
  1381. }
  1382. },
  1383. data: convertLineData(lineData)
  1384. },
  1385. {
  1386. type: 'lines',
  1387. zlevel: 2,
  1388. symbol: ['none', 'arrow'],
  1389. symbolSize: 10,
  1390. effect: {
  1391. show: true,
  1392. period: 6,
  1393. trailLength: 0,
  1394. symbol: 'circle',
  1395. symbolSize: 5
  1396. },
  1397. lineStyle: {
  1398. normal: {
  1399. color: color,
  1400. width: 1,
  1401. opacity: 0.6,
  1402. curveness: 0.2
  1403. }
  1404. },
  1405. data: convertLineData(lineData)
  1406. },
  1407. {
  1408. type: 'effectScatter',
  1409. coordinateSystem: 'geo',
  1410. zlevel: 2,
  1411. rippleEffect: {
  1412. brushType: 'stroke'
  1413. },
  1414. label: {
  1415. normal: {
  1416. show: true,
  1417. position: 'right',
  1418. formatter: '{b}'
  1419. }
  1420. },
  1421. symbolSize: function (val) {
  1422. return val[2] / 8;
  1423. },
  1424. itemStyle: {
  1425. normal: {
  1426. color: color
  1427. }
  1428. },
  1429. data: effectScatterData(lineData)
  1430. }
  1431. ]
  1432. };
  1433. mapChart.setOption(option);
  1434. mapChart.currentIndex = -1;
  1435. var timer = null;
  1436. setVal();
  1437. function setVal() {
  1438. clearTimeout(timer);
  1439. timer = setInterval(function() {
  1440. if (mapChart.currentIndex == -1) {
  1441. option.series[0].data = mapData;
  1442. option.series[1].data = convertLineData(lineData);
  1443. option.series[2].data = convertLineData(lineData);
  1444. option.series[3].data = effectScatterData(lineData);
  1445. mapChart.setOption(option);
  1446. }
  1447. // 取消之前高亮的图形
  1448. mapChart.dispatchAction({
  1449. type: "downplay",
  1450. seriesIndex: 0,
  1451. dataIndex: mapChart.currentIndex
  1452. });
  1453. mapChart.currentIndex = (mapChart.currentIndex + 1) % lineData.length;
  1454. // 高亮当前图形
  1455. mapChart.dispatchAction({
  1456. type: "highlight",
  1457. seriesIndex: 0,
  1458. dataIndex: mapChart.currentIndex
  1459. });
  1460. }, 3000);
  1461. }
  1462. var chinaEchartsObj = echarts.getMap('china');
  1463. var geoJSONChina = chinaEchartsObj.geoJson;
  1464. var allDefProvince = geoJSONChina.features;
  1465. for(var i = 0, len = allDefProvince.length; i < len; i++){
  1466. var sglProvinceProperties = allDefProvince[i].properties;
  1467. var sglProvinceName = sglProvinceProperties.name;
  1468. switch(sglProvinceName){
  1469. case '湖北':
  1470. sglProvinceProperties.cp[0] = 128.642464;
  1471. sglProvinceProperties.cp[1] = 34.756967;
  1472. break;
  1473. case '湖南':
  1474. sglProvinceProperties.cp[0] = 128.642464;
  1475. sglProvinceProperties.cp[1] = 34.756967;
  1476. break;
  1477. case '江西':
  1478. sglProvinceProperties.cp[0] = 128.642464;
  1479. sglProvinceProperties.cp[1] = 34.756967;
  1480. break;
  1481. case '甘肃':
  1482. sglProvinceProperties.cp[0] = 128.642464;
  1483. sglProvinceProperties.cp[1] = 34.756967;
  1484. break;
  1485. case '新疆':
  1486. sglProvinceProperties.cp[0] = 128.642464;
  1487. sglProvinceProperties.cp[1] = 34.756967;
  1488. break;
  1489. case '上海':
  1490. sglProvinceProperties.cp[0] = 128.642464;
  1491. sglProvinceProperties.cp[1] = 34.756967;
  1492. break;
  1493. case '江苏':
  1494. sglProvinceProperties.cp[0] = 128.642464;
  1495. sglProvinceProperties.cp[1] = 34.756967;
  1496. break;
  1497. case '云南':
  1498. sglProvinceProperties.cp[0] = 128.642464;
  1499. sglProvinceProperties.cp[1] = 34.756967;
  1500. break;
  1501. case '广东':
  1502. sglProvinceProperties.cp[0] = 128.642464;
  1503. sglProvinceProperties.cp[1] = 34.756967;
  1504. break;
  1505. case '浙江':
  1506. sglProvinceProperties.cp[0] = 128.642464;
  1507. sglProvinceProperties.cp[1] = 34.756967;
  1508. break;
  1509. case '河北':
  1510. sglProvinceProperties.cp[0] = 128.642464;
  1511. sglProvinceProperties.cp[1] = 34.756967;
  1512. break;
  1513. case '山东':
  1514. sglProvinceProperties.cp[0] = 128.642464;
  1515. sglProvinceProperties.cp[1] = 34.756967;
  1516. break;
  1517. case '河南':
  1518. sglProvinceProperties.cp[0] = 128.642464;
  1519. sglProvinceProperties.cp[1] = 34.756967;
  1520. break;
  1521. case '四川':
  1522. sglProvinceProperties.cp[0] = 128.642464;
  1523. sglProvinceProperties.cp[1] = 34.756967;
  1524. break;
  1525. case '内蒙古':
  1526. sglProvinceProperties.cp[0] = 128.642464;
  1527. sglProvinceProperties.cp[1] = 34.756967;
  1528. break;
  1529. }
  1530. }