index.js 51 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139
  1. $(function () {
  2. echart_1();
  3. echart_2();
  4. echart_3();
  5. echart_map();
  6. //echart_1湖南货物收入
  7. function echart_1() {
  8. // 基于准备好的dom,初始化echarts实例
  9. var myChart = echarts.init(document.getElementById('chart_1'));
  10. option = {
  11. tooltip: {
  12. trigger: 'item',
  13. formatter: "{a} <br/>{b} : {c}件"
  14. },
  15. legend: {
  16. x: 'center',
  17. y: '15%',
  18. data: [ '南宁市', '柳州市', '桂林市','梧州市', '北海市', '防城港市','钦州市','贵港市', '玉林市','百色市','贺州市','河池市','来宾市','崇左市'],
  19. icon: 'circle',
  20. textStyle: {
  21. color: '#fff',
  22. }
  23. },
  24. calculable: true,
  25. series: [{
  26. name: '',
  27. type: 'pie',
  28. //起始角度,支持范围[0, 360]
  29. // startAngle: 0,
  30. //饼图的半径,数组的第一项是内半径,第二项是外半径
  31. radius : '45%',
  32. //支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度
  33. center: ['60%', '65%'],
  34. //是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
  35. // 'radius' 面积展现数据的百分比,半径展现数据的大小。
  36. // 'area' 所有扇区面积相同,仅通过半径展现数据大小
  37. // roseType: 'radius',
  38. //是否启用防止标签重叠策略,默认开启,圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。
  39. // avoidLabelOverlap: false,
  40. label: {
  41. normal: {
  42. show: true,
  43. formatter: '{b}{c}万件'
  44. },
  45. emphasis: {
  46. show: true
  47. }
  48. },
  49. labelLine: {
  50. normal: {
  51. show: true,
  52. length2: 1,
  53. },
  54. emphasis: {
  55. show: true
  56. }
  57. },
  58. data: [{
  59. value: 25097.63,
  60. name: '南宁市',
  61. itemStyle: {
  62. normal: {
  63. color: '#f845f1'
  64. }
  65. }
  66. },
  67. {
  68. value: 4740.16,
  69. name: '柳州市',
  70. itemStyle: {
  71. normal: {
  72. color: '#ad46f3'
  73. }
  74. }
  75. },
  76. {
  77. value: 2931.79,
  78. name: '桂林市',
  79. itemStyle: {
  80. normal: {
  81. color: '#5045f6'
  82. }
  83. }
  84. },
  85. {
  86. value: 1174.27,
  87. name: '梧州市',
  88. itemStyle: {
  89. normal: {
  90. color: '#4777f5'
  91. }
  92. }
  93. },
  94. {
  95. value: 1423.21,
  96. name: '北海市',
  97. itemStyle: {
  98. normal: {
  99. color: '#44aff0'
  100. }
  101. }
  102. },
  103. {
  104. value: 1132.37,
  105. name: '防城港市',
  106. itemStyle: {
  107. normal: {
  108. color: '#45dbf7'
  109. }
  110. }
  111. },
  112. {
  113. value: 929.50,
  114. name: '钦州市',
  115. itemStyle: {
  116. normal: {
  117. color: '#f6d54a'
  118. }
  119. }
  120. },
  121. {
  122. value: 1555.20,
  123. name: '贵港市',
  124. itemStyle: {
  125. normal: {
  126. color: '#f69846'
  127. }
  128. }
  129. },
  130. {
  131. value: 4881.52,
  132. name: '玉林市',
  133. itemStyle: {
  134. normal: {
  135. color: '#ad46f3'
  136. }
  137. }
  138. },
  139. {
  140. value: 1114.72,
  141. name: '百色市',
  142. itemStyle: {
  143. normal: {
  144. color: '#32C12E'
  145. }
  146. }
  147. },
  148. {
  149. value: 605.85,
  150. name: '贺州市',
  151. itemStyle: {
  152. normal: {
  153. color: '#90F5AA'
  154. }
  155. }
  156. },
  157. {
  158. value: 596.23,
  159. name: '河池市',
  160. itemStyle: {
  161. normal: {
  162. color: '#F46852'
  163. }
  164. }
  165. },
  166. {
  167. value: 419.44,
  168. name: '来宾市',
  169. itemStyle: {
  170. normal: {
  171. color: '#eaf048'
  172. }
  173. }
  174. },
  175. {
  176. value: 1499.18,
  177. name: '崇左市',
  178. itemStyle: {
  179. normal: {
  180. color: '#9ff048'
  181. }
  182. }
  183. },
  184. {
  185. value: 0,
  186. name: "",
  187. itemStyle: {
  188. normal: {
  189. color: 'transparent'
  190. }
  191. },
  192. label: {
  193. show: false
  194. },
  195. labelLine: {
  196. show: false
  197. }
  198. },
  199. {
  200. value: 0,
  201. name: "",
  202. itemStyle: {
  203. normal: {
  204. color: 'transparent'
  205. }
  206. },
  207. label: {
  208. show: false
  209. },
  210. labelLine: {
  211. show: false
  212. }
  213. },
  214. {
  215. value: 0,
  216. name: "",
  217. itemStyle: {
  218. normal: {
  219. color: 'transparent'
  220. }
  221. },
  222. label: {
  223. show: false
  224. },
  225. labelLine: {
  226. show: false
  227. }
  228. },
  229. {
  230. value: 0,
  231. name: "",
  232. itemStyle: {
  233. normal: {
  234. color: 'transparent'
  235. }
  236. },
  237. label: {
  238. show: false
  239. },
  240. labelLine: {
  241. show: false
  242. }
  243. },
  244. {
  245. value: 0,
  246. name: "",
  247. itemStyle: {
  248. normal: {
  249. color: 'transparent'
  250. }
  251. },
  252. label: {
  253. show: false
  254. },
  255. labelLine: {
  256. show: false
  257. }
  258. },
  259. {
  260. value: 0,
  261. name: "",
  262. itemStyle: {
  263. normal: {
  264. color: 'transparent'
  265. }
  266. },
  267. label: {
  268. show: false
  269. },
  270. labelLine: {
  271. show: false
  272. }
  273. },
  274. {
  275. value: 0,
  276. name: "",
  277. itemStyle: {
  278. normal: {
  279. color: 'transparent'
  280. }
  281. },
  282. label: {
  283. show: false
  284. },
  285. labelLine: {
  286. show: false
  287. }
  288. },
  289. {
  290. value: 0,
  291. name: "",
  292. itemStyle: {
  293. normal: {
  294. color: 'transparent'
  295. }
  296. },
  297. label: {
  298. show: false
  299. },
  300. labelLine: {
  301. show: false
  302. }
  303. },
  304. {
  305. value: 0,
  306. name: "",
  307. itemStyle: {
  308. normal: {
  309. color: 'transparent'
  310. }
  311. },
  312. label: {
  313. show: false
  314. },
  315. labelLine: {
  316. show: false
  317. }
  318. },
  319. {
  320. value: 0,
  321. name: "",
  322. itemStyle: {
  323. normal: {
  324. color: 'transparent'
  325. }
  326. },
  327. label: {
  328. show: false
  329. },
  330. labelLine: {
  331. show: false
  332. }
  333. },
  334. {
  335. value: 0,
  336. name: "",
  337. itemStyle: {
  338. normal: {
  339. color: 'transparent'
  340. }
  341. },
  342. label: {
  343. show: false
  344. },
  345. labelLine: {
  346. show: false
  347. }
  348. },
  349. {
  350. value: 0,
  351. name: "",
  352. itemStyle: {
  353. normal: {
  354. color: 'transparent'
  355. }
  356. },
  357. label: {
  358. show: false
  359. },
  360. labelLine: {
  361. show: false
  362. }
  363. },
  364. {
  365. value: 0,
  366. name: "",
  367. itemStyle: {
  368. normal: {
  369. color: 'transparent'
  370. }
  371. },
  372. label: {
  373. show: false
  374. },
  375. labelLine: {
  376. show: false
  377. }
  378. },
  379. {
  380. value: 0,
  381. name: "",
  382. itemStyle: {
  383. normal: {
  384. color: 'transparent'
  385. }
  386. },
  387. label: {
  388. show: false
  389. },
  390. labelLine: {
  391. show: false
  392. }
  393. }
  394. ]
  395. }]
  396. };
  397. // 使用刚指定的配置项和数据显示图表。
  398. myChart.setOption(option);
  399. window.addEventListener("resize", function () {
  400. myChart.resize();
  401. });
  402. }
  403. //电子商务销售额、订单数
  404. function echart_2() {
  405. // 基于准备好的dom,初始化echarts实例
  406. var myChart = echarts.init(document.getElementById('chart_2'));
  407. myChart.clear();
  408. option = {
  409. title: {
  410. text: ''
  411. },
  412. tooltip: {
  413. trigger: 'axis'
  414. },
  415. legend: {
  416. data:['销售额','订单数'],
  417. textStyle:{
  418. color: '#fff'
  419. },
  420. top: '8%'
  421. },
  422. grid: {
  423. top: '40%',
  424. left: '3%',
  425. right: '4%',
  426. bottom: '3%',
  427. containLabel: true
  428. },
  429. color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
  430. xAxis: {
  431. type: 'category',
  432. boundaryGap: false,
  433. data: ['2018年9月','2018年10月','2018年11月','2018年12月','2019年1月'],
  434. splitLine: {
  435. show: false
  436. },
  437. axisLine: {
  438. lineStyle: {
  439. color: '#fff'
  440. }
  441. }
  442. },
  443. yAxis: {
  444. name: '',
  445. type: 'value',
  446. splitLine: {
  447. show: false
  448. },
  449. axisLine: {
  450. lineStyle: {
  451. color: '#fff'
  452. }
  453. }
  454. },
  455. series: [
  456. {
  457. name:'销售额',
  458. type:'line',
  459. data:[3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
  460. },
  461. {
  462. name:'订单数',
  463. type:'line',
  464. data:[3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
  465. }
  466. ]
  467. };
  468. myChart.setOption(option);
  469. }
  470. // echart_map中国地图
  471. function echart_map() {
  472. var myChart = echarts.init(document.getElementById('chart_map'));
  473. function showProvince() {
  474. var geoCoordMap = {
  475. '富川瑶族自治县': [111.1627,24.4913],'龙州县': [106.8545,22.3426],'南丹县': [107.5422,24.9753],
  476. '扶绥县': [107.9041,22.6349],'天峨县': [107.1737,24.9991],'大化瑶族自治县': [107.9981,23.7364],
  477. '乐业县': [106.5616,24.7858],'西林县': [105.0938,24.4895],'资源县': [110.6525,26.0424],
  478. '都安瑶族自治县': [108.1055,23.9312],'上林县': [108.6050,23.4320],'凌云县': [106.5615,24.3475],
  479. '东兰县': [107.3742,24.5107],'巴马瑶族自治县': [107.2596,24.1410],'田阳县': [106.9156,23.7356],
  480. '靖西市': [106.4176,23.1340],'大新县': [107.2012,22.8304],'三江侗族自治县': [109.6078,25.7831],
  481. '龙胜各族自治县': [110.0114,25.7980],'全州县': [111.0730,25.9286],'融安县': [109.3976,25.2246],
  482. '柳城县': [109.2446,24.6505],'忻城县': [108.6657,24.0661],'鹿寨县': [109.7517,24.4730],
  483. '宾阳县': [108.8103,23.2176],'兴业县': [109.8751,22.7363],'横县': [109.2614,22.6799],
  484. '灵山县': [109.2909,22.4165],'浦北县': [109.5569,22.2715],'东兴市': [107.9718,21.5479],
  485. '灌阳县': [111.1608,25.4893],'恭城瑶族自治县': [110.8283,24.8313],'荔浦县': [110.3981,24.4965],
  486. '昭平县': [110.8113,24.1694],'金秀瑶族自治县': [110.1894,24.1303],'桂平市': [110.0790,23.3941],
  487. '田东县': [107.1260,23.5972],'凤山县': [107.0422,24.5469],'环江毛南族自治县': [108.2583,24.8260],
  488. '马山县': [108.1770,23.7081],'罗城仫佬族自治县': [108.9046,24.7773],'德保县': [106.6155,23.3234],
  489. '融水苗族自治县': [109.2563,25.0662],'天等县': [107.1436,23.0813],'隆林县': [105.3438,24.7706],
  490. '那坡县': [105.8334,23.3871],'平果县': [107.5898,23.3293]
  491. };
  492. var data = [
  493. {
  494. name: '富川瑶族自治县',
  495. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  496. },{
  497. name: '龙州县',
  498. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  499. },{
  500. name: '南丹县',
  501. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  502. },
  503. {
  504. name: '扶绥县',
  505. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  506. },{
  507. name: '天峨县',
  508. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  509. },{
  510. name: '大化瑶族自治县',
  511. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  512. },{
  513. name: '乐业县',
  514. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  515. },{
  516. name: '西林县',
  517. value: [50,'电商进农村示范县:<br/>项目承建企业2家<br/>电商服务站目前数量94个站点<br/>广西乐村淘科技有限公司、广西国际电子商务中心<br/>主要推广的产品有西林沙糖桔、麻鸭、姜晶等地理标志保护产品']
  518. },{
  519. name: '资源县',
  520. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  521. },{
  522. name: '都安瑶族自治县',
  523. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  524. },{
  525. name: '上林县',
  526. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  527. },{
  528. name: '凌云县',
  529. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  530. },{
  531. name: '东兰县',
  532. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  533. },{
  534. name: '巴马瑶族自治县',
  535. value: [50,'项目承建企业1家<br/>电商服务站目前数量85个站点<br/>参加电商培训人数1500人<br/>特色粮经作物:包括蚕桑、火麻、龙骨花、中药材、红薯、马铃薯、小杂粮等。<br/>主要承建内容:县级服务中心建设、乡镇级服务站、村级服务点建设']
  536. },{
  537. name: '田阳县',
  538. value: [50,'项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  539. },{
  540. name: '靖西市',
  541. value: [50,'项目承建企业1家<br/>电商服务站目前数量60个站点<br/>参加电商培训人数1500人<br/>特色产品:靖西绣球、靖西壮锦、靖西东利大香儒<br/>主要承建内容:靖西各镇乡村服务站点建设']
  542. },{
  543. name: '大新县',
  544. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  545. },{
  546. name: '三江侗族自治县',
  547. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  548. },{
  549. name: '龙胜各族自治县',
  550. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  551. },{
  552. name: '全州县',
  553. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  554. },{
  555. name: '融安县',
  556. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  557. },{
  558. name: '柳城县',
  559. value: [50,'项目承建企业2家<br/>电商服务站目前数量125个站点<br/>参加电商培训人数5000人<br/>特色产品:新味嘉木瓜丝、寨隆壮方红糖<br/>主要承建内容:农村电子商务公共服务体系村级服务点建设。']
  560. },{
  561. name: '忻城县',
  562. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  563. },{
  564. name: '鹿寨县',
  565. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  566. },{
  567. name: '宾阳县',
  568. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  569. },{
  570. name: '兴业县',
  571. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  572. },{
  573. name: '横县',
  574. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  575. },{
  576. name: '灵山县',
  577. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  578. },{
  579. name: '浦北县',
  580. value: [50,'项目承建企业2家<br/>电商服务站目前数量161个站点<br/>参加电商培训人数8572人<br/>特色产品:浦北扁柑、浦北黑猪、官垌鱼、浦北黑叶荔<br/>主要承建内容:建设浦北县电子商务公共服务中心,<br/>县级公共服务中心与品牌推与展示区、创业孵化区、培训区集聚发展。']
  581. },{
  582. name: '东兴市',
  583. value: [50,'项目承建企业3家<br/>电商服务站目前数量34个站点<br/>特色产品:东兴红姑娘红薯、东兴黄皮果、京族二宝<br/>主要承建内容:建设东兴市电子商务进农村服务中心。<br/>含公共服务区、多平台运营服务区等。']
  584. },{
  585. name: '灌阳县',
  586. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  587. },{
  588. name: '恭城瑶族自治县',
  589. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  590. },{
  591. name: '荔浦县',
  592. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  593. },{
  594. name: '昭平县',
  595. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  596. },{
  597. name: '金秀瑶族自治县',
  598. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  599. },{
  600. name: '桂平市',
  601. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  602. },{
  603. name: '田东县',
  604. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  605. },{
  606. name: '凤山县',
  607. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  608. },{
  609. name: '环江毛南族自治县',
  610. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  611. },{
  612. name: '马山县',
  613. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  614. },{
  615. name: '罗城仫佬族自治县',
  616. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  617. },{
  618. name: '德保县',
  619. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  620. },{
  621. name: '融水苗族自治县',
  622. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  623. },{
  624. name: '天等县',
  625. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  626. },{
  627. name: '隆林县',
  628. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  629. },{
  630. name: '那坡县',
  631. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  632. },{
  633. name: '平果县',
  634. value: [50,'电商进农村示范县:<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
  635. }
  636. ];
  637. var max = 480,
  638. min = 9;
  639. var maxSize4Pin = 50,
  640. minSize4Pin = 20;
  641. var convertData = function (data) {
  642. var res = [];
  643. for (var i = 0; i < data.length; i++) {
  644. var geoCoord = geoCoordMap[data[i].name];
  645. if (geoCoord) {
  646. res.push({
  647. name: data[i].name,
  648. value: geoCoord.concat(data[i].value),
  649. });
  650. }
  651. }
  652. return res;
  653. };
  654. myChart.setOption(option = {
  655. tooltip: {
  656. trigger: 'item',
  657. formatter: function loadData(result){
  658. return result.name+'<br />' +result.value[3];
  659. }
  660. },
  661. geo: {
  662. zoom:1.2,
  663. show: true,
  664. map:'广西',
  665. mapType: '广西',
  666. label: {
  667. normal: {
  668. show : true,
  669. textStyle:{color:"#4bf316"}
  670. },
  671. emphasis: {
  672. show: true,
  673. textStyle: {
  674. color: '#fff'
  675. }
  676. },
  677. },
  678. roam: true,
  679. itemStyle: {
  680. normal: {
  681. borderColor: 'rgba(147, 235, 248, 1)',
  682. borderWidth: 2,
  683. areaColor: {
  684. type: 'radial',
  685. x: 0.5,
  686. y: 0.5,
  687. r: 0.8,
  688. colorStops: [{
  689. offset: 0,
  690. color: 'rgba(175,238,238, 0)' // 0% 处的颜色
  691. }, {
  692. offset: 1,
  693. color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
  694. }],
  695. globalCoord: false // 缺省为 false
  696. },
  697. shadowColor: 'rgba(128, 217, 248, 1)',
  698. shadowOffsetX: -2,
  699. shadowOffsetY: 2,
  700. shadowBlur: 10
  701. },
  702. emphasis: {
  703. areaColor: '#389BB7',
  704. borderWidth: 0
  705. }
  706. }
  707. },
  708. series: [
  709. {
  710. name: '电商进农村示范县',
  711. type: 'scatter',
  712. coordinateSystem: 'geo',
  713. symbol: 'pin',
  714. symbolSize: function(val) {
  715. var a = (maxSize4Pin - minSize4Pin) / (max - min);
  716. var b = minSize4Pin - a * min;
  717. b = maxSize4Pin - a * max;
  718. return a * val[2] + b;
  719. },
  720. label: {
  721. normal: {
  722. formatter: '{b}',
  723. show: true,
  724. textStyle: {
  725. color: '#fff',
  726. fontSize: 10,
  727. }
  728. }
  729. },
  730. itemStyle: {
  731. normal: {
  732. color: 'red', //标志颜色
  733. }
  734. },
  735. zlevel: 6,
  736. data: convertData(data),
  737. },
  738. {
  739. type: 'effectScatter',
  740. coordinateSystem: 'geo',
  741. data: convertData(data.sort(function (a, b) {
  742. return b.value - a.value;
  743. }).slice(0, 47)),
  744. symbolSize: function (val) {
  745. return val[2] / 10;
  746. },
  747. showEffectOn: 'render',
  748. rippleEffect: {
  749. brushType: 'stroke'
  750. },
  751. hoverAnimation: true,
  752. itemStyle: {
  753. normal: {
  754. color: '#05C3F9',
  755. shadowBlur: 10,
  756. shadowColor: '#05C3F9'
  757. }
  758. },
  759. zlevel: 1
  760. },
  761. ]
  762. });
  763. }
  764. showProvince();
  765. window.addEventListener("resize", function () {
  766. myChart.resize();
  767. });
  768. }
  769. //echart_3货物周转量
  770. function echart_3() {
  771. // 基于准备好的dom,初始化echarts实例
  772. var myChart = echarts.init(document.getElementById('chart_3'));
  773. myChart.clear();
  774. option = {
  775. title: {
  776. text: ''
  777. },
  778. tooltip: {
  779. trigger: 'axis'
  780. },
  781. legend: {
  782. data:['顺丰快递','邮政速递','百世快递','圆通速递','中通速递','申通快递','韵达快递'],
  783. textStyle:{
  784. color: '#fff'
  785. },
  786. top: '8%'
  787. },
  788. grid: {
  789. top: '40%',
  790. left: '3%',
  791. right: '4%',
  792. bottom: '3%',
  793. containLabel: true
  794. },
  795. color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
  796. xAxis: {
  797. type: 'category',
  798. boundaryGap: false,
  799. data: ['2018年9月','2018年10月','2018年11月','2018年12月','2019年1月'],
  800. splitLine: {
  801. show: false
  802. },
  803. axisLine: {
  804. lineStyle: {
  805. color: '#fff'
  806. }
  807. }
  808. },
  809. yAxis: {
  810. name: '单',
  811. type: 'value',
  812. splitLine: {
  813. show: false
  814. },
  815. axisLine: {
  816. lineStyle: {
  817. color: '#fff'
  818. }
  819. }
  820. },
  821. series: [
  822. {
  823. name:'顺丰快递',
  824. type:'line',
  825. data:[3961, 4233, 4183, 3633, 3704]
  826. },
  827. {
  828. name:'邮政速递',
  829. type:'line',
  830. data:[3374, 3364, 3274, 3371, 3259]
  831. },
  832. {
  833. name:'百世快递',
  834. type:'line',
  835. data:[14, 15, 13, 14, 15]
  836. },
  837. {
  838. name:'圆通速递',
  839. type:'line',
  840. data:[686,847,895,865,886]
  841. },
  842. {
  843. name:'中通速递',
  844. type:'line',
  845. data:[6133, 6577, 7019,6821,7294]
  846. },
  847. {
  848. name:'申通快递',
  849. type:'line',
  850. data:[509, 862, 1481,1552,1333]
  851. },
  852. {
  853. name:'韵达快递',
  854. type:'line',
  855. data:[509, 900, 1350,1487,1600]
  856. }
  857. ]
  858. };
  859. myChart.setOption(option);
  860. }
  861. //湖南省飞机场
  862. function echart_5() {
  863. // 基于准备好的dom,初始化echarts实例
  864. var myChart = echarts.init(document.getElementById('chart_5'));
  865. function showProvince() {
  866. var geoCoordMap = {
  867. '长沙黄花国际机场': [113.226512,28.192929],
  868. '张家界荷花机场': [110.454598,29.107223],
  869. '常德桃花源机场': [111.651508,28.921516],
  870. '永州零陵机场': [111.622869,26.340994],
  871. '怀化芷江机场': [109.714784,27.44615],
  872. };
  873. var data = [{
  874. name: '长沙黄花国际机场',
  875. value: 100
  876. },
  877. {
  878. name: '张家界荷花机场',
  879. value: 100
  880. },
  881. {
  882. name: '常德桃花源机场',
  883. value: 100
  884. },
  885. {
  886. name: '永州零陵机场',
  887. value: 100
  888. },
  889. {
  890. name: '怀化芷江机场',
  891. value: 100
  892. }
  893. ];
  894. var max = 480,
  895. min = 9; // todo
  896. var maxSize4Pin = 100,
  897. minSize4Pin = 20;
  898. var convertData = function (data) {
  899. var res = [];
  900. for (var i = 0; i < data.length; i++) {
  901. var geoCoord = geoCoordMap[data[i].name];
  902. if (geoCoord) {
  903. res.push({
  904. name: data[i].name,
  905. value: geoCoord.concat(data[i].value)
  906. });
  907. }
  908. }
  909. return res;
  910. };
  911. myChart.setOption(option = {
  912. title: {
  913. top: 20,
  914. text: '',
  915. subtext: '',
  916. x: 'center',
  917. textStyle: {
  918. color: '#ccc'
  919. }
  920. },
  921. legend: {
  922. orient: 'vertical',
  923. y: 'bottom',
  924. x: 'right',
  925. data: ['pm2.5'],
  926. textStyle: {
  927. color: '#fff'
  928. }
  929. },
  930. visualMap: {
  931. show: false,
  932. min: 0,
  933. max: 500,
  934. left: 'left',
  935. top: 'bottom',
  936. text: ['高', '低'], // 文本,默认为数值文本
  937. calculable: true,
  938. seriesIndex: [1],
  939. inRange: {
  940. }
  941. },
  942. geo: {
  943. show: true,
  944. map:'hunan',
  945. mapType: 'hunan',
  946. label: {
  947. normal: {
  948. },
  949. //鼠标移入后查看效果
  950. emphasis: {
  951. textStyle: {
  952. color: '#fff'
  953. }
  954. }
  955. },
  956. //鼠标缩放和平移
  957. roam: true,
  958. itemStyle: {
  959. normal: {
  960. // color: '#ddd',
  961. borderColor: 'rgba(147, 235, 248, 1)',
  962. borderWidth: 1,
  963. areaColor: {
  964. type: 'radial',
  965. x: 0.5,
  966. y: 0.5,
  967. r: 0.8,
  968. colorStops: [{
  969. offset: 0,
  970. color: 'rgba(175,238,238, 0)' // 0% 处的颜色
  971. }, {
  972. offset: 1,
  973. color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
  974. }],
  975. globalCoord: false // 缺省为 false
  976. },
  977. shadowColor: 'rgba(128, 217, 248, 1)',
  978. shadowOffsetX: -2,
  979. shadowOffsetY: 2,
  980. shadowBlur: 10
  981. },
  982. emphasis: {
  983. areaColor: '#389BB7',
  984. borderWidth: 0
  985. }
  986. }
  987. },
  988. series: [{
  989. name: 'light',
  990. type: 'map',
  991. coordinateSystem: 'geo',
  992. data: convertData(data),
  993. itemStyle: {
  994. normal: {
  995. color: '#F4E925'
  996. }
  997. }
  998. },
  999. {
  1000. name: '点',
  1001. type: 'scatter',
  1002. coordinateSystem: 'geo',
  1003. symbol: 'pin',
  1004. symbolSize: function(val) {
  1005. var a = (maxSize4Pin - minSize4Pin) / (max - min);
  1006. var b = minSize4Pin - a * min;
  1007. b = maxSize4Pin - a * max;
  1008. return a * val[2] + b;
  1009. },
  1010. label: {
  1011. normal: {
  1012. // show: true,
  1013. // textStyle: {
  1014. // color: '#fff',
  1015. // fontSize: 9,
  1016. // }
  1017. }
  1018. },
  1019. itemStyle: {
  1020. normal: {
  1021. color: '#F62157', //标志颜色
  1022. }
  1023. },
  1024. zlevel: 6,
  1025. data: convertData(data),
  1026. },
  1027. {
  1028. name: 'light',
  1029. type: 'map',
  1030. mapType: 'hunan',
  1031. geoIndex: 0,
  1032. aspectScale: 0.75, //长宽比
  1033. showLegendSymbol: false, // 存在legend时显示
  1034. label: {
  1035. normal: {
  1036. show: false
  1037. },
  1038. emphasis: {
  1039. show: false,
  1040. textStyle: {
  1041. color: '#fff'
  1042. }
  1043. }
  1044. },
  1045. roam: true,
  1046. itemStyle: {
  1047. normal: {
  1048. areaColor: '#031525',
  1049. borderColor: '#FFFFFF',
  1050. },
  1051. emphasis: {
  1052. areaColor: '#2B91B7'
  1053. }
  1054. },
  1055. animation: false,
  1056. data: data
  1057. },
  1058. {
  1059. name: ' ',
  1060. type: 'effectScatter',
  1061. coordinateSystem: 'geo',
  1062. data: convertData(data.sort(function (a, b) {
  1063. return b.value - a.value;
  1064. }).slice(0, 5)),
  1065. symbolSize: function (val) {
  1066. return val[2] / 10;
  1067. },
  1068. showEffectOn: 'render',
  1069. rippleEffect: {
  1070. brushType: 'stroke'
  1071. },
  1072. hoverAnimation: true,
  1073. label: {
  1074. normal: {
  1075. formatter: '{b}',
  1076. position: 'right',
  1077. show: true
  1078. }
  1079. },
  1080. itemStyle: {
  1081. normal: {
  1082. color: '#05C3F9',
  1083. shadowBlur: 10,
  1084. shadowColor: '#05C3F9'
  1085. }
  1086. },
  1087. zlevel: 1
  1088. },
  1089. ]
  1090. });
  1091. }
  1092. showProvince();
  1093. // 使用刚指定的配置项和数据显示图表。
  1094. // myChart.setOption(option);
  1095. window.addEventListener("resize", function () {
  1096. myChart.resize();
  1097. });
  1098. }
  1099. //点击跳转
  1100. // $('#chart_map').click(function(){
  1101. // window.location.href = './page/index.html';
  1102. // });
  1103. // $('.t_btn2').click(function(){
  1104. // window.location.href = "./page/index.html?id=2";
  1105. // });
  1106. // $('.t_btn3').click(function(){
  1107. // window.location.href = "./page/index.html?id=3";
  1108. // });
  1109. // $('.t_btn4').click(function(){
  1110. // window.location.href = "./page/index.html?id=4";
  1111. // });
  1112. // $('.t_btn5').click(function(){
  1113. // window.location.href = "./page/index.html?id=5";
  1114. // });
  1115. // $('.t_btn6').click(function(){
  1116. // window.location.href = "./page/index.html?id=6";
  1117. // });
  1118. // $('.t_btn7').click(function(){
  1119. // window.location.href = "./page/index.html?id=7";
  1120. // });
  1121. // $('.t_btn8').click(function(){
  1122. // window.location.href = "./page/index.html?id=8";
  1123. // });
  1124. // $('.t_btn9').click(function(){
  1125. // window.location.href = "./page/index.html?id=9";
  1126. // });
  1127. });