survey.js 98 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537
  1. $(function () {
  2. ceshis1();
  3. ceshis2();
  4. ceshis3();
  5. ceshis4();
  6. /*ceshis5();*/
  7. ceshis6();
  8. ceshis();
  9. function ceshis() {
  10. var myChart = echarts.init(document.getElementById('shuiipin'));
  11. var img = 'data:image/png;base64,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';
  12. var trafficWay = [{
  13. name: '18-27',
  14. value: 40
  15. },{
  16. name: '45-60',
  17. value: 10
  18. },{
  19. name: '35-45',
  20. value: 30
  21. },{
  22. name: '27-35',
  23. value: 40
  24. }];
  25. var data = [];
  26. var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
  27. for (var i = 0; i < trafficWay.length; i++) {
  28. data.push({
  29. value: trafficWay[i].value,
  30. name: trafficWay[i].name,
  31. itemStyle: {
  32. normal: {
  33. borderWidth: 5,
  34. shadowBlur: 20,
  35. borderColor:color[i],
  36. shadowColor: color[i]
  37. }
  38. }
  39. }, {
  40. value: 2,
  41. name: '',
  42. itemStyle: {
  43. normal: {
  44. label: {
  45. show: false
  46. },
  47. labelLine: {
  48. show: false
  49. },
  50. color: 'rgba(0, 0, 0, 0)',
  51. borderColor: 'rgba(0, 0, 0, 0)',
  52. borderWidth: 0
  53. }
  54. }
  55. });
  56. }
  57. var seriesOption = [{
  58. name: '',
  59. type: 'pie',
  60. clockWise: false,
  61. radius: [45, 45],
  62. /*hoverAnimation: false,*/
  63. itemStyle: {
  64. normal: {
  65. label: {
  66. show: true,
  67. position: 'outside',
  68. color: '#ddd',
  69. formatter: function(params) {
  70. var percent = 0;
  71. var total = 0;
  72. for (var i = 0; i < trafficWay.length; i++) {
  73. total += trafficWay[i].value;
  74. }
  75. percent = ((params.value / total) * 100).toFixed(0);
  76. if(params.name !== '') {
  77. return '年龄段:' + params.name + '\n' + '\n' + '占百分比:' + percent + '%';
  78. }else {
  79. return '';
  80. }
  81. },
  82. },
  83. labelLine: {
  84. length:30,
  85. length2:40,
  86. show: true,
  87. color:'#00ffff'
  88. }
  89. }
  90. },
  91. data: data
  92. }];
  93. option = {
  94. /*backgroundColor: '#0A2E5D',*/
  95. color : color,
  96. title: {
  97. text: '年龄段',
  98. top: '5%',
  99. textAlign: "center",
  100. left: "49%",
  101. textStyle: {
  102. color: '#fff',
  103. fontSize: 22,
  104. fontWeight: '400'
  105. }
  106. },
  107. graphic: {
  108. elements: [{
  109. type: "image",
  110. z: 3,
  111. style: {
  112. image: img,
  113. width: 140,
  114. height: 140
  115. },
  116. left: 'center',
  117. top: 'center',
  118. position: [20, 20]
  119. }]
  120. },
  121. tooltip: {
  122. show: false
  123. },
  124. legend: {
  125. icon: "circle",
  126. orient: 'horizontal',
  127. // x: 'left',
  128. data:['18-27','45-60','35-45','27-35'],
  129. right: 80,
  130. bottom: 1,
  131. align: 'right',
  132. textStyle: {
  133. color: "#fff"
  134. },
  135. itemGap: 20,
  136. padding: [5, 20],
  137. },
  138. toolbox: {
  139. show: false
  140. },
  141. series: seriesOption
  142. };
  143. // 使用刚指定的配置项和数据显示图表。
  144. myChart.setOption(option);
  145. myChart.currentIndex = -1;
  146. setInterval(function () {
  147. var dataLen = option.series[0].data.length;
  148. // 取消之前高亮的图形
  149. myChart.dispatchAction({
  150. type: 'downplay',
  151. seriesIndex: 0,
  152. dataIndex: myChart.currentIndex
  153. });
  154. myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  155. // 高亮当前图形
  156. myChart.dispatchAction({
  157. type: 'highlight',
  158. seriesIndex: 0,
  159. dataIndex: myChart.currentIndex
  160. });
  161. }, 1000);
  162. window.addEventListener("resize",function(){
  163. myChart.resize();
  164. });
  165. }
  166. function ceshis1() {
  167. var myChart = echarts.init(document.getElementById('chart2'));
  168. var ydata = [{
  169. name: '天猫',
  170. value: 18
  171. },
  172. {
  173. name: '京东',
  174. value: 16
  175. },
  176. {
  177. name: '苏宁易购',
  178. value: 15
  179. },
  180. {
  181. name: '拼多多',
  182. value: 14
  183. },
  184. {
  185. name: '国美',
  186. value: 10
  187. },
  188. {
  189. name: '亚马逊',
  190. value: 7.9
  191. },
  192. {
  193. name: '唯品会',
  194. value: 6.7
  195. },
  196. {
  197. name: '其他',
  198. value: 6
  199. }
  200. ];
  201. var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"]
  202. var xdata =['天猫', "京东", "苏宁易购", "拼多多", '国美', '亚马逊', '唯品会', '唯品会'];
  203. option = {
  204. /*backgroundColor: "rgba(255,255,255,1)",*/
  205. color: color,
  206. legend: {
  207. orient: "vartical",
  208. x: "left",
  209. top: "center",
  210. left: "53%",
  211. bottom: "0%",
  212. data: xdata,
  213. itemWidth: 8,
  214. itemHeight: 8,
  215. textStyle: {
  216. color: '#fff'
  217. },
  218. /*itemGap: 16,*/
  219. /*formatter:function(name){
  220. var oa = option.series[0].data;
  221. var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
  222. for(var i = 0; i < option.series[0].data.length; i++){
  223. if(name==oa[i].name){
  224. return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%';
  225. }
  226. }
  227. }*/
  228. formatter: function(name) {
  229. return '' + name
  230. }
  231. },
  232. series: [{
  233. type: 'pie',
  234. clockwise: false, //饼图的扇区是否是顺时针排布
  235. minAngle: 2, //最小的扇区角度(0 ~ 360)
  236. radius: ["20%", "60%"],
  237. center: ["30%", "45%"],
  238. avoidLabelOverlap: false,
  239. itemStyle: { //图形样式
  240. normal: {
  241. borderColor: '#ffffff',
  242. borderWidth: 1,
  243. },
  244. },
  245. label: {
  246. normal: {
  247. show: false,
  248. position: 'center',
  249. formatter: '{text|{b}}\n{c} ({d}%)',
  250. rich: {
  251. text: {
  252. color: "#fff",
  253. fontSize: 14,
  254. align: 'center',
  255. verticalAlign: 'middle',
  256. padding: 8
  257. },
  258. value: {
  259. color: "#8693F3",
  260. fontSize: 24,
  261. align: 'center',
  262. verticalAlign: 'middle',
  263. },
  264. }
  265. },
  266. emphasis: {
  267. show: true,
  268. textStyle: {
  269. fontSize: 24,
  270. }
  271. }
  272. },
  273. data: ydata
  274. }]
  275. };
  276. myChart.setOption(option);
  277. setTimeout(function() {
  278. myChart.on('mouseover', function(params) {
  279. if (params.name == ydata[0].name) {
  280. myChart.dispatchAction({
  281. type: 'highlight',
  282. seriesIndex: 0,
  283. dataIndex: 0
  284. });
  285. } else {
  286. myChart.dispatchAction({
  287. type: 'downplay',
  288. seriesIndex: 0,
  289. dataIndex: 0
  290. });
  291. }
  292. });
  293. myChart.on('mouseout', function(params) {
  294. myChart.dispatchAction({
  295. type: 'highlight',
  296. seriesIndex: 0,
  297. dataIndex: 0
  298. });
  299. });
  300. myChart.dispatchAction({
  301. type: 'highlight',
  302. seriesIndex: 0,
  303. dataIndex: 0
  304. });
  305. }, 1000);
  306. myChart.currentIndex = -1;
  307. setInterval(function () {
  308. var dataLen = option.series[0].data.length;
  309. // 取消之前高亮的图形
  310. myChart.dispatchAction({
  311. type: 'downplay',
  312. seriesIndex: 0,
  313. dataIndex: myChart.currentIndex
  314. });
  315. myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  316. // 高亮当前图形
  317. myChart.dispatchAction({
  318. type: 'highlight',
  319. seriesIndex: 0,
  320. dataIndex: myChart.currentIndex
  321. });
  322. }, 1000);
  323. // 使用刚指定的配置项和数据显示图表。
  324. /*myChart.setOption(option);*/
  325. window.addEventListener("resize",function(){
  326. myChart.resize();
  327. });
  328. }
  329. function ceshis2() {
  330. var myChart = echarts.init(document.getElementById('chart3'));
  331. option = {
  332. /*backgroundColor: '#000',*/
  333. "animation": true,
  334. "title": {
  335. /*"text": 24,*/
  336. /* "subtext": "沥青工",*/
  337. "x": "center",
  338. "y": "center",
  339. "textStyle": {
  340. "color": "#fff",
  341. "fontSize": 10,
  342. "fontWeight": "normal",
  343. "align": "center",
  344. "width": "200px"
  345. },
  346. "subtextStyle": {
  347. "color": "#fff",
  348. "fontSize": 12,
  349. "fontWeight": "normal",
  350. "align": "center"
  351. }
  352. },
  353. "legend": {
  354. "width": "100%",
  355. "left": "center",
  356. "textStyle": {
  357. "color": "#fff",
  358. "fontSize": 12
  359. },
  360. "icon": "circle",
  361. "right": "0",
  362. "bottom": "0",
  363. "padding": [15, 20],
  364. "itemGap": 5,
  365. "data": ["化妆品", "手机", "电脑", "羽绒服", "扫地机", "电视", "洗发露", "其它"]
  366. },
  367. "series": [{
  368. "type": "pie",
  369. "center": ["50%", "40%"],
  370. "radius": ["20%", "43%"],
  371. "color": ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"],
  372. "startAngle": 135,
  373. "labelLine": {
  374. "normal": {
  375. "length": 15
  376. }
  377. },
  378. "label": {
  379. "normal": {
  380. "formatter": "{b|{b}:} {per|{d}%} ",
  381. "backgroundColor": "rgba(255, 147, 38, 0)",
  382. "borderColor": "transparent",
  383. "borderRadius": 4,
  384. "rich": {
  385. "a": {
  386. "color": "#999",
  387. "lineHeight": 12,
  388. "align": "center"
  389. },
  390. "hr": {
  391. "borderColor": "#aaa",
  392. "width": "100%",
  393. "borderWidth": 1,
  394. "height": 0
  395. },
  396. "b": {
  397. "color": "#b3e5ff",
  398. "fontSize": 16,
  399. "lineHeight": 33
  400. },
  401. "c": {
  402. "fontSize": 14,
  403. "color": "#eee"
  404. },
  405. "per": {
  406. "color": "#FDF44E",
  407. "fontSize": 14,
  408. "padding": [5, 8],
  409. "borderRadius": 2
  410. }
  411. },
  412. "textStyle": {
  413. "color": "#fff",
  414. "fontSize": 16
  415. }
  416. }
  417. },
  418. "emphasis": {
  419. "label": {
  420. "show": true,
  421. "formatter": "{b|{b}:} {per|{d}%} ",
  422. "backgroundColor": "rgba(255, 147, 38, 0)",
  423. "borderColor": "transparent",
  424. "borderRadius": 4,
  425. "rich": {
  426. "a": {
  427. "color": "#999",
  428. "lineHeight": 22,
  429. "align": "center"
  430. },
  431. "hr": {
  432. "borderColor": "#aaa",
  433. "width": "100%",
  434. "borderWidth": 1,
  435. "height": 0
  436. },
  437. "b": {
  438. "color": "#fff",
  439. "fontSize": 14,
  440. "lineHeight": 33
  441. },
  442. "c": {
  443. "fontSize": 14,
  444. "color": "#eee"
  445. },
  446. "per": {
  447. "color": "#FDF44E",
  448. "fontSize": 14,
  449. "padding": [5, 6],
  450. "borderRadius": 2
  451. }
  452. }
  453. }
  454. },
  455. "data": [{
  456. "name": "化妆品",
  457. "value": 3
  458. }, {
  459. "name": "手机",
  460. "value": 2
  461. }, {
  462. "name": "电脑",
  463. "value": 26
  464. }, {
  465. "name": "羽绒服",
  466. "value": 24
  467. }, {
  468. "name": "扫地机",
  469. "value": 12
  470. }, {
  471. "name": "电视",
  472. "value": 11
  473. }, {
  474. "name": "洗发露",
  475. "value": 3
  476. }, {
  477. "name": "其它",
  478. "value": 2
  479. }]
  480. }, {
  481. "type": "pie",
  482. "center": ["50%", "40%"],
  483. "radius": ["15%", "14%"],
  484. "label": {
  485. "show": false
  486. },
  487. "data": [{
  488. "value": 78,
  489. "name": "实例1",
  490. "itemStyle": {
  491. "normal": {
  492. "color": {
  493. "x": 0,
  494. "y": 0,
  495. "x2": 1,
  496. "y2": 0,
  497. "type": "linear",
  498. "global": false,
  499. "colorStops": [{
  500. "offset": 0,
  501. "color": "#9F17FF"
  502. }, {
  503. "offset": 0.2,
  504. "color": "#01A4F7"
  505. }, {
  506. "offset": 0.5,
  507. "color": "#FE2C8A"
  508. }, {
  509. "offset": 0.8,
  510. "color": "#FEE449"
  511. }, {
  512. "offset": 1,
  513. "color": "#00FFA8"
  514. }]
  515. }
  516. }
  517. }
  518. }]
  519. }]
  520. }
  521. // 使用刚指定的配置项和数据显示图表。
  522. myChart.setOption(option);
  523. myChart.currentIndex = -1;
  524. //myChart.setOption(option);
  525. //console.log(option.series[0].data[0]);
  526. setInterval(function () {
  527. var dataLen = option.series[0].data.length;
  528. // 取消之前高亮的图形
  529. myChart.dispatchAction({
  530. type: 'downplay',
  531. seriesIndex: 0,
  532. dataIndex: myChart.currentIndex
  533. });
  534. myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  535. // 高亮当前图形
  536. myChart.dispatchAction({
  537. type: 'highlight',
  538. seriesIndex: 0,
  539. dataIndex: myChart.currentIndex
  540. });
  541. }, 1000);
  542. window.addEventListener("resize",function(){
  543. myChart.resize();
  544. });
  545. }
  546. function ceshis3() {
  547. var myChart = echarts.init(document.getElementById('chart4'));
  548. var option = {
  549. tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#fff'}}},
  550. legend: {
  551. icon: 'rect',
  552. itemWidth: 14,itemHeight: 5,itemGap:10,
  553. data: ['受理时长', '排队时长', '订单量','客流量'],
  554. right: '10px',top: '0px',
  555. textStyle: {fontSize: 12,color: '#fff'}
  556. },
  557. grid: {x:40,y:50,x2:45,y2:40},
  558. xAxis: [{
  559. type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {textStyle: {color:'#fff'}},
  560. data:[
  561. "12月\n01号",
  562. "12月\n02号",
  563. "12月\n03号",
  564. "12月\n04号",
  565. "12月\n05号",
  566. "12月\n06号",
  567. "12月\n07号",
  568. "12月\n08号",
  569. "12月\n09号",
  570. "12月\n10号",
  571. "12月\n11号",
  572. "12月\n12号",
  573. "12月\n13号",
  574. "12月\n14号",
  575. "12月\n15号",
  576. "12月\n16号",
  577. "12月\n17号",
  578. "12月\n18号",
  579. "12月\n19号",
  580. "12月\n20号",
  581. "12月\n21号",
  582. "12月\n22号",
  583. "12月\n23号",
  584. "12月\n24号",
  585. "12月\n25号",
  586. "12月\n26号",
  587. "12月\n27号",
  588. "12月\n28号",
  589. "12月\n29号",
  590. "12月\n30号"
  591. ]
  592. }],
  593. yAxis: [{
  594. type: 'value',
  595. axisTick: {
  596. show: false
  597. },
  598. axisLine: {lineStyle: {color: '#57617B'}},
  599. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},
  600. splitLine: {lineStyle: {color: '#57617B'}}
  601. },{
  602. type: 'value',
  603. axisTick: {
  604. show: false
  605. },
  606. axisLine: {lineStyle: {color: '#57617B'}},
  607. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}个'},
  608. splitLine: {show: false,lineStyle: {color: '#57617B'}}
  609. }],
  610. series: [{
  611. name: '受理时长',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  612. yAxisIndex:0,
  613. areaStyle: {
  614. normal: {
  615. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  616. offset: 0,
  617. color: 'rgba(185,150,248,0.3)'
  618. }, {
  619. offset: 0.8,
  620. color: 'rgba(185,150,248,0)'
  621. }], false),
  622. shadowColor: 'rgba(0, 0, 0, 0.1)',
  623. shadowBlur: 10
  624. }
  625. },
  626. itemStyle: {normal: { color: '#B996F8'}},
  627. data: [
  628. "7.35",
  629. "7.31",
  630. "7.75",
  631. "7.45",
  632. "7.01",
  633. "6.46",
  634. "8.01",
  635. "6.18",
  636. "5.23",
  637. "7.08",
  638. "0.00",
  639. "0.00",
  640. "0.00",
  641. "0.00",
  642. "0.00",
  643. "7.29",
  644. "6.61",
  645. "6.79",
  646. "6.54",
  647. "6.87",
  648. "6.45",
  649. "6.10",
  650. "6.93",
  651. "6.85",
  652. "5.87",
  653. "8.98",
  654. "6.26",
  655. "6.95",
  656. "7.36",
  657. "0.00"
  658. ],
  659. }, {
  660. name: '排队时长',type: 'line',smooth: true,lineStyle: { normal: {width: 2}},
  661. yAxisIndex:0,
  662. areaStyle: {
  663. normal: {
  664. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  665. offset: 0,
  666. color: 'rgba(3, 194, 236, 0.3)'
  667. }, {
  668. offset: 0.8,
  669. color: 'rgba(3, 194, 236, 0)'
  670. }], false),
  671. shadowColor: 'rgba(0, 0, 0, 0.1)',
  672. shadowBlur: 10
  673. }
  674. },
  675. itemStyle: {normal: {color: '#03C2EC'}},
  676. data: [
  677. "2.00",
  678. "1.50",
  679. "2.98",
  680. "2.01",
  681. "1.39",
  682. "2.09",
  683. "5.99",
  684. "3.02",
  685. "2.51",
  686. "4.61",
  687. "2.44",
  688. "1.51",
  689. "3.88",
  690. "7.67",
  691. "0.25",
  692. "5.70",
  693. "1.76",
  694. "3.78",
  695. "4.10",
  696. "6.02",
  697. "3.93",
  698. "1.93",
  699. "5.10",
  700. "3.89",
  701. "2.78",
  702. "5.30",
  703. "6.67",
  704. "5.65",
  705. "12.59",
  706. "0"
  707. ]
  708. }, {
  709. name: '订单量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  710. yAxisIndex:1,
  711. areaStyle: {
  712. normal: {
  713. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  714. offset: 0,
  715. color: 'rgba(218, 57, 20, 0.3)'
  716. }, {
  717. offset: 0.8,
  718. color: 'rgba(218, 57, 20, 0)'
  719. }], false),
  720. shadowColor: 'rgba(0, 0, 0, 0.1)',
  721. shadowBlur: 10
  722. }
  723. },
  724. itemStyle: {normal: {color: '#DA3914'}},
  725. data:[
  726. "251",
  727. "189",
  728. "212",
  729. "222",
  730. "207",
  731. "150",
  732. "181",
  733. "202",
  734. "183",
  735. "193",
  736. "0",
  737. "0",
  738. "0",
  739. "0",
  740. "0",
  741. "198",
  742. "202",
  743. "205",
  744. "242",
  745. "216",
  746. "176",
  747. "126",
  748. "254",
  749. "207",
  750. "211",
  751. "191",
  752. "224",
  753. "213",
  754. "297",
  755. "0"
  756. ]
  757. },{
  758. name: '客流量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  759. yAxisIndex:1,
  760. areaStyle: {
  761. normal: {
  762. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  763. offset: 0,
  764. color: 'rgba(232, 190, 49, 0.3)'
  765. }, {
  766. offset: 0.8,
  767. color: 'rgba(232, 190, 49, 0)'
  768. }], false),
  769. shadowColor: 'rgba(0, 0, 0, 0.1)',
  770. shadowBlur: 10
  771. }
  772. },
  773. itemStyle: {normal: {color: '#E8BE31'}},
  774. data: [
  775. "228",
  776. "176",
  777. "206",
  778. "203",
  779. "186",
  780. "137",
  781. "162",
  782. "177",
  783. "164",
  784. "169",
  785. "0",
  786. "0",
  787. "0",
  788. "0",
  789. "0",
  790. "175",
  791. "185",
  792. "179",
  793. "224",
  794. "191",
  795. "161",
  796. "115",
  797. "229",
  798. "190",
  799. "172",
  800. "164",
  801. "201",
  802. "192",
  803. "273",
  804. "0"
  805. ]
  806. }]
  807. };
  808. /*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
  809. myChart.clear();
  810. if(data.handleTimeData.length>0){
  811. myChart.setOption(option);
  812. }else{
  813. noDataTip($("#channel_handle_detail"));
  814. }*/
  815. // 使用刚指定的配置项和数据显示图表。
  816. myChart.setOption(option);
  817. window.addEventListener("resize",function(){
  818. myChart.resize();
  819. });
  820. }
  821. function ceshis4() {
  822. var myChart = echarts.init(document.getElementById('chart5'));
  823. var labelimg = "";
  824. option = {
  825. /*backgroundColor: "#0E233E",*/
  826. "grid": {
  827. "left": "6%",
  828. "top": "10%",
  829. "right": "3%",
  830. "bottom": "15%"
  831. },
  832. "legend": {
  833. "data": [
  834. "日本",
  835. "韩国",
  836. "美国",
  837. "澳大利亚",
  838. "俄罗斯",
  839. "法国",
  840. "英国"
  841. ],
  842. "top": "92%",
  843. "icon": "circle",
  844. "textStyle": {
  845. "color": "#0DCAD2"
  846. }
  847. },
  848. "color": [
  849. "#534EE1",
  850. "#ECD64F",
  851. "#00E4F0",
  852. "#44D16D",
  853. "#124E91",
  854. "#BDC414",
  855. "#C8CCA5"
  856. ],
  857. "tooltip": {
  858. "position": "top",
  859. },
  860. "xAxis": {
  861. "type": "category",
  862. "data": [
  863. "日本",
  864. "韩国",
  865. "美国",
  866. "澳大利亚",
  867. "俄罗斯",
  868. "法国",
  869. "英国"
  870. ],
  871. "axisLabel": {
  872. "show": false,
  873. "color": "#999999",
  874. "fontSize": 16
  875. },
  876. "axisTick": {
  877. "show": false
  878. },
  879. "axisLine": {
  880. "show": false
  881. },
  882. "splitLine": {
  883. "show": false
  884. }
  885. },
  886. "yAxis": {
  887. "type": "value",
  888. "axisLabel": {
  889. "show": false,
  890. "color": "#999999",
  891. "fontSize": 16
  892. },
  893. "axisTick": {
  894. "show": false
  895. },
  896. "axisLine": {
  897. "show": false
  898. },
  899. "splitLine": {
  900. "show": false
  901. }
  902. },
  903. "series": [{
  904. "name": "信息",
  905. "data": [
  906. 0,
  907. 0,
  908. 0,
  909. 0,
  910. 0,
  911. 0,
  912. 0
  913. ],
  914. "stack": "a",
  915. "type": "bar"
  916. },
  917. {
  918. "name": "往下场所",
  919. "data": [
  920. 0,
  921. 0,
  922. 0,
  923. 0,
  924. 0,
  925. 0,
  926. 0
  927. ],
  928. "stack": "a",
  929. "type": "bar"
  930. },
  931. {
  932. "name": "关系",
  933. "data": [
  934. 0,
  935. 0,
  936. 0,
  937. 0,
  938. 0,
  939. 0,
  940. 0
  941. ],
  942. "stack": "a",
  943. "type": "bar"
  944. },
  945. {
  946. "name": "关联",
  947. "data": [
  948. 0,
  949. 0,
  950. 0,
  951. 0,
  952. 0,
  953. 0,
  954. 0
  955. ],
  956. "stack": "a",
  957. "type": "bar"
  958. },
  959. {
  960. "name": "人",
  961. "data": [
  962. 0,
  963. 0,
  964. 0,
  965. 0,
  966. 0,
  967. 0,
  968. 0
  969. ],
  970. "stack": "a",
  971. "type": "bar"
  972. },
  973. {
  974. "name": "物",
  975. "data": [
  976. 0,
  977. 0,
  978. 0,
  979. 0,
  980. 0,
  981. 0,
  982. 0
  983. ],
  984. "stack": "a",
  985. "type": "bar"
  986. },
  987. {
  988. "name": "组织",
  989. "data": [
  990. 0,
  991. 0,
  992. 0,
  993. 0,
  994. 0,
  995. 0,
  996. 0
  997. ],
  998. "stack": "a",
  999. "type": "bar"
  1000. },
  1001. {
  1002. "type": "pictorialBar",
  1003. "name": "提示框值",
  1004. "data": [{
  1005. "name": "",
  1006. "value": 868,
  1007. "label": {
  1008. "show": true,
  1009. "position": "top",
  1010. formatter: function(params) {
  1011. var index = params.dataIndex;
  1012. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1013. return str;
  1014. },
  1015. "rich": {
  1016. "a": {
  1017. "fontSize": 18,
  1018. "color": "#534EE1",
  1019. "align": "center",
  1020. "height": 40
  1021. },
  1022. "c": {
  1023. "fontSize": 18,
  1024. "color": "#fff",
  1025. "padding": [
  1026. -2,
  1027. 0,
  1028. 2,
  1029. 0
  1030. ],
  1031. "backgroundColor": {
  1032. "image": labelimg
  1033. },
  1034. "align": "center",
  1035. "verticalAlign": "bottom",
  1036. "height": 50,
  1037. "lineHeight": 40,
  1038. "width": 100
  1039. }
  1040. }
  1041. },
  1042. "itemStyle": {
  1043. "normal": {
  1044. "color": {
  1045. "type": "linear",
  1046. "x": 0,
  1047. "y": 0,
  1048. "x2": 0,
  1049. "y2": 1,
  1050. "colorStops": [{
  1051. "offset": 0,
  1052. "color": "rgba(83,78,225,1)"
  1053. },
  1054. {
  1055. "offset": 1,
  1056. "color": "rgba(83,78,225,0)"
  1057. }
  1058. ],
  1059. "global": false
  1060. }
  1061. }
  1062. }
  1063. },
  1064. {
  1065. "name": "",
  1066. "value": 306,
  1067. "label": {
  1068. "show": true,
  1069. "position": "top",
  1070. formatter: function(params) {
  1071. var index = params.dataIndex;
  1072. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1073. return str;
  1074. },
  1075. "rich": {
  1076. "a": {
  1077. "fontSize": 18,
  1078. "color": "#ECD64F",
  1079. "align": "center",
  1080. "height": 40
  1081. },
  1082. "c": {
  1083. "fontSize": 18,
  1084. "color": "#fff",
  1085. "padding": [
  1086. -4,
  1087. 0,
  1088. 8,
  1089. 0
  1090. ],
  1091. "backgroundColor": {
  1092. "image": labelimg
  1093. },
  1094. "align": "center",
  1095. "verticalAlign": "bottom",
  1096. "height": 45,
  1097. "lineHeight": 40,
  1098. "width": 100
  1099. }
  1100. }
  1101. },
  1102. "itemStyle": {
  1103. "normal": {
  1104. "color": {
  1105. "type": "linear",
  1106. "x": 0,
  1107. "y": 0,
  1108. "x2": 0,
  1109. "y2": 1,
  1110. "colorStops": [{
  1111. "offset": 0,
  1112. "color": "rgba(236,214,79,1)"
  1113. },
  1114. {
  1115. "offset": 1,
  1116. "color": "rgba(236,214,79,0)"
  1117. }
  1118. ],
  1119. "global": false
  1120. }
  1121. }
  1122. }
  1123. },
  1124. {
  1125. "name": "",
  1126. "value": 162,
  1127. "label": {
  1128. "show": true,
  1129. "position": "top",
  1130. formatter: function(params) {
  1131. var index = params.dataIndex;
  1132. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1133. return str;
  1134. },
  1135. "rich": {
  1136. "a": {
  1137. "fontSize": 18,
  1138. "color": "#00E4F0",
  1139. "align": "center",
  1140. "height": 40
  1141. },
  1142. "c": {
  1143. "fontSize": 18,
  1144. "color": "#fff",
  1145. "padding": [
  1146. -4,
  1147. 0,
  1148. 8,
  1149. 0
  1150. ],
  1151. "backgroundColor": {
  1152. "image": labelimg
  1153. },
  1154. "align": "center",
  1155. "verticalAlign": "bottom",
  1156. "height": 45,
  1157. "lineHeight": 40,
  1158. "width": 100
  1159. }
  1160. }
  1161. },
  1162. "itemStyle": {
  1163. "normal": {
  1164. "color": {
  1165. "type": "linear",
  1166. "x": 0,
  1167. "y": 0,
  1168. "x2": 0,
  1169. "y2": 1,
  1170. "colorStops": [{
  1171. "offset": 0,
  1172. "color": "rgba(0,228,240,1)"
  1173. },
  1174. {
  1175. "offset": 1,
  1176. "color": "rgba(0,228,240,0)"
  1177. }
  1178. ],
  1179. "global": false
  1180. }
  1181. }
  1182. }
  1183. },
  1184. {
  1185. "name": "",
  1186. "value": 362,
  1187. "label": {
  1188. "show": true,
  1189. formatter: function(params) {
  1190. var index = params.dataIndex;
  1191. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1192. return str;
  1193. },
  1194. "position": "top",
  1195. "rich": {
  1196. "a": {
  1197. "fontSize": 18,
  1198. "color": "#44D16D",
  1199. "align": "center",
  1200. "height": 40
  1201. },
  1202. "c": {
  1203. "fontSize": 18,
  1204. "color": "#fff",
  1205. "padding": [
  1206. -4,
  1207. 0,
  1208. 8,
  1209. 0
  1210. ],
  1211. "backgroundColor": {
  1212. "image": labelimg
  1213. },
  1214. "align": "center",
  1215. "verticalAlign": "bottom",
  1216. "height": 45,
  1217. "lineHeight": 40,
  1218. "width": 100
  1219. }
  1220. }
  1221. },
  1222. "itemStyle": {
  1223. "normal": {
  1224. "color": {
  1225. "type": "linear",
  1226. "x": 0,
  1227. "y": 0,
  1228. "x2": 0,
  1229. "y2": 1,
  1230. "colorStops": [{
  1231. "offset": 0,
  1232. "color": "rgba(68,209,109,1)"
  1233. },
  1234. {
  1235. "offset": 1,
  1236. "color": "rgba(68,209,109,0)"
  1237. }
  1238. ],
  1239. "global": false
  1240. }
  1241. }
  1242. }
  1243. },
  1244. {
  1245. "name": "",
  1246. "value": 460,
  1247. "label": {
  1248. "show": true,
  1249. "position": "top",
  1250. formatter: function(params) {
  1251. var index = params.dataIndex;
  1252. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1253. return str;
  1254. },
  1255. "rich": {
  1256. "a": {
  1257. "fontSize": 18,
  1258. "color": "#124E91",
  1259. "align": "center",
  1260. "height": 30
  1261. },
  1262. "c": {
  1263. "fontSize": 18,
  1264. "color": "#fff",
  1265. "padding": [
  1266. -4,
  1267. 0,
  1268. 8,
  1269. 0
  1270. ],
  1271. "backgroundColor": {
  1272. "image": labelimg
  1273. },
  1274. "align": "center",
  1275. "verticalAlign": "bottom",
  1276. "height": 45,
  1277. "lineHeight": 40,
  1278. "width": 100
  1279. }
  1280. }
  1281. },
  1282. "itemStyle": {
  1283. "normal": {
  1284. "color": {
  1285. "type": "linear",
  1286. "x": 0,
  1287. "y": 0,
  1288. "x2": 0,
  1289. "y2": 1,
  1290. "colorStops": [{
  1291. "offset": 0,
  1292. "color": "rgba(18,78,145,1)"
  1293. },
  1294. {
  1295. "offset": 1,
  1296. "color": "rgba(18,78,145,0)"
  1297. }
  1298. ],
  1299. "global": false
  1300. }
  1301. }
  1302. }
  1303. },
  1304. {
  1305. "name": "",
  1306. "value": 606,
  1307. "label": {
  1308. "show": true,
  1309. "position": "top",
  1310. formatter: function(params) {
  1311. var index = params.dataIndex;
  1312. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1313. return str;
  1314. },
  1315. "rich": {
  1316. "a": {
  1317. "fontSize": 18,
  1318. "color": "#BDC414",
  1319. "align": "center",
  1320. "height": 30
  1321. },
  1322. "c": {
  1323. "fontSize": 18,
  1324. "color": "#fff",
  1325. "padding": [
  1326. -4,
  1327. 0,
  1328. 8,
  1329. 0
  1330. ],
  1331. "backgroundColor": {
  1332. "image": labelimg
  1333. },
  1334. "align": "center",
  1335. "verticalAlign": "bottom",
  1336. "height": 45,
  1337. "lineHeight": 40,
  1338. "width": 100
  1339. }
  1340. }
  1341. },
  1342. "itemStyle": {
  1343. "normal": {
  1344. "color": {
  1345. "type": "linear",
  1346. "x": 0,
  1347. "y": 0,
  1348. "x2": 0,
  1349. "y2": 1,
  1350. "colorStops": [{
  1351. "offset": 0,
  1352. "color": "rgba(189,196,20,1)"
  1353. },
  1354. {
  1355. "offset": 1,
  1356. "color": "rgba(189,196,20,0)"
  1357. }
  1358. ],
  1359. "global": false
  1360. }
  1361. }
  1362. }
  1363. },
  1364. {
  1365. "name": "",
  1366. "value": 506,
  1367. "label": {
  1368. "show": true,
  1369. "position": "top",
  1370. formatter: function(params) {
  1371. var index = params.dataIndex;
  1372. var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
  1373. return str;
  1374. },
  1375. "rich": {
  1376. "a": {
  1377. "fontSize": 18,
  1378. "color": "#C8CCA5",
  1379. "align": "center",
  1380. "height": 30
  1381. },
  1382. "c": {
  1383. "fontSize": 18,
  1384. "color": "#fff",
  1385. "padding": [
  1386. -4,
  1387. 0,
  1388. 8,
  1389. 0
  1390. ],
  1391. "backgroundColor": {
  1392. "image": labelimg
  1393. },
  1394. "align": "center",
  1395. "verticalAlign": "bottom",
  1396. "height": 45,
  1397. "lineHeight": 40,
  1398. "width": 100
  1399. }
  1400. }
  1401. },
  1402. "itemStyle": {
  1403. "normal": {
  1404. "color": {
  1405. "type": "linear",
  1406. "x": 0,
  1407. "y": 0,
  1408. "x2": 0,
  1409. "y2": 1,
  1410. "colorStops": [{
  1411. "offset": 0,
  1412. "color": "rgba(200,204,165,1)"
  1413. },
  1414. {
  1415. "offset": 1,
  1416. "color": "rgba(200,204,165,0)"
  1417. }
  1418. ],
  1419. "global": false
  1420. }
  1421. }
  1422. }
  1423. }
  1424. ],
  1425. "stack": "a",
  1426. "symbol": "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
  1427. }
  1428. ]
  1429. }
  1430. // 使用刚指定的配置项和数据显示图表。
  1431. myChart.setOption(option);
  1432. window.addEventListener("resize",function(){
  1433. myChart.resize();
  1434. });
  1435. }
  1436. function ceshis5() {
  1437. var myChart = echarts.init(document.getElementById('map'));
  1438. var uploadedDataURL = "./js/data-1528971808162-BkOXf61WX.json";
  1439. //如果想要修改,请点击上方克隆,然后在自己的版本上修改,不要在lz的版本上改!!
  1440. // echarts.extendsMap = function(id, opt) {
  1441. // // 实例
  1442. // var cityMap = {
  1443. // "郑州市": zhengzhou,
  1444. // "开封市": kaifeng,
  1445. // "洛阳市": luoyang,
  1446. // "平顶山市": pingdingshan,
  1447. // "安阳市": anyang,
  1448. // "鹤壁市": hebi,
  1449. // "新乡市": xinxiang,
  1450. // "焦作市": jiaozuo,
  1451. // "濮阳市": puyang,
  1452. // "漯河市": luohe,
  1453. // "三门峡市": sanmenxia,
  1454. // "南阳市": nanyang,
  1455. // "商丘市": shangqiu,
  1456. // "信阳市": xinyang,
  1457. // "周口市": zhoukou,
  1458. // "许昌市": xuchang,
  1459. // "驻马店市": zhumadian
  1460. // };
  1461. // }
  1462. var geoGpsMap = {
  1463. '1': [116.4071, 39.9046],
  1464. '2': [125.8154, 44.2584],
  1465. '3': [121.4737, 31.2303],
  1466. '4': [117.1582, 36.8701],
  1467. '5': [103.9526, 30.7617],
  1468. '6': [106.6302, 26.6470],
  1469. };
  1470. var geoCoordMap = {
  1471. "江苏": [118.8062, 31.9208],
  1472. '黑龙江': [127.9688, 45.368],
  1473. '内蒙古': [110.3467, 41.4899],
  1474. "吉林": [125.8154, 44.2584],
  1475. '北京市': [116.4551, 40.2539],
  1476. "辽宁": [123.1238, 42.1216],
  1477. "河北": [114.4995, 38.1006],
  1478. "天津": [117.4219, 39.4189],
  1479. "山西": [112.3352, 37.9413],
  1480. "陕西": [109.1162, 34.2004],
  1481. "甘肃": [103.5901, 36.3043],
  1482. "宁夏": [106.3586, 38.1775],
  1483. "青海": [101.4038, 36.8207],
  1484. "新疆": [87.9236, 43.5883],
  1485. "四川": [103.9526, 30.7617],
  1486. "重庆": [108.384366, 30.439702],
  1487. "山东": [117.1582, 36.8701],
  1488. "河南": [113.4668, 34.6234],
  1489. "安徽": [117.29, 32.0581],
  1490. "湖北": [114.3896, 30.6628],
  1491. "浙江": [119.5313, 29.8773],
  1492. "福建": [119.4543, 25.9222],
  1493. "江西": [116.0046, 28.6633],
  1494. "湖南": [113.0823, 28.2568],
  1495. "贵州": [106.6992, 26.7682],
  1496. "云南": [102.9199, 25.4663],
  1497. "广东": [113.12244, 23.009505],
  1498. "广西": [108.479, 23.1152],
  1499. "海南": [110.3893, 19.8516],
  1500. '上海': [121.4648, 31.2891],
  1501. };
  1502. var d1 = {
  1503. '江苏': 10041,
  1504. '黑龙江': 4093,
  1505. '内蒙古': 1157,
  1506. '吉林': 4903,
  1507. '北京市': 2667,
  1508. '辽宁': 8331,
  1509. '河北': 23727,
  1510. '天津': 681,
  1511. '山西': 5352,
  1512. '陕西': 38,
  1513. '甘肃': 77,
  1514. '宁夏': 65,
  1515. '青海': 10,
  1516. '新疆': 193,
  1517. '四川': 309,
  1518. '重庆': 77,
  1519. '山东': 21666,
  1520. '河南': 15717,
  1521. '安徽': 15671,
  1522. '湖北': 3714,
  1523. '浙江': 3141,
  1524. '福建': 955,
  1525. '江西': 4978,
  1526. '湖南': 778,
  1527. '贵州': 33,
  1528. '云南': 149,
  1529. '广东': 1124,
  1530. '广西': 125,
  1531. '海南': 7,
  1532. '上海': 2155,
  1533. };
  1534. var d2 = {
  1535. "江苏": 0,
  1536. '黑龙江': 0,
  1537. '内蒙古': 0,
  1538. "吉林": 0,
  1539. '北京市': 0,
  1540. "辽宁": 0,
  1541. "河北": 0,
  1542. "天津": 0,
  1543. "山西": 0,
  1544. "陕西": 0,
  1545. "甘肃": 0,
  1546. "宁夏": 0,
  1547. "青海": 0,
  1548. "新疆": 0,
  1549. "四川": 0,
  1550. "重庆": 0,
  1551. "山东": 0,
  1552. "河南": 0,
  1553. "安徽": 0,
  1554. "湖北": 0,
  1555. "浙江": 0,
  1556. "福建": 0,
  1557. "江西": 0,
  1558. "湖南": 0,
  1559. "贵州": 0,
  1560. "云南": 0,
  1561. "广东": 0,
  1562. "广西": 0,
  1563. '海南': 0,
  1564. '上海': 0,
  1565. };
  1566. var d3 = {
  1567. '江苏': 11788,
  1568. '黑龙江': 1944,
  1569. '内蒙古': 2954,
  1570. '吉林': 3482,
  1571. '北京市': 1808,
  1572. '辽宁': 5488,
  1573. '河北': 27035,
  1574. '天津': 2270,
  1575. '山西': 13623,
  1576. '陕西': 4221,
  1577. '甘肃': 754,
  1578. '宁夏': 1783,
  1579. '青海': 91,
  1580. '新疆': 1907,
  1581. '四川': 4905,
  1582. '重庆': 1420,
  1583. '山东': 39781,
  1584. '河南': 16154,
  1585. '安徽': 7914,
  1586. '湖北': 6802,
  1587. '浙江': 5812,
  1588. '福建': 3345,
  1589. '江西': 4996,
  1590. '湖南': 5627,
  1591. '贵州': 1504,
  1592. '云南': 2725,
  1593. '广东': 6339,
  1594. '广西': 1009,
  1595. '海南': 0,
  1596. '上海': 1988,
  1597. };
  1598. var d4 = {
  1599. "江苏": 0,
  1600. '黑龙江': 0,
  1601. '内蒙古': 0,
  1602. "吉林": 0,
  1603. '北京市': 0,
  1604. "辽宁": 0,
  1605. "河北": 0,
  1606. "天津": 0,
  1607. "山西": 0,
  1608. "陕西": 0,
  1609. "甘肃": 0,
  1610. "宁夏": 0,
  1611. "青海": 0,
  1612. "新疆": 0,
  1613. "四川": 0,
  1614. "重庆": 0,
  1615. "山东": 0,
  1616. "河南": 0,
  1617. "安徽": 0,
  1618. "湖北": 0,
  1619. "浙江": 0,
  1620. "福建": 0,
  1621. "江西": 0,
  1622. "湖南": 0,
  1623. "贵州": 0,
  1624. "云南": 0,
  1625. "广东": 0,
  1626. "广西": 0,
  1627. '海南': 0,
  1628. '上海': 0,
  1629. };
  1630. var d5 = {
  1631. '江苏': 159,
  1632. '黑龙江': 5,
  1633. '内蒙古': 54,
  1634. '吉林': 10,
  1635. '北京市': 0,
  1636. '辽宁': 0,
  1637. '河北': 1679,
  1638. '天津': 1,
  1639. '山西': 2698,
  1640. '陕西': 1744,
  1641. '甘肃': 362,
  1642. '宁夏': 429,
  1643. '青海': 122,
  1644. '新疆': 731,
  1645. '四川': 3925,
  1646. '重庆': 1480,
  1647. '山东': 79,
  1648. '河南': 1017,
  1649. '安徽': 208,
  1650. '湖北': 1209,
  1651. '浙江': 1418,
  1652. '福建': 1237,
  1653. '江西': 1004,
  1654. '湖南': 1511,
  1655. '贵州': 345,
  1656. '云南': 1429,
  1657. '广东': 2242,
  1658. '广西': 2271,
  1659. '海南': 59,
  1660. '上海': 8,
  1661. };
  1662. var d6 = {
  1663. "江苏": 20,
  1664. '黑龙江': 60,
  1665. '内蒙古': 80,
  1666. "吉林": 10,
  1667. '北京市': 80,
  1668. "辽宁": 40,
  1669. "河北": 50,
  1670. "天津": 60,
  1671. "山西": 40,
  1672. "陕西": 60,
  1673. "甘肃": 40,
  1674. "宁夏": 10,
  1675. "青海": 0,
  1676. "新疆": 0,
  1677. "四川": 80,
  1678. "重庆": 0,
  1679. "山东": 60,
  1680. "河南": 0,
  1681. "安徽": 0,
  1682. "湖北": 10,
  1683. "浙江": 100,
  1684. "福建": 60,
  1685. "江西": 0,
  1686. "湖南": 0,
  1687. "贵州": 150,
  1688. "云南": 0,
  1689. "广东": 80,
  1690. "广西": 0,
  1691. '海南': 0,
  1692. '上海': 50,
  1693. };
  1694. var colors = [
  1695. ["#1DE9B6", "#1DE9B6", "#FFDB5C", "#FFDB5C", "#04B9FF", "#04B9FF"],
  1696. ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
  1697. ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
  1698. ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
  1699. ];
  1700. var colorIndex = 0;
  1701. $(function() {
  1702. // var geoCoordMap = {
  1703. // '郑州': [113.64964385, 34.7566100641],
  1704. // '开封': [114.351642118, 34.8018541758],
  1705. // '洛阳': [112.447524769, 34.6573678177],
  1706. // '平顶山': [113.300848978, 33.7453014565],
  1707. // '安阳': [114.351806508, 36.1102667222],
  1708. // '鹤壁': [114.297769838, 35.7554258742],
  1709. // '新乡': [113.912690161, 35.3072575577],
  1710. // '焦作': [113.211835885, 35.234607555],
  1711. // '濮阳': [115.026627441, 35.7532978882],
  1712. // '漯河': [114.0460614, 33.5762786885],
  1713. // '三门峡': [111.181262093, 34.7833199411],
  1714. // '南阳': [112.542841901, 33.0114195691],
  1715. // "商丘": [115.641885688, 34.4385886402],
  1716. // '信阳': [114.085490993, 32.1285823075],
  1717. // '周口': [114.654101942, 33.6237408181],
  1718. // '许昌': [113.83531246, 34.0267395887],
  1719. // '驻马店': [114.049153547, 32.9831581541]
  1720. // };
  1721. var year = ["北京", "长春", "上海", "青岛", "成都", "贵阳"];
  1722. var mapData = [
  1723. [],
  1724. [],
  1725. [],
  1726. [],
  1727. [],
  1728. [],
  1729. ];
  1730. /*柱子Y名称*/
  1731. var categoryData = [];
  1732. var barData = [];
  1733. for (var key in geoCoordMap) {
  1734. mapData[0].push({
  1735. "year": '长春',
  1736. "name": key,
  1737. "value": d1[key] / 100,
  1738. "value1": d1[key] / 100,
  1739. });
  1740. mapData[1].push({
  1741. "year": '长春',
  1742. "name": key,
  1743. "value": d1[key] / 100,
  1744. "value1": d2[key] / 100,
  1745. });
  1746. mapData[2].push({
  1747. "year": '青岛',
  1748. "name": key,
  1749. "value": d3[key] / 100,
  1750. "value1": d3[key] / 100,
  1751. });
  1752. mapData[3].push({
  1753. "year": '青岛',
  1754. "name": key,
  1755. "value": d3[key] / 100,
  1756. "value1": d4[key] / 100,
  1757. });
  1758. mapData[4].push({
  1759. "year": '成都',
  1760. "name": key,
  1761. "value": d5[key] / 100,
  1762. "value1": d5[key] / 100,
  1763. });
  1764. mapData[5].push({
  1765. "year": '成都',
  1766. "name": key,
  1767. "value": d5[key] / 100,
  1768. "value1": d6[key] / 100,
  1769. });
  1770. }
  1771. for (var i = 0; i < mapData.length; i++) {
  1772. mapData[i].sort(function sortNumber(a, b) {
  1773. return a.value - b.value
  1774. });
  1775. barData.push([]);
  1776. categoryData.push([]);
  1777. for (var j = 0; j < mapData[i].length; j++) {
  1778. barData[i].push(mapData[i][j].value1);
  1779. categoryData[i].push(mapData[i][j].name);
  1780. }
  1781. }
  1782. $.getJSON(uploadedDataURL, function(geoJson) {
  1783. echarts.registerMap('china', geoJson);
  1784. var convertData = function(data) {
  1785. var res = [];
  1786. for (var i = 0; i < data.length; i++) {
  1787. var geoCoord = geoCoordMap[data[i].name];
  1788. if (geoCoord) {
  1789. res.push({
  1790. name: data[i].name,
  1791. value: geoCoord.concat(data[i].value)
  1792. });
  1793. }
  1794. }
  1795. return res;
  1796. };
  1797. var convertToLineData = function(data, gps) {
  1798. var res = [];
  1799. for (var i = 0; i < data.length; i++) {
  1800. var dataItem = data[i];
  1801. var toCoord = geoCoordMap[dataItem.name];
  1802. //debugger;
  1803. var fromCoord = gps; //郑州
  1804. // var toCoord = geoGps[Math.random()*3];
  1805. if (fromCoord && toCoord) {
  1806. res.push([{
  1807. coord: fromCoord,
  1808. value: dataItem.value
  1809. }, {
  1810. coord: toCoord,
  1811. }]);
  1812. }
  1813. }
  1814. return res;
  1815. };
  1816. optionXyMap01 = {
  1817. timeline: {
  1818. data: year,
  1819. axisType: 'category',
  1820. autoPlay: true,
  1821. playInterval: 3000,
  1822. left: '10%',
  1823. right: '10%',
  1824. bottom: '3%',
  1825. width: '80%',
  1826. // height: null,
  1827. label: {
  1828. normal: {
  1829. textStyle: {
  1830. color: '#ddd'
  1831. }
  1832. },
  1833. emphasis: {
  1834. textStyle: {
  1835. color: '#fff'
  1836. }
  1837. }
  1838. },
  1839. symbolSize: 10,
  1840. lineStyle: {
  1841. color: '#555'
  1842. },
  1843. checkpointStyle: {
  1844. borderColor: '#777',
  1845. borderWidth: 2
  1846. },
  1847. controlStyle: {
  1848. showNextBtn: true,
  1849. showPrevBtn: true,
  1850. normal: {
  1851. color: '#666',
  1852. borderColor: '#666'
  1853. },
  1854. emphasis: {
  1855. color: '#aaa',
  1856. borderColor: '#aaa'
  1857. }
  1858. },
  1859. },
  1860. baseOption: {
  1861. animation: true,
  1862. animationDuration: 1000,
  1863. animationEasing: 'cubicInOut',
  1864. animationDurationUpdate: 1000,
  1865. animationEasingUpdate: 'cubicInOut',
  1866. grid: {
  1867. right: '1%',
  1868. top: '15%',
  1869. bottom: '10%',
  1870. width: '20%'
  1871. },
  1872. tooltip: {
  1873. trigger: 'axis', // hover触发器
  1874. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  1875. type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
  1876. shadowStyle: {
  1877. color: 'rgba(150,150,150,0.1)' //hover颜色
  1878. }
  1879. }
  1880. },
  1881. geo: {
  1882. show: true,
  1883. map: 'china',
  1884. roam: true,
  1885. zoom: 1,
  1886. center: [113.83531246, 34.0267395887],
  1887. label: {
  1888. emphasis: {
  1889. show: false
  1890. }
  1891. },
  1892. itemStyle: {
  1893. normal: {
  1894. borderColor: 'rgba(147, 235, 248, 1)',
  1895. borderWidth: 1,
  1896. areaColor: {
  1897. type: 'radial',
  1898. x: 0.5,
  1899. y: 0.5,
  1900. r: 0.8,
  1901. colorStops: [{
  1902. offset: 0,
  1903. color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
  1904. }, {
  1905. offset: 1,
  1906. color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
  1907. }],
  1908. globalCoord: false // 缺省为 false
  1909. },
  1910. shadowColor: 'rgba(128, 217, 248, 1)',
  1911. // shadowColor: 'rgba(255, 255, 255, 1)',
  1912. shadowOffsetX: -2,
  1913. shadowOffsetY: 2,
  1914. shadowBlur: 10
  1915. },
  1916. emphasis: {
  1917. areaColor: '#389BB7',
  1918. borderWidth: 0
  1919. }
  1920. }
  1921. },
  1922. },
  1923. options: []
  1924. };
  1925. for (var n = 0; n < year.length; n++) {
  1926. optionXyMap01.options.push({
  1927. /*backgroundColor: '#013954',*/
  1928. title:
  1929. [{
  1930. text: '整车物流平台',
  1931. subtext: ' 数据由整车物流部提供',
  1932. left: '35%',
  1933. top: '15%',
  1934. textStyle: {
  1935. color: '#fff',
  1936. fontSize: 25
  1937. }
  1938. },
  1939. {
  1940. id: 'statistic',
  1941. text: year[n] + "数据统计情况",
  1942. left: '75%',
  1943. top: '8%',
  1944. textStyle: {
  1945. color: '#fff',
  1946. fontSize: 25
  1947. }
  1948. }
  1949. ],
  1950. xAxis: {
  1951. type: 'value',
  1952. scale: true,
  1953. position: 'top',
  1954. min: 0,
  1955. boundaryGap: false,
  1956. splitLine: {
  1957. show: false
  1958. },
  1959. axisLine: {
  1960. show: false
  1961. },
  1962. axisTick: {
  1963. show: false
  1964. },
  1965. axisLabel: {
  1966. margin: 2,
  1967. textStyle: {
  1968. color: '#aaa'
  1969. }
  1970. },
  1971. },
  1972. yAxis: {
  1973. type: 'category',
  1974. // name: 'TOP 20',
  1975. nameGap: 16,
  1976. axisLine: {
  1977. show: true,
  1978. lineStyle: {
  1979. color: '#ddd'
  1980. }
  1981. },
  1982. axisTick: {
  1983. show: false,
  1984. lineStyle: {
  1985. color: '#ddd'
  1986. }
  1987. },
  1988. axisLabel: {
  1989. interval: 0,
  1990. textStyle: {
  1991. color: '#ddd'
  1992. }
  1993. },
  1994. data: categoryData[n]
  1995. },
  1996. series: [
  1997. //未知作用
  1998. {
  1999. //文字和标志
  2000. name: 'light',
  2001. type: 'scatter',
  2002. coordinateSystem: 'geo',
  2003. data: convertData(mapData[n]),
  2004. symbolSize: function(val) {
  2005. return val[2] / 10;
  2006. },
  2007. label: {
  2008. normal: {
  2009. formatter: '{b}',
  2010. position: 'right',
  2011. show: true
  2012. },
  2013. emphasis: {
  2014. show: true
  2015. }
  2016. },
  2017. itemStyle: {
  2018. normal: {
  2019. color: colors[colorIndex][n]
  2020. }
  2021. }
  2022. },
  2023. //地图?
  2024. {
  2025. type: 'map',
  2026. map: 'china',
  2027. geoIndex: 0,
  2028. aspectScale: 0.75, //长宽比
  2029. showLegendSymbol: false, // 存在legend时显示
  2030. label: {
  2031. normal: {
  2032. show: false
  2033. },
  2034. emphasis: {
  2035. show: false,
  2036. textStyle: {
  2037. color: '#fff'
  2038. }
  2039. }
  2040. },
  2041. roam: true,
  2042. itemStyle: {
  2043. normal: {
  2044. areaColor: '#031525',
  2045. borderColor: '#FFFFFF',
  2046. },
  2047. emphasis: {
  2048. areaColor: '#2B91B7'
  2049. }
  2050. },
  2051. animation: false,
  2052. data: mapData
  2053. },
  2054. //地图点的动画效果
  2055. {
  2056. // name: 'Top 5',
  2057. type: 'effectScatter',
  2058. coordinateSystem: 'geo',
  2059. data: convertData(mapData[n].sort(function(a, b) {
  2060. return b.value - a.value;
  2061. }).slice(0, 20)),
  2062. symbolSize: function(val) {
  2063. return val[2] / 10;
  2064. },
  2065. showEffectOn: 'render',
  2066. rippleEffect: {
  2067. brushType: 'stroke'
  2068. },
  2069. hoverAnimation: true,
  2070. label: {
  2071. normal: {
  2072. formatter: '{b}',
  2073. position: 'right',
  2074. show: true
  2075. }
  2076. },
  2077. itemStyle: {
  2078. normal: {
  2079. color: colors[colorIndex][n],
  2080. shadowBlur: 10,
  2081. shadowColor: colors[colorIndex][n]
  2082. }
  2083. },
  2084. zlevel: 1
  2085. },
  2086. //地图线的动画效果
  2087. {
  2088. type: 'lines',
  2089. zlevel: 2,
  2090. effect: {
  2091. show: true,
  2092. period: 4, //箭头指向速度,值越小速度越快
  2093. trailLength: 0.1, //特效尾迹长度[0,1]值越大,尾迹越长重
  2094. symbol: 'arrow', //箭头图标
  2095. symbolSize: 5, //图标大小
  2096. },
  2097. lineStyle: {
  2098. normal: {
  2099. color: colors[colorIndex][n],
  2100. width: 0.3, //尾迹线条宽度
  2101. opacity: 0.8, //尾迹线条透明度
  2102. curveness: .3 //尾迹线条曲直度
  2103. }
  2104. },
  2105. data: convertToLineData(mapData[n], geoGpsMap[n + 1])
  2106. },
  2107. //柱状图
  2108. {
  2109. zlevel: 1.5,
  2110. type: 'bar',
  2111. symbol: 'none',
  2112. itemStyle: {
  2113. normal: {
  2114. color: colors[colorIndex][n]
  2115. }
  2116. },
  2117. data: barData[n]
  2118. }
  2119. ]
  2120. })
  2121. }
  2122. myChart.setOption(optionXyMap01);
  2123. });
  2124. });
  2125. function randomNum(minNum, maxNum) {
  2126. switch (arguments.length) {
  2127. case 1:
  2128. return parseInt(Math.random() * minNum + 1, 10);
  2129. break;
  2130. case 2:
  2131. return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  2132. break;
  2133. default:
  2134. return 0;
  2135. break;
  2136. }
  2137. }
  2138. // 使用刚指定的配置项和数据显示图表。
  2139. //myChart.setOption(option);
  2140. window.addEventListener("resize",function(){
  2141. myChart.resize();
  2142. });
  2143. }
  2144. function ceshis6() {
  2145. var myChart = echarts.init(document.getElementById('diqu'));
  2146. var uploadedDataURL = "./js/data-1482909892121-BJ3auk-Se.json";
  2147. myChart.showLoading();
  2148. $.getJSON(uploadedDataURL, function(geoJson) {
  2149. echarts.registerMap('jiangxi', geoJson);
  2150. myChart.hideLoading();
  2151. var geoCoordMap = {
  2152. '济南市': [117.121225, 36.66466],
  2153. '菏泽市': [115.480656, 35.23375],
  2154. '济宁市': [116.59, 35.38],
  2155. '德州市': [116.39, 37.45],
  2156. '聊城市': [115.97, 36.45],
  2157. '泰安市': [117.13, 36.18],
  2158. '临沂市': [118.35, 35.05],
  2159. '淄博市': [118.05, 36.78],
  2160. '枣庄市': [117.57, 34.86],
  2161. '滨州市': [118.03, 37.36],
  2162. '潍坊市': [119.1, 36.62],
  2163. '东营市': [118.49, 37.46],
  2164. '青岛市': [120.3, 36.62],
  2165. '烟台市': [120.9, 37.32],
  2166. '威海市': [122.1, 37.2],
  2167. '日照市': [119.1, 35.62],
  2168. '济宁市': [116.7, 35.42],
  2169. '莱芜市': [117.70, 36.28],
  2170. }
  2171. var data = [{
  2172. name: '济南市',
  2173. value: 590
  2174. },
  2175. {
  2176. name: '菏泽市',
  2177. value: 380
  2178. },
  2179. {
  2180. name: '德州市',
  2181. value: 352
  2182. },
  2183. {
  2184. name: '聊城市',
  2185. value: 99
  2186. },
  2187. {
  2188. name: '泰安市',
  2189. value: 189
  2190. },
  2191. {
  2192. name: '临沂市',
  2193. value: 252
  2194. },
  2195. {
  2196. name: '淄博市',
  2197. value: 158
  2198. },
  2199. {
  2200. name: '枣庄市',
  2201. value: 352
  2202. },
  2203. {
  2204. name: '滨州市',
  2205. value: 189
  2206. },
  2207. {
  2208. name: '潍坊市',
  2209. value:360
  2210. },
  2211. {
  2212. name: '东营市',
  2213. value: 280
  2214. },
  2215. {
  2216. name: '青岛市',
  2217. value: 180
  2218. },
  2219. {
  2220. name: '烟台市',
  2221. value: 190
  2222. },
  2223. {
  2224. name: '威海市',
  2225. value: 380
  2226. },
  2227. {
  2228. name: '日照市',
  2229. value: 390
  2230. },
  2231. {
  2232. name: '济宁市',
  2233. value: 290
  2234. },
  2235. {
  2236. name: '莱芜市',
  2237. value: 290
  2238. },
  2239. ];
  2240. var max = 480,
  2241. min = 9; // todo
  2242. var maxSize4Pin = 100,
  2243. minSize4Pin = 20;
  2244. var convertData = function(data) {
  2245. var res = [];
  2246. for (var i = 0; i < data.length; i++) {
  2247. var geoCoord = geoCoordMap[data[i].name];
  2248. if (geoCoord) {
  2249. res.push({
  2250. name: data[i].name,
  2251. value: geoCoord.concat(data[i].value)
  2252. });
  2253. }
  2254. }
  2255. return res;
  2256. };
  2257. option = {
  2258. /*backgroundColor: '#020933',*/
  2259. title: {
  2260. top: 20,
  2261. text: '“会员活跃度” - 山东省',
  2262. subtext: '',
  2263. x: 'center',
  2264. textStyle: {
  2265. color: '#ccc'
  2266. }
  2267. },
  2268. tooltip: {
  2269. trigger: 'item',
  2270. formatter: function(params) {
  2271. if (typeof(params.value)[2] == "undefined") {
  2272. return params.name + ' : ' + params.value;
  2273. } else {
  2274. return params.name + ' : ' + params.value[2];
  2275. }
  2276. }
  2277. },
  2278. /* legend: {
  2279. orient: 'vertical',
  2280. y: 'bottom',
  2281. x: 'right',
  2282. data:['pm2.5'],
  2283. textStyle: {
  2284. color: '#fff'
  2285. }
  2286. },*/
  2287. legend: {
  2288. orient: 'vertical',
  2289. y: 'bottom',
  2290. x: 'right',
  2291. data: ['pm2.5'],
  2292. textStyle: {
  2293. color: '#fff'
  2294. }
  2295. },
  2296. visualMap: {
  2297. show: false,
  2298. min: 0,
  2299. max: 500,
  2300. left: 'left',
  2301. top: 'bottom',
  2302. text: ['高', '低'], // 文本,默认为数值文本
  2303. calculable: true,
  2304. seriesIndex: [1],
  2305. inRange: {
  2306. /*color: ['#3B5077', '#031525'] ,// 蓝黑
  2307. color: ['#ffc0cb', '#800080'] ,// 红紫
  2308. color: ['#3C3B3F', '#605C3C'] ,// 黑绿
  2309. color: ['#0f0c29', '#302b63', '#24243e'], // 黑紫黑
  2310. color: ['#23074d', '#cc5333'] ,// 紫红
  2311. color: ['#00467F', '#A5CC82'] ,// 蓝绿
  2312. color: ['#1488CC', '#2B32B2'], // 浅蓝
  2313. color: ['#00467F', '#A5CC82'], // 蓝绿
  2314. color: ['#00467F', '#A5CC82'], // 蓝绿
  2315. color: ['#00467F', '#A5CC82'], // 蓝绿
  2316. color: ['#00467F', '#A5CC82'], // 蓝绿*/
  2317. }
  2318. },
  2319. geo: {
  2320. show: true,
  2321. map: 'jiangxi',
  2322. label: {
  2323. normal: {
  2324. show: false
  2325. },
  2326. emphasis: {
  2327. show: false,
  2328. }
  2329. },
  2330. roam: true,
  2331. itemStyle: {
  2332. normal: {
  2333. areaColor: 'transparent',
  2334. borderColor: '#3fdaff',
  2335. borderWidth: 2,
  2336. shadowColor: 'rgba(63, 218, 255, 0.5)',
  2337. shadowBlur: 30
  2338. },
  2339. emphasis: {
  2340. areaColor: '#2B91B7',
  2341. }
  2342. }
  2343. },
  2344. series: [{
  2345. name: 'light',
  2346. type: 'scatter',
  2347. coordinateSystem: 'geo',
  2348. data: convertData(data),
  2349. symbolSize: function(val) {
  2350. return val[2] / 10;
  2351. },
  2352. label: {
  2353. normal: {
  2354. formatter: '{b}',
  2355. position: 'right',
  2356. show: true
  2357. },
  2358. emphasis: {
  2359. show: true
  2360. }
  2361. },
  2362. itemStyle: {
  2363. normal: {
  2364. color: '#F4E925'
  2365. }
  2366. }
  2367. },
  2368. {
  2369. type: 'map',
  2370. map: 'jiangxi',
  2371. geoIndex: 0,
  2372. aspectScale: 0.75, //长宽比
  2373. showLegendSymbol: false, // 存在legend时显示
  2374. label: {
  2375. normal: {
  2376. show: false
  2377. },
  2378. emphasis: {
  2379. show: false,
  2380. textStyle: {
  2381. color: '#fff'
  2382. }
  2383. }
  2384. },
  2385. roam: true,
  2386. itemStyle: {
  2387. normal: {
  2388. areaColor: '#031525',
  2389. borderColor: '#FFFFFF',
  2390. },
  2391. emphasis: {
  2392. areaColor: '#2B91B7'
  2393. }
  2394. },
  2395. animation: false,
  2396. data: data
  2397. },
  2398. {
  2399. name: 'Top 5',
  2400. type: 'effectScatter',
  2401. coordinateSystem: 'geo',
  2402. data: convertData(data.sort(function(a, b) {
  2403. return b.value - a.value;
  2404. }).slice(0, 5)),
  2405. symbolSize: function(val) {
  2406. return val[2] / 10;
  2407. },
  2408. showEffectOn: 'render',
  2409. rippleEffect: {
  2410. brushType: 'stroke'
  2411. },
  2412. hoverAnimation: true,
  2413. label: {
  2414. normal: {
  2415. formatter: '{b}',
  2416. position: 'right',
  2417. show: true
  2418. }
  2419. },
  2420. itemStyle: {
  2421. normal: {
  2422. color: '#F4E925',
  2423. shadowBlur: 10,
  2424. shadowColor: '#05C3F9'
  2425. }
  2426. },
  2427. zlevel: 1
  2428. },
  2429. ]
  2430. };
  2431. myChart.setOption(option);
  2432. });
  2433. // 使用刚指定的配置项和数据显示图表。
  2434. window.addEventListener("resize",function(){
  2435. myChart.resize();
  2436. });
  2437. }
  2438. function ceshis7() {
  2439. var myChart = echarts.init(document.getElementById('chart_1'));
  2440. // 使用刚指定的配置项和数据显示图表。
  2441. myChart.setOption(option);
  2442. window.addEventListener("resize",function(){
  2443. myChart.resize();
  2444. });
  2445. }
  2446. });