index.js 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420
  1. /*大屏*/
  2. $(function () {
  3. echart_1();
  4. echart_2();
  5. echart_3();
  6. echart_4();
  7. echart_map();
  8. echart_5();
  9. //echart_1湖南货物收入
  10. function echart_1() {
  11. // 基于准备好的dom,初始化echarts实例
  12. var myChart = echarts.init(document.getElementById('chart_1'));
  13. option = {
  14. tooltip: {
  15. trigger: 'item',
  16. formatter: "{a} <br/>{b} : {c}万元"
  17. },
  18. legend: {
  19. x: 'center',
  20. y: '15%',
  21. data: [ '张家口', '承德', '衡水','邢台', '邯郸', '保定','秦皇岛','石家庄', '唐山'],
  22. icon: 'circle',
  23. textStyle: {
  24. color: '#fff',
  25. }
  26. },
  27. calculable: true,
  28. series: [{
  29. name: '',
  30. type: 'pie',
  31. //起始角度,支持范围[0, 360]
  32. startAngle: 0,
  33. //饼图的半径,数组的第一项是内半径,第二项是外半径
  34. radius: [41, 100.75],
  35. //支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度
  36. center: ['50%', '40%'],
  37. //是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
  38. // 'radius' 面积展现数据的百分比,半径展现数据的大小。
  39. // 'area' 所有扇区面积相同,仅通过半径展现数据大小
  40. roseType: 'area',
  41. //是否启用防止标签重叠策略,默认开启,圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。
  42. avoidLabelOverlap: false,
  43. label: {
  44. normal: {
  45. show: true,
  46. formatter: '{c}万元'
  47. },
  48. emphasis: {
  49. show: true
  50. }
  51. },
  52. labelLine: {
  53. normal: {
  54. show: true,
  55. length2: 1,
  56. },
  57. emphasis: {
  58. show: true
  59. }
  60. },
  61. data: [{
  62. value: 900.58,
  63. name: '张家口',
  64. itemStyle: {
  65. normal: {
  66. color: '#f845f1'
  67. }
  68. }
  69. },
  70. {
  71. value: 1100.58,
  72. name: '承德',
  73. itemStyle: {
  74. normal: {
  75. color: '#ad46f3'
  76. }
  77. }
  78. },
  79. {
  80. value: 1200.58,
  81. name: '衡水',
  82. itemStyle: {
  83. normal: {
  84. color: '#5045f6'
  85. }
  86. }
  87. },
  88. {
  89. value: 1300.58,
  90. name: '邢台',
  91. itemStyle: {
  92. normal: {
  93. color: '#4777f5'
  94. }
  95. }
  96. },
  97. {
  98. value: 1400.58,
  99. name: '邯郸',
  100. itemStyle: {
  101. normal: {
  102. color: '#44aff0'
  103. }
  104. }
  105. },
  106. {
  107. value: 1500.58,
  108. name: '保定',
  109. itemStyle: {
  110. normal: {
  111. color: '#45dbf7'
  112. }
  113. }
  114. },
  115. {
  116. value: 1500.58,
  117. name: '秦皇岛',
  118. itemStyle: {
  119. normal: {
  120. color: '#f6d54a'
  121. }
  122. }
  123. },
  124. {
  125. value: 1600.58,
  126. name: '石家庄',
  127. itemStyle: {
  128. normal: {
  129. color: '#f69846'
  130. }
  131. }
  132. },
  133. {
  134. value: 1800,
  135. name: '唐山',
  136. itemStyle: {
  137. normal: {
  138. color: '#ff4343'
  139. }
  140. }
  141. },
  142. {
  143. value: 0,
  144. name: "",
  145. itemStyle: {
  146. normal: {
  147. color: 'transparent'
  148. }
  149. },
  150. label: {
  151. show: false
  152. },
  153. labelLine: {
  154. show: false
  155. }
  156. },
  157. {
  158. value: 0,
  159. name: "",
  160. itemStyle: {
  161. normal: {
  162. color: 'transparent'
  163. }
  164. },
  165. label: {
  166. show: false
  167. },
  168. labelLine: {
  169. show: false
  170. }
  171. },
  172. {
  173. value: 0,
  174. name: "",
  175. itemStyle: {
  176. normal: {
  177. color: 'transparent'
  178. }
  179. },
  180. label: {
  181. show: false
  182. },
  183. labelLine: {
  184. show: false
  185. }
  186. },
  187. {
  188. value: 0,
  189. name: "",
  190. itemStyle: {
  191. normal: {
  192. color: 'transparent'
  193. }
  194. },
  195. label: {
  196. show: false
  197. },
  198. labelLine: {
  199. show: false
  200. }
  201. },
  202. {
  203. value: 0,
  204. name: "",
  205. itemStyle: {
  206. normal: {
  207. color: 'transparent'
  208. }
  209. },
  210. label: {
  211. show: false
  212. },
  213. labelLine: {
  214. show: false
  215. }
  216. },
  217. {
  218. value: 0,
  219. name: "",
  220. itemStyle: {
  221. normal: {
  222. color: 'transparent'
  223. }
  224. },
  225. label: {
  226. show: false
  227. },
  228. labelLine: {
  229. show: false
  230. }
  231. },
  232. {
  233. value: 0,
  234. name: "",
  235. itemStyle: {
  236. normal: {
  237. color: 'transparent'
  238. }
  239. },
  240. label: {
  241. show: false
  242. },
  243. labelLine: {
  244. show: false
  245. }
  246. },
  247. {
  248. value: 0,
  249. name: "",
  250. itemStyle: {
  251. normal: {
  252. color: 'transparent'
  253. }
  254. },
  255. label: {
  256. show: false
  257. },
  258. labelLine: {
  259. show: false
  260. }
  261. },
  262. {
  263. value: 0,
  264. name: "",
  265. itemStyle: {
  266. normal: {
  267. color: 'transparent'
  268. }
  269. },
  270. label: {
  271. show: false
  272. },
  273. labelLine: {
  274. show: false
  275. }
  276. }
  277. ]
  278. }]
  279. };
  280. /*大屏*/
  281. // 使用刚指定的配置项和数据显示图表。
  282. myChart.setOption(option);
  283. window.addEventListener("resize", function () {
  284. myChart.resize();
  285. });
  286. }
  287. //echart_2湖南省地图
  288. function echart_2() {
  289. // 基于准备好的dom,初始化echarts实例
  290. var myChart = echarts.init(document.getElementById('chart_2'));
  291. function showProvince() {
  292. myChart.setOption(option = {
  293. // backgroundColor: '#ffffff',
  294. visualMap: {
  295. show: false,
  296. min: 0,
  297. max: 100,
  298. left: 'left',
  299. top: 'bottom',
  300. text: ['高', '低'], // 文本,默认为数值文本
  301. calculable: true,
  302. inRange: {
  303. color: ['yellow', 'lightskyblue', 'orangered']
  304. }
  305. },
  306. series: [{
  307. type: 'map',
  308. mapType: 'hunan',
  309. roam: true,
  310. label: {
  311. normal: {
  312. show: true
  313. },
  314. emphasis: {
  315. textStyle: {
  316. color: '#fff'
  317. }
  318. }
  319. },
  320. itemStyle: {
  321. normal: {
  322. borderColor: '#389BB7',
  323. areaColor: '#fff',
  324. },
  325. emphasis: {
  326. areaColor: '#389BB7',
  327. borderWidth: 0
  328. }
  329. },
  330. animation: false,
  331. data: [{
  332. name: '长沙市',
  333. value: 100
  334. }, {
  335. name: '株洲市',
  336. value: 96
  337. }, {
  338. name: '湘潭市',
  339. value: 98
  340. }, {
  341. name: '衡阳市',
  342. value: 80
  343. }, {
  344. name: '邵阳市',
  345. value: 88
  346. }, {
  347. name: '岳阳市',
  348. value: 79
  349. }, {
  350. name: '常德市',
  351. value: 77,
  352. }, {
  353. name: '张家界市',
  354. value: 33
  355. }, {
  356. name: '益阳市',
  357. value: 69,
  358. }, {
  359. name: '郴州市',
  360. value: 66
  361. }, {
  362. name: '永州市',
  363. value: 22
  364. },{
  365. name: '娄底市',
  366. value: 51
  367. },{
  368. name: '湘西土家族苗族自治州',
  369. value: 44
  370. },{
  371. name: '怀化市',
  372. value: 9
  373. }]
  374. }]
  375. });
  376. }
  377. var currentIdx = 0;
  378. showProvince();
  379. // 使用刚指定的配置项和数据显示图表。
  380. window.addEventListener("resize", function () {
  381. myChart.resize();
  382. });
  383. }
  384. // echart_map中国地图
  385. function echart_map() {
  386. // 基于准备好的dom,初始化echarts实例
  387. var myChart = echarts.init(document.getElementById('chart_map'));
  388. var mapName = 'china'
  389. var data = []
  390. var toolTipData = [];
  391. /*获取地图数据*/
  392. myChart.showLoading();
  393. var mapFeatures = echarts.getMap(mapName).geoJson.features;
  394. myChart.hideLoading();
  395. var geoCoordMap = {
  396. '福州': [119.4543, 25.9222],
  397. '长春': [125.8154, 44.2584],
  398. '重庆': [107.7539, 30.1904],
  399. '西安': [109.1162, 34.2004],
  400. '成都': [103.9526, 30.7617],
  401. '常州': [119.4543, 31.5582],
  402. '北京': [116.4551, 40.2539],
  403. '北海': [109.314, 21.6211],
  404. '海口': [110.3893, 19.8516],
  405. '长沙': [113.019455,28.200103],
  406. '上海': [121.40, 31.73],
  407. '内蒙古': [106.82, 39.67]
  408. };
  409. var GZData = [
  410. [{
  411. name: '长沙'
  412. }, {
  413. name: '福州',
  414. value: 95
  415. }],
  416. [{
  417. name: '长沙'
  418. }, {
  419. name: '长春',
  420. value: 80
  421. }],
  422. [{
  423. name: '长沙'
  424. }, {
  425. name: '重庆',
  426. value: 70
  427. }],
  428. [{
  429. name: '长沙'
  430. }, {
  431. name: '西安',
  432. value: 60
  433. }],
  434. [{
  435. name: '长沙'
  436. }, {
  437. name: '成都',
  438. value: 50
  439. }],
  440. [{
  441. name: '长沙'
  442. }, {
  443. name: '常州',
  444. value: 40
  445. }],
  446. [{
  447. name: '长沙'
  448. }, {
  449. name: '北京',
  450. value: 30
  451. }],
  452. [{
  453. name: '长沙'
  454. }, {
  455. name: '北海',
  456. value: 20
  457. }],
  458. [{
  459. name: '长沙'
  460. }, {
  461. name: '海口',
  462. value: 10
  463. }],
  464. [{
  465. name: '长沙'
  466. }, {
  467. name: '上海',
  468. value: 80
  469. }],
  470. [{
  471. name: '长沙'
  472. }, {
  473. name: '内蒙古',
  474. value: 80
  475. }]
  476. ];
  477. var convertData = function (data) {
  478. var res = [];
  479. for (var i = 0; i < data.length; i++) {
  480. var dataItem = data[i];
  481. var fromCoord = geoCoordMap[dataItem[0].name];
  482. var toCoord = geoCoordMap[dataItem[1].name];
  483. if (fromCoord && toCoord) {
  484. res.push({
  485. fromName: dataItem[0].name,
  486. toName: dataItem[1].name,
  487. coords: [fromCoord, toCoord]
  488. });
  489. }
  490. }
  491. return res;
  492. };
  493. var color = ['#c5f80e'];
  494. var series = [];
  495. [
  496. ['石家庄', GZData]
  497. ].forEach(function (item, i) {
  498. series.push({
  499. name: item[0],
  500. type: 'lines',
  501. zlevel: 2,
  502. symbol: ['none', 'arrow'],
  503. symbolSize: 10,
  504. effect: {
  505. show: true,
  506. period: 6,
  507. trailLength: 0,
  508. symbol: 'arrow',
  509. symbolSize: 5
  510. },
  511. lineStyle: {
  512. normal: {
  513. color: color[i],
  514. width: 1,
  515. opacity: 0.6,
  516. curveness: 0.2
  517. }
  518. },
  519. data: convertData(item[1])
  520. }, {
  521. name: item[0],
  522. type: 'effectScatter',
  523. coordinateSystem: 'geo',
  524. zlevel: 2,
  525. rippleEffect: {
  526. brushType: 'stroke'
  527. },
  528. label: {
  529. normal: {
  530. show: true,
  531. position: 'right',
  532. formatter: '{b}'
  533. }
  534. },
  535. symbolSize: function (val) {
  536. return val[2] / 8;
  537. },
  538. itemStyle: {
  539. normal: {
  540. color: color[i]
  541. }
  542. },
  543. data: item[1].map(function (dataItem) {
  544. return {
  545. name: dataItem[1].name,
  546. value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  547. };
  548. })
  549. });
  550. });
  551. option = {
  552. tooltip: {
  553. trigger: 'item'
  554. },
  555. geo: {
  556. map: 'china',
  557. label: {
  558. emphasis: {
  559. show: false
  560. }
  561. },
  562. roam: true,
  563. itemStyle: {
  564. normal: {
  565. borderColor: 'rgba(147, 235, 248, 1)',
  566. borderWidth: 1,
  567. areaColor: {
  568. type: 'radial',
  569. x: 0.5,
  570. y: 0.5,
  571. r: 0.8,
  572. colorStops: [{
  573. offset: 0,
  574. color: 'rgba(175,238,238, 0)' // 0% 处的颜色
  575. }, {
  576. offset: 1,
  577. color: 'rgba(47,79,79, .1)' // 100% 处的颜色
  578. }],
  579. globalCoord: false // 缺省为 false
  580. },
  581. shadowColor: 'rgba(128, 217, 248, 1)',
  582. // shadowColor: 'rgba(255, 255, 255, 1)',
  583. shadowOffsetX: -2,
  584. shadowOffsetY: 2,
  585. shadowBlur: 10
  586. },
  587. emphasis: {
  588. areaColor: '#389BB7',
  589. borderWidth: 0
  590. }
  591. }
  592. },
  593. series: series
  594. };
  595. // 使用刚指定的配置项和数据显示图表。
  596. myChart.setOption(option);
  597. window.addEventListener("resize", function () {
  598. myChart.resize();
  599. });
  600. }
  601. //echart_3货物周转量
  602. function echart_3() {
  603. // 基于准备好的dom,初始化echarts实例
  604. var myChart = echarts.init(document.getElementById('chart_3'));
  605. myChart.clear();
  606. option = {
  607. title: {
  608. text: ''
  609. },
  610. tooltip: {
  611. trigger: 'axis'
  612. },
  613. legend: {
  614. data:['铁路货物','国家铁路货物','地方铁路货物','合资铁路货物','公路货物','水运货物'],
  615. textStyle:{
  616. color: '#fff'
  617. },
  618. top: '8%'
  619. },
  620. grid: {
  621. top: '40%',
  622. left: '3%',
  623. right: '4%',
  624. bottom: '3%',
  625. containLabel: true
  626. },
  627. color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
  628. xAxis: {
  629. type: 'category',
  630. boundaryGap: false,
  631. data: ['2012年','2013年','2014年','2015年','2016年'],
  632. splitLine: {
  633. show: false
  634. },
  635. axisLine: {
  636. lineStyle: {
  637. color: '#fff'
  638. }
  639. }
  640. },
  641. yAxis: {
  642. name: '亿吨公里',
  643. type: 'value',
  644. splitLine: {
  645. show: false
  646. },
  647. axisLine: {
  648. lineStyle: {
  649. color: '#fff'
  650. }
  651. }
  652. },
  653. series: [
  654. {
  655. name:'铁路货物',
  656. type:'line',
  657. data:[3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
  658. },
  659. {
  660. name:'国家铁路货物',
  661. type:'line',
  662. data:[3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
  663. },
  664. {
  665. name:'地方铁路货物',
  666. type:'line',
  667. data:[14.77, 15.17, 13.17, 14.56, 15.84]
  668. },
  669. {
  670. name:'合资铁路货物',
  671. type:'line',
  672. data:[686.17,847.26,895.22,865.28,886.72]
  673. },
  674. {
  675. name:'公路货物',
  676. type:'line',
  677. data:[6133.47, 6577.89, 7019.56,6821.48,7294.59]
  678. },
  679. {
  680. name:'水运货物',
  681. type:'line',
  682. data:[509.60, 862.54, 1481.77,1552.79,1333.62]
  683. }
  684. ]
  685. };
  686. myChart.setOption(option);
  687. }
  688. //湖南高速公路
  689. function echart_4() {
  690. // 基于准备好的dom,初始化echarts实例
  691. var myChart = echarts.init(document.getElementById('chart_4'));
  692. myChart.setOption({
  693. series: [{
  694. type: 'map',
  695. mapType: 'hunan'
  696. }]
  697. });
  698. var geoCoordMap = {
  699. '怀化': [109.999867,27.518949],
  700. '吉首': [109.741528,28.332629],
  701. '张家界': [110.491722,29.112001],
  702. '常德': [111.701486,29.076683],
  703. '益阳': [112.348741,28.544124],
  704. '岳阳': [113.126486,29.382401],
  705. '长沙': [113.019455,28.200103],
  706. '株洲': [113.163141,27.8418],
  707. '湘潭': [112.91977,27.882141],
  708. '邵阳': [111.467859,27.21915],
  709. '娄底': [112.012438,27.745506],
  710. '衡阳': [112.63809,26.895225],
  711. '永州': [111.577632,26.460144],
  712. '郴州': [113.039396,25.81497]
  713. };
  714. var goData = [
  715. [{
  716. name: '张家界'
  717. }, {
  718. id: 1,
  719. name: '常德',
  720. value: 86
  721. }],
  722. [{
  723. name: '吉首'
  724. }, {
  725. id: 1,
  726. name: '常德',
  727. value: 86
  728. }],
  729. [{
  730. name: '常德'
  731. }, {
  732. id: 1,
  733. name: '益阳',
  734. value: 70
  735. }],
  736. [{
  737. name: '益阳'
  738. }, {
  739. id: 1,
  740. name: '长沙',
  741. value: 95
  742. }],
  743. [{
  744. name: '长沙'
  745. }, {
  746. id: 1,
  747. name: '岳阳',
  748. value: 70
  749. }],
  750. [{
  751. name: '长沙'
  752. }, {
  753. id: 1,
  754. name: '湘潭',
  755. value: 80
  756. }],
  757. [{
  758. name: '长沙'
  759. }, {
  760. id: 1,
  761. name: '株洲',
  762. value: 80
  763. }],
  764. [{
  765. name: '长沙'
  766. }, {
  767. id: 1,
  768. name: '衡阳',
  769. value: 80
  770. }],
  771. [{
  772. name: '衡阳'
  773. }, {
  774. id: 1,
  775. name: '郴州',
  776. value: 70
  777. }],
  778. [{
  779. name: '衡阳'
  780. }, {
  781. id: 1,
  782. name: '永州',
  783. value: 70
  784. }],
  785. [{
  786. name: '湘潭'
  787. }, {
  788. id: 1,
  789. name: '娄底',
  790. value: 60
  791. }],
  792. [{
  793. name: '娄底'
  794. }, {
  795. id: 1,
  796. name: '邵阳',
  797. value: 75
  798. }],
  799. [{
  800. name: '邵阳'
  801. }, {
  802. id: 1,
  803. name: '怀化',
  804. value: 75
  805. }],
  806. ];
  807. //值控制圆点大小
  808. var backData = [
  809. [{
  810. name: '常德'
  811. }, {
  812. id: 1,
  813. name: '张家界',
  814. value: 80
  815. }],
  816. [{
  817. name: '常德'
  818. }, {
  819. id: 1,
  820. name: '吉首',
  821. value: 66
  822. }],
  823. [{
  824. name: '益阳'
  825. }, {
  826. id: 1,
  827. name: '常德',
  828. value: 86
  829. }],
  830. [{
  831. name: '长沙'
  832. }, {
  833. id: 1,
  834. name: '益阳',
  835. value: 70
  836. }],
  837. [{
  838. name: '岳阳'
  839. }, {
  840. id: 1,
  841. name: '长沙',
  842. value: 95
  843. }],
  844. [{
  845. name: '湘潭'
  846. }, {
  847. id: 1,
  848. name: '长沙',
  849. value: 95
  850. }],
  851. [{
  852. name: '株洲'
  853. }, {
  854. id: 1,
  855. name: '长沙',
  856. value: 95
  857. }],
  858. [{
  859. name: '衡阳'
  860. }, {
  861. id: 1,
  862. name: '长沙',
  863. value: 95
  864. }],
  865. [{
  866. name: '郴州'
  867. }, {
  868. id: 1,
  869. name: '衡阳',
  870. value: 80
  871. }],
  872. [{
  873. name: '永州'
  874. }, {
  875. id: 1,
  876. name: '衡阳',
  877. value: 80
  878. }],
  879. [{
  880. name: '娄底'
  881. }, {
  882. id: 1,
  883. name: '湘潭',
  884. value: 80
  885. }],
  886. [{
  887. name: '邵阳'
  888. }, {
  889. id: 1,
  890. name: '娄底',
  891. value: 60
  892. }],
  893. [{
  894. name: '怀化'
  895. }, {
  896. id: 1,
  897. name: '邵阳',
  898. value: 75
  899. }],
  900. ];
  901. var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
  902. var arcAngle = function(data) {
  903. var j, k;
  904. for (var i = 0; i < data.length; i++) {
  905. var dataItem = data[i];
  906. if (dataItem[1].id == 1) {
  907. j = 0.2;
  908. return j;
  909. } else if (dataItem[1].id == 2) {
  910. k = -0.2;
  911. return k;
  912. }
  913. }
  914. }
  915. var convertData = function(data) {
  916. var res = [];
  917. for (var i = 0; i < data.length; i++) {
  918. var dataItem = data[i];
  919. var fromCoord = geoCoordMap[dataItem[0].name];
  920. var toCoord = geoCoordMap[dataItem[1].name];
  921. if (dataItem[1].id == 1) {
  922. if (fromCoord && toCoord) {
  923. res.push([{
  924. coord: fromCoord,
  925. }, {
  926. coord: toCoord,
  927. value: dataItem[1].value //线条颜色
  928. }]);
  929. }
  930. } else if (dataItem[1].id == 2) {
  931. if (fromCoord && toCoord) {
  932. res.push([{
  933. coord: fromCoord,
  934. }, {
  935. coord: toCoord
  936. }]);
  937. }
  938. }
  939. }
  940. return res;
  941. };
  942. var color = ['#fff', '#FF1493', '#0000FF'];
  943. var series = [];
  944. [
  945. ['1', goData],
  946. ['2', backData]
  947. ].forEach(function(item, i) {
  948. series.push({
  949. name: item[0],
  950. type: 'lines',
  951. zlevel: 2,
  952. symbol: ['arrow', 'arrow'],
  953. //线特效配置
  954. effect: {
  955. show: true,
  956. period: 6,
  957. trailLength: 0.1,
  958. symbol: 'arrow', //标记类型
  959. symbolSize: 5
  960. },
  961. lineStyle: {
  962. normal: {
  963. width: 1,
  964. opacity: 0.4,
  965. curveness: arcAngle(item[1]), //弧线角度
  966. color: '#fff'
  967. }
  968. },
  969. edgeLabel: {
  970. normal: {
  971. show: true,
  972. textStyle: {
  973. fontSize: 14
  974. },
  975. formatter: function(params) {
  976. var txt = '';
  977. if (params.data.speed !== undefined) {
  978. txt = params.data.speed;
  979. }
  980. return txt;
  981. },
  982. }
  983. },
  984. data: convertData(item[1])
  985. }, {
  986. type: 'effectScatter',
  987. coordinateSystem: 'geo',
  988. zlevel: 2,
  989. //波纹效果
  990. rippleEffect: {
  991. period: 2,
  992. brushType: 'stroke',
  993. scale: 3
  994. },
  995. label: {
  996. normal: {
  997. show: true,
  998. color: '#fff',
  999. position: 'right',
  1000. formatter: '{b}'
  1001. }
  1002. },
  1003. //终点形象
  1004. symbol: 'circle',
  1005. //圆点大小
  1006. symbolSize: function(val) {
  1007. return val[2] / 8;
  1008. },
  1009. itemStyle: {
  1010. normal: {
  1011. show: true
  1012. }
  1013. },
  1014. data: item[1].map(function(dataItem) {
  1015. return {
  1016. name: dataItem[1].name,
  1017. value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  1018. };
  1019. })
  1020. });
  1021. });
  1022. option = {
  1023. title: {
  1024. text: '',
  1025. subtext: '',
  1026. left: 'center',
  1027. textStyle: {
  1028. color: '#fff'
  1029. }
  1030. },
  1031. tooltip: {
  1032. trigger: 'item',
  1033. formatter: '{b}'
  1034. },
  1035. //线颜色及飞行轨道颜色
  1036. visualMap: {
  1037. show: false,
  1038. min: 0,
  1039. max: 100,
  1040. color: ['#31A031','#31A031']
  1041. },
  1042. //地图相关设置
  1043. geo: {
  1044. map: 'hunan',
  1045. //视角缩放比例
  1046. zoom: 1,
  1047. //显示文本样式
  1048. label: {
  1049. normal: {
  1050. show: false,
  1051. textStyle: {
  1052. color: '#fff'
  1053. }
  1054. },
  1055. emphasis: {
  1056. textStyle: {
  1057. color: '#fff'
  1058. }
  1059. }
  1060. },
  1061. //鼠标缩放和平移
  1062. roam: true,
  1063. itemStyle: {
  1064. normal: {
  1065. // color: '#ddd',
  1066. borderColor: 'rgba(147, 235, 248, 1)',
  1067. borderWidth: 1,
  1068. areaColor: {
  1069. type: 'radial',
  1070. x: 0.5,
  1071. y: 0.5,
  1072. r: 0.8,
  1073. colorStops: [{
  1074. offset: 0,
  1075. color: 'rgba(175,238,238, 0)' // 0% 处的颜色
  1076. }, {
  1077. offset: 1,
  1078. color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
  1079. }],
  1080. globalCoord: false // 缺省为 false
  1081. },
  1082. shadowColor: 'rgba(128, 217, 248, 1)',
  1083. // shadowColor: 'rgba(255, 255, 255, 1)',
  1084. shadowOffsetX: -2,
  1085. shadowOffsetY: 2,
  1086. shadowBlur: 10
  1087. },
  1088. emphasis: {
  1089. areaColor: '#389BB7',
  1090. borderWidth: 0
  1091. }
  1092. }
  1093. },
  1094. series: series
  1095. };
  1096. myChart.setOption(option);
  1097. }
  1098. //湖南省飞机场
  1099. function echart_5() {
  1100. // 基于准备好的dom,初始化echarts实例
  1101. var myChart = echarts.init(document.getElementById('chart_5'));
  1102. function showProvince() {
  1103. var geoCoordMap = {
  1104. '长沙黄花国际机场': [113.226512,28.192929],
  1105. '张家界荷花机场': [110.454598,29.107223],
  1106. '常德桃花源机场': [111.651508,28.921516],
  1107. '永州零陵机场': [111.622869,26.340994],
  1108. '怀化芷江机场': [109.714784,27.44615],
  1109. };
  1110. var data = [{
  1111. name: '长沙黄花国际机场',
  1112. value: 100
  1113. },
  1114. {
  1115. name: '张家界荷花机场',
  1116. value: 100
  1117. },
  1118. {
  1119. name: '常德桃花源机场',
  1120. value: 100
  1121. },
  1122. {
  1123. name: '永州零陵机场',
  1124. value: 100
  1125. },
  1126. {
  1127. name: '怀化芷江机场',
  1128. value: 100
  1129. }
  1130. ];
  1131. var max = 480,
  1132. min = 9; // todo
  1133. var maxSize4Pin = 100,
  1134. minSize4Pin = 20;
  1135. var convertData = function (data) {
  1136. var res = [];
  1137. for (var i = 0; i < data.length; i++) {
  1138. var geoCoord = geoCoordMap[data[i].name];
  1139. if (geoCoord) {
  1140. res.push({
  1141. name: data[i].name,
  1142. value: geoCoord.concat(data[i].value)
  1143. });
  1144. }
  1145. }
  1146. return res;
  1147. };
  1148. myChart.setOption(option = {
  1149. title: {
  1150. top: 20,
  1151. text: '',
  1152. subtext: '',
  1153. x: 'center',
  1154. textStyle: {
  1155. color: '#ccc'
  1156. }
  1157. },
  1158. legend: {
  1159. orient: 'vertical',
  1160. y: 'bottom',
  1161. x: 'right',
  1162. data: ['pm2.5'],
  1163. textStyle: {
  1164. color: '#fff'
  1165. }
  1166. },
  1167. visualMap: {
  1168. show: false,
  1169. min: 0,
  1170. max: 500,
  1171. left: 'left',
  1172. top: 'bottom',
  1173. text: ['高', '低'], // 文本,默认为数值文本
  1174. calculable: true,
  1175. seriesIndex: [1],
  1176. inRange: {
  1177. }
  1178. },
  1179. geo: {
  1180. show: true,
  1181. map:'hunan',
  1182. mapType: 'hunan',
  1183. label: {
  1184. normal: {
  1185. },
  1186. //鼠标移入后查看效果
  1187. emphasis: {
  1188. textStyle: {
  1189. color: '#fff'
  1190. }
  1191. }
  1192. },
  1193. //鼠标缩放和平移
  1194. roam: true,
  1195. itemStyle: {
  1196. normal: {
  1197. // color: '#ddd',
  1198. borderColor: 'rgba(147, 235, 248, 1)',
  1199. borderWidth: 1,
  1200. areaColor: {
  1201. type: 'radial',
  1202. x: 0.5,
  1203. y: 0.5,
  1204. r: 0.8,
  1205. colorStops: [{
  1206. offset: 0,
  1207. color: 'rgba(175,238,238, 0)' // 0% 处的颜色
  1208. }, {
  1209. offset: 1,
  1210. color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
  1211. }],
  1212. globalCoord: false // 缺省为 false
  1213. },
  1214. shadowColor: 'rgba(128, 217, 248, 1)',
  1215. shadowOffsetX: -2,
  1216. shadowOffsetY: 2,
  1217. shadowBlur: 10
  1218. },
  1219. emphasis: {
  1220. areaColor: '#389BB7',
  1221. borderWidth: 0
  1222. }
  1223. }
  1224. },
  1225. series: [{
  1226. name: 'light',
  1227. type: 'map',
  1228. coordinateSystem: 'geo',
  1229. data: convertData(data),
  1230. itemStyle: {
  1231. normal: {
  1232. color: '#F4E925'
  1233. }
  1234. }
  1235. },
  1236. {
  1237. name: '点',
  1238. type: 'scatter',
  1239. coordinateSystem: 'geo',
  1240. symbol: 'pin',
  1241. symbolSize: function(val) {
  1242. var a = (maxSize4Pin - minSize4Pin) / (max - min);
  1243. var b = minSize4Pin - a * min;
  1244. b = maxSize4Pin - a * max;
  1245. return a * val[2] + b;
  1246. },
  1247. label: {
  1248. normal: {
  1249. // show: true,
  1250. // textStyle: {
  1251. // color: '#fff',
  1252. // fontSize: 9,
  1253. // }
  1254. }
  1255. },
  1256. itemStyle: {
  1257. normal: {
  1258. color: '#F62157', //标志颜色
  1259. }
  1260. },
  1261. zlevel: 6,
  1262. data: convertData(data),
  1263. },
  1264. {
  1265. name: 'light',
  1266. type: 'map',
  1267. mapType: 'hunan',
  1268. geoIndex: 0,
  1269. aspectScale: 0.75, //长宽比
  1270. showLegendSymbol: false, // 存在legend时显示
  1271. label: {
  1272. normal: {
  1273. show: false
  1274. },
  1275. emphasis: {
  1276. show: false,
  1277. textStyle: {
  1278. color: '#fff'
  1279. }
  1280. }
  1281. },
  1282. roam: true,
  1283. itemStyle: {
  1284. normal: {
  1285. areaColor: '#031525',
  1286. borderColor: '#FFFFFF',
  1287. },
  1288. emphasis: {
  1289. areaColor: '#2B91B7'
  1290. }
  1291. },
  1292. animation: false,
  1293. data: data
  1294. },
  1295. {
  1296. name: ' ',
  1297. type: 'effectScatter',
  1298. coordinateSystem: 'geo',
  1299. data: convertData(data.sort(function (a, b) {
  1300. return b.value - a.value;
  1301. }).slice(0, 5)),
  1302. symbolSize: function (val) {
  1303. return val[2] / 10;
  1304. },
  1305. showEffectOn: 'render',
  1306. rippleEffect: {
  1307. brushType: 'stroke'
  1308. },
  1309. hoverAnimation: true,
  1310. label: {
  1311. normal: {
  1312. formatter: '{b}',
  1313. position: 'right',
  1314. show: true
  1315. }
  1316. },
  1317. itemStyle: {
  1318. normal: {
  1319. color: '#05C3F9',
  1320. shadowBlur: 10,
  1321. shadowColor: '#05C3F9'
  1322. }
  1323. },
  1324. zlevel: 1
  1325. },
  1326. ]
  1327. });
  1328. }
  1329. showProvince();
  1330. // 使用刚指定的配置项和数据显示图表。
  1331. // myChart.setOption(option);
  1332. window.addEventListener("resize", function () {
  1333. myChart.resize();
  1334. });
  1335. }
  1336. //点击跳转
  1337. $('#chart_map').click(function(){
  1338. window.location.href = './page/index.html';
  1339. });
  1340. $('.t_btn2').click(function(){
  1341. window.location.href = "./page/index.html?id=2";
  1342. });
  1343. $('.t_btn3').click(function(){
  1344. window.location.href = "./page/index.html?id=3";
  1345. });
  1346. $('.t_btn4').click(function(){
  1347. window.location.href = "./page/index.html?id=4";
  1348. });
  1349. $('.t_btn5').click(function(){
  1350. window.location.href = "./page/index.html?id=5";
  1351. });
  1352. $('.t_btn6').click(function(){
  1353. window.location.href = "./page/index.html?id=6";
  1354. });
  1355. $('.t_btn7').click(function(){
  1356. window.location.href = "./page/index.html?id=7";
  1357. });
  1358. $('.t_btn8').click(function(){
  1359. window.location.href = "./page/index.html?id=8";
  1360. });
  1361. $('.t_btn9').click(function(){
  1362. window.location.href = "./page/index.html?id=9";
  1363. });
  1364. });