base.js 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897
  1. function fnW(str) {
  2. var num;
  3. str >= 10 ? num = str : num = "0" + str;
  4. return num;
  5. }
  6. //获取当前时间
  7. var timer = setInterval(function () {
  8. var date = new Date();
  9. var year = date.getFullYear(); //当前年份
  10. var month = date.getMonth(); //当前月份
  11. var data = date.getDate(); //天
  12. var hours = date.getHours(); //小时
  13. var minute = date.getMinutes(); //分
  14. var second = date.getSeconds(); //秒
  15. var day = date.getDay(); //获取当前星期几
  16. var ampm = hours < 12 ? 'am' : 'pm';
  17. $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
  18. $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + ampm + '</span><span>周' + day + '</span>')
  19. }, 1000)
  20. //页面地图数据
  21. var geoCoordMap = {
  22. '海门': [121.15, 31.89],
  23. '鄂尔多斯': [109.781327, 39.608266],
  24. '招远': [120.38, 37.35],
  25. '舟山': [122.207216, 29.985295],
  26. '齐齐哈尔': [123.97, 47.33],
  27. '盐城': [120.13, 33.38],
  28. '赤峰': [118.87, 42.28],
  29. '青岛': [120.33, 36.07],
  30. '乳山': [121.52, 36.89],
  31. '金昌': [102.188043, 38.520089],
  32. '泉州': [118.58, 24.93],
  33. '莱西': [120.53, 36.86],
  34. '日照': [119.46, 35.42],
  35. '胶南': [119.97, 35.88],
  36. '南通': [121.05, 32.08],
  37. '拉萨': [91.11, 29.97],
  38. '云浮': [112.02, 22.93],
  39. '梅州': [116.1, 24.55],
  40. '文登': [122.05, 37.2],
  41. '上海': [121.48, 31.22],
  42. '攀枝花': [101.718637, 26.582347],
  43. '威海': [122.1, 37.5],
  44. '承德': [117.93, 40.97],
  45. '厦门': [118.1, 24.46],
  46. '汕尾': [115.375279, 22.786211],
  47. '潮州': [116.63, 23.68],
  48. '丹东': [124.37, 40.13],
  49. '太仓': [121.1, 31.45],
  50. '曲靖': [103.79, 25.51],
  51. '烟台': [121.39, 37.52],
  52. '福州': [119.3, 26.08],
  53. '瓦房店': [121.979603, 39.627114],
  54. '即墨': [120.45, 36.38],
  55. '抚顺': [123.97, 41.97],
  56. '玉溪': [102.52, 24.35],
  57. '张家口': [114.87, 40.82],
  58. '阳泉': [113.57, 37.85],
  59. '莱州': [119.942327, 37.177017],
  60. '湖州': [120.1, 30.86],
  61. '汕头': [116.69, 23.39],
  62. '昆山': [120.95, 31.39],
  63. '宁波': [121.56, 29.86],
  64. '湛江': [110.359377, 21.270708],
  65. '揭阳': [116.35, 23.55],
  66. '荣成': [122.41, 37.16],
  67. '连云港': [119.16, 34.59],
  68. '葫芦岛': [120.836932, 40.711052],
  69. '常熟': [120.74, 31.64],
  70. '东莞': [113.75, 23.04],
  71. '河源': [114.68, 23.73],
  72. '淮安': [119.15, 33.5],
  73. '泰州': [119.9, 32.49],
  74. '南宁': [108.33, 22.84],
  75. '营口': [122.18, 40.65],
  76. '惠州': [114.4, 23.09],
  77. '江阴': [120.26, 31.91],
  78. '蓬莱': [120.75, 37.8],
  79. '韶关': [113.62, 24.84],
  80. '嘉峪关': [98.289152, 39.77313],
  81. '广州': [113.23, 23.16],
  82. '延安': [109.47, 36.6],
  83. '太原': [112.53, 37.87],
  84. '清远': [113.01, 23.7],
  85. '中山': [113.38, 22.52],
  86. '昆明': [102.73, 25.04],
  87. '寿光': [118.73, 36.86],
  88. '盘锦': [122.070714, 41.119997],
  89. '长治': [113.08, 36.18],
  90. '深圳': [114.07, 22.62],
  91. '珠海': [113.52, 22.3],
  92. '宿迁': [118.3, 33.96],
  93. '咸阳': [108.72, 34.36],
  94. '铜川': [109.11, 35.09],
  95. '平度': [119.97, 36.77],
  96. '佛山': [113.11, 23.05],
  97. '海口': [110.35, 20.02],
  98. '江门': [113.06, 22.61],
  99. '章丘': [117.53, 36.72],
  100. '肇庆': [112.44, 23.05],
  101. '大连': [121.62, 38.92],
  102. '临汾': [111.5, 36.08],
  103. '吴江': [120.63, 31.16],
  104. '石嘴山': [106.39, 39.04],
  105. '沈阳': [123.38, 41.8],
  106. '苏州': [120.62, 31.32],
  107. '茂名': [110.88, 21.68],
  108. '嘉兴': [120.76, 30.77],
  109. '长春': [125.35, 43.88],
  110. '胶州': [120.03336, 36.264622],
  111. '银川': [106.27, 38.47],
  112. '张家港': [120.555821, 31.875428],
  113. '三门峡': [111.19, 34.76],
  114. '锦州': [121.15, 41.13],
  115. '南昌': [115.89, 28.68],
  116. '柳州': [109.4, 24.33],
  117. '三亚': [109.511909, 18.252847],
  118. '自贡': [104.778442, 29.33903],
  119. '吉林': [126.57, 43.87],
  120. '阳江': [111.95, 21.85],
  121. '泸州': [105.39, 28.91],
  122. '西宁': [101.74, 36.56],
  123. '宜宾': [104.56, 29.77],
  124. '呼和浩特': [111.65, 40.82],
  125. '成都': [104.06, 30.67],
  126. '大同': [113.3, 40.12],
  127. '镇江': [119.44, 32.2],
  128. '桂林': [110.28, 25.29],
  129. '张家界': [110.479191, 29.117096],
  130. '宜兴': [119.82, 31.36],
  131. '北海': [109.12, 21.49],
  132. '西安': [108.95, 34.27],
  133. '金坛': [119.56, 31.74],
  134. '东营': [118.49, 37.46],
  135. '牡丹江': [129.58, 44.6],
  136. '遵义': [106.9, 27.7],
  137. '绍兴': [120.58, 30.01],
  138. '扬州': [119.42, 32.39],
  139. '常州': [119.95, 31.79],
  140. '潍坊': [119.1, 36.62],
  141. '重庆': [106.54, 29.59],
  142. '台州': [121.420757, 28.656386],
  143. '南京': [118.78, 32.04],
  144. '滨州': [118.03, 37.36],
  145. '贵阳': [106.71, 26.57],
  146. '无锡': [120.29, 31.59],
  147. '本溪': [123.73, 41.3],
  148. '克拉玛依': [84.77, 45.59],
  149. '渭南': [109.5, 34.52],
  150. '马鞍山': [118.48, 31.56],
  151. '宝鸡': [107.15, 34.38],
  152. '焦作': [113.21, 35.24],
  153. '句容': [119.16, 31.95],
  154. '北京': [116.46, 39.92],
  155. '徐州': [117.2, 34.26],
  156. '衡水': [115.72, 37.72],
  157. '包头': [110, 40.58],
  158. '绵阳': [104.73, 31.48],
  159. '乌鲁木齐': [87.68, 43.77],
  160. '枣庄': [117.57, 34.86],
  161. '杭州': [120.19, 30.26],
  162. '淄博': [118.05, 36.78],
  163. '鞍山': [122.85, 41.12],
  164. '溧阳': [119.48, 31.43],
  165. '库尔勒': [86.06, 41.68],
  166. '安阳': [114.35, 36.1],
  167. '开封': [114.35, 34.79],
  168. '济南': [117, 36.65],
  169. '德阳': [104.37, 31.13],
  170. '温州': [120.65, 28.01],
  171. '九江': [115.97, 29.71],
  172. '邯郸': [114.47, 36.6],
  173. '临安': [119.72, 30.23],
  174. '兰州': [103.73, 36.03],
  175. '沧州': [116.83, 38.33],
  176. '临沂': [118.35, 35.05],
  177. '南充': [106.110698, 30.837793],
  178. '天津': [117.2, 39.13],
  179. '富阳': [119.95, 30.07],
  180. '泰安': [117.13, 36.18],
  181. '诸暨': [120.23, 29.71],
  182. '郑州': [113.65, 34.76],
  183. '哈尔滨': [126.63, 45.75],
  184. '聊城': [115.97, 36.45],
  185. '芜湖': [118.38, 31.33],
  186. '唐山': [118.02, 39.63],
  187. '平顶山': [113.29, 33.75],
  188. '邢台': [114.48, 37.05],
  189. '德州': [116.29, 37.45],
  190. '济宁': [116.59, 35.38],
  191. '荆州': [112.239741, 30.335165],
  192. '宜昌': [111.3, 30.7],
  193. '义乌': [120.06, 29.32],
  194. '丽水': [119.92, 28.45],
  195. '洛阳': [112.44, 34.7],
  196. '秦皇岛': [119.57, 39.95],
  197. '株洲': [113.16, 27.83],
  198. '石家庄': [114.48, 38.03],
  199. '莱芜': [117.67, 36.19],
  200. '常德': [111.69, 29.05],
  201. '保定': [115.48, 38.85],
  202. '湘潭': [112.91, 27.87],
  203. '金华': [119.64, 29.12],
  204. '岳阳': [113.09, 29.37],
  205. '长沙': [113, 28.21],
  206. '衢州': [118.88, 28.97],
  207. '廊坊': [116.7, 39.53],
  208. '菏泽': [115.480656, 35.23375],
  209. '合肥': [117.27, 31.86],
  210. '武汉': [114.31, 30.52],
  211. '大庆': [125.03, 46.58],
  212. '安徽省': [117.17, 31.52],
  213. '北京市': [116.24, 39.55],
  214. '重庆市': [106.54, 29.59],
  215. '福建省': [119.18, 26.05],
  216. '甘肃省': [103.51, 36.04],
  217. '广东省': [113.14, 23.08],
  218. '广西壮族自治区': [108.19, 22.48],
  219. '贵州省': [106.42, 26.35],
  220. '海南省': [110.20, 20.02],
  221. '河北省': [114.30, 38.02],
  222. '河南省': [113.40, 34.46],
  223. '黑龙江省': [128.36, 45.44],
  224. '湖北省': [112.27, 30.15],
  225. '湖南省': [112.59, 28.12],
  226. '吉林省': [125.19, 43.54],
  227. '江苏省': [118.46, 32.03],
  228. '江西省': [115.55, 28.40],
  229. '辽宁省': [123.25, 41.48],
  230. '内蒙古': [108.41, 40.48],
  231. '内蒙古自治区': [108.41, 40.48],
  232. '宁夏回族自治区': [106.16, 38.27],
  233. '青海省': [101.48, 36.38],
  234. '山东省': [118.00, 36.40],
  235. '山西省': [112.33, 37.54],
  236. '陕西省': [108.57, 34.17],
  237. '上海市': [121.29, 31.14],
  238. '海南': [108.77, 19.10],
  239. '四川省': [104.04, 30.40],
  240. '天津市': [117.12, 39.02],
  241. '西藏自治区': [91.08, 29.39],
  242. '新疆维吾尔自治区': [87.36, 43.45],
  243. '云南省': [102.42, 25.04],
  244. '浙江省': [120.10, 30.16],
  245. '澳门特别行政区': [115.07, 21.33],
  246. '台湾省': [121.21, 23.53],
  247. '香港特别行政区': [114.1, 22.2]
  248. };
  249. $('.select').on('blur', function () {
  250. $(this).find('.select-ul').hide();
  251. })
  252. //下拉框点击出现下拉框内容
  253. $('.select-div').on('click', function () {
  254. if ($(this).siblings('.select-ul').is(":hidden")) {
  255. $(this).siblings('.select-ul').show();
  256. } else {
  257. $(this).siblings('.select-ul').hide();
  258. }
  259. })
  260. $('.select-ul').on('click', 'li', function () {
  261. $(this).addClass('active').siblings('li').removeClass('active').parent().hide().siblings('.select-div').html($(this).html());
  262. var parentDiv = $(this).parent().parent().parent();
  263. })
  264. //鼠标滑动到按钮,按钮内容变成白色
  265. var imgName;
  266. $('.title-box').children('button').hover(function () {
  267. imgName = $(this).children('img').attr('src').split('.png')[0];
  268. $(this).children('img').attr('src', imgName + '_on.png');
  269. }, function () {
  270. $(this).children('img').attr('src', imgName + '.png');
  271. });
  272. var startColor = ['#0e94eb', '#c440ef', '#efb013', '#2fda07', '#d8ef13', '#2e4af8', '#0eebc4', '#f129b1', '#17defc', '#f86363'];
  273. var borderStartColor = ['#0077c5', '#a819d7', '#c99002', '#24bc00', '#b6cb04', '#112ee2', '#00bd9c', '#ce078f', '#00b2cd', '#ec3c3c'];
  274. //入库量占比,带边框效果的饼图
  275. function chart1() {
  276. //data 为模拟数据
  277. var data = [{
  278. name: '顺丰',
  279. value: 192581,
  280. percent: '30.8721',
  281. }, {
  282. name: '京东',
  283. value: 215635,
  284. percent: '34.076',
  285. }, {
  286. name: 'EMS',
  287. value: 224585,
  288. percent: '35.49',
  289. }];
  290. var myChart = echarts.init(document.getElementById('pie'));
  291. var myChart1 = echarts.init(document.getElementById('pie1'));
  292. window.addEventListener('resize', function () {
  293. myChart.resize();
  294. myChart1.resize();
  295. });
  296. var str = '';
  297. for (var i = 0; i < data.length; i++) {
  298. str += '<p><span><i class="legend" style="background:' + startColor[i] + '"></i></span>' + data[i].name + '<span class="pie-number" style="color:' + startColor[i] + '">' + data[i].value + '</span>' + Number(data[i].percent).toFixed(2) + '%</p>';
  299. }
  300. $('.pie-data').append(str);
  301. function deepCopy(obj) {
  302. if (typeof obj !== 'object') {
  303. return obj;
  304. }
  305. var newobj = {};
  306. for (var attr in obj) {
  307. newobj[attr] = obj[attr];
  308. }
  309. return newobj;
  310. }
  311. var xData = [],
  312. yData = [];
  313. data.map((a, b) => {
  314. xData.push(a.name);
  315. yData.push(a.value);
  316. });
  317. var RealData = [];
  318. var borderData = [];
  319. data.map((item, index) => {
  320. var newobj = deepCopy(item);
  321. var newobj1 = deepCopy(item);
  322. RealData.push(newobj);
  323. borderData.push(newobj1);
  324. });
  325. RealData.map((item, index) => {
  326. item.itemStyle = {
  327. normal: {
  328. color: {
  329. type: 'linear',
  330. x: 0,
  331. y: 0,
  332. x2: 0,
  333. y2: 1,
  334. colorStops: [{
  335. offset: 0,
  336. color: startColor[index] // 0% 处的颜色
  337. }, {
  338. offset: 1,
  339. color: startColor[index] // 100% 处的颜色
  340. }],
  341. globalCoord: false // 缺省为 false
  342. },
  343. }
  344. }
  345. });
  346. borderData.map((item, index) => {
  347. item.itemStyle = {
  348. normal: {
  349. color: {
  350. type: 'linear',
  351. x: 0,
  352. y: 0,
  353. x2: 0,
  354. y2: 1,
  355. colorStops: [{
  356. offset: 0,
  357. color: borderStartColor[index] // 0% 处的颜色
  358. }, {
  359. offset: 1,
  360. color: borderStartColor[index] // 100% 处的颜色
  361. }],
  362. globalCoord: false // 缺省为 false
  363. },
  364. }
  365. }
  366. });
  367. var option = {
  368. tooltip: {
  369. trigger: 'item',
  370. // position: ['30%', '50%'],
  371. confine: true,
  372. formatter: "{a} <br/>{b}: {c} ({d}%)"
  373. },
  374. series: [
  375. // 主要展示层的
  376. {
  377. radius: ['50%', '85%'],
  378. center: ['50%', '50%'],
  379. type: 'pie',
  380. label: {
  381. normal: {
  382. show: false
  383. },
  384. emphasis: {
  385. show: false
  386. }
  387. },
  388. labelLine: {
  389. normal: {
  390. show: false
  391. },
  392. emphasis: {
  393. show: false
  394. }
  395. },
  396. name: "派件入库量占比内容",
  397. data: RealData
  398. },
  399. // 边框的设置
  400. {
  401. radius: ['45%', '50%'],
  402. center: ['50%', '50%'],
  403. type: 'pie',
  404. label: {
  405. normal: {
  406. show: false
  407. },
  408. emphasis: {
  409. show: false
  410. }
  411. },
  412. labelLine: {
  413. normal: {
  414. show: false
  415. },
  416. emphasis: {
  417. show: false
  418. }
  419. },
  420. animation: false,
  421. tooltip: {
  422. show: false
  423. },
  424. data: borderData
  425. }
  426. ]
  427. };
  428. myChart.setOption(option);
  429. myChart1.setOption(option);
  430. }
  431. chart1()
  432. //----------------------派件入库量占比内容end---------------
  433. //------------广东省寄派件数据内容---------------
  434. //点击筛选按钮
  435. $('#filBtn').on('click', function () {
  436. if ($('#filCon').is(":hidden")) {
  437. $('#filCon').attr('style', 'display:flex');
  438. } else {
  439. $('#filCon').hide();
  440. }
  441. })
  442. //点击筛选按钮end
  443. function chart2(chartType) {
  444. var data = [
  445. {
  446. name: '广州市',
  447. value: 120057.34
  448. },
  449. {
  450. name: '韶关市',
  451. value: 15477.48
  452. },
  453. {
  454. name: '深圳市',
  455. value: 131686.1
  456. },
  457. {
  458. name: '珠海市',
  459. value: 6992.6
  460. },
  461. {
  462. name: '汕头市',
  463. value: 44045.49
  464. },
  465. {
  466. name: '佛山市',
  467. value: 40689.64
  468. },
  469. {
  470. name: '江门市',
  471. value: 37659.78
  472. },
  473. {
  474. name: '湛江市',
  475. value: 45180.97
  476. },
  477. {
  478. name: '茂名市',
  479. value: 5204.26
  480. },
  481. {
  482. name: '肇庆市',
  483. value: 21900.9
  484. },
  485. {
  486. name: '惠州市',
  487. value: 4918.26
  488. },
  489. {
  490. name: '梅州市',
  491. value: 5881.84
  492. },
  493. {
  494. name: '汕尾市',
  495. value: 4178.01
  496. },
  497. {
  498. name: '河源市',
  499. value: 2227.92
  500. },
  501. {
  502. name: '阳江市',
  503. value: 2180.98
  504. },
  505. {
  506. name: '清远市',
  507. value: 9172.94
  508. },
  509. {
  510. name: '东莞市',
  511. value: 3368
  512. },
  513. {
  514. name: '中山市',
  515. value: 306.98
  516. },
  517. {
  518. name: '潮州市',
  519. value: 810.66
  520. },
  521. {
  522. name: '揭阳市',
  523. value: 542.2
  524. },
  525. {
  526. name: '云浮市',
  527. value: 256.38
  528. }]
  529. var myChart = echarts.init(document.getElementById('gdMap'));
  530. var myCharts = echarts.init(document.getElementById('gdMaps'));
  531. window.addEventListener('resize', function () {
  532. myChart.resize();
  533. myCharts.resize();
  534. });
  535. var yMax = 0;
  536. for (var j = 0; j < data.length; j++) {
  537. if (yMax < data[j].value) {
  538. yMax = data[j].value;
  539. }
  540. }
  541. myChart.hideLoading();
  542. myCharts.hideLoading();
  543. var option = {
  544. animation: true,
  545. tooltip: {
  546. show: true
  547. },
  548. visualMap: {
  549. min: 0,
  550. max: yMax,
  551. text: ['高', '低'],
  552. orient: 'horizontal',
  553. itemWidth: 15,
  554. itemHeight: 200,
  555. right: 0,
  556. bottom: 30,
  557. inRange: {
  558. color: ['#75ddff', '#0e94eb']
  559. },
  560. textStyle: {
  561. color: 'white'
  562. }
  563. },
  564. series: [
  565. {
  566. name: '数据名称',
  567. type: 'map',
  568. mapType: '广东',
  569. selectedMode: 'multiple',
  570. tooltip: {
  571. trigger: 'item',
  572. formatter: '{b}<br/>{c} (件)'
  573. },
  574. itemStyle: {
  575. normal: {
  576. borderWidth: 1,
  577. borderColor: '#0e94eb',
  578. label: {
  579. show: false
  580. }
  581. },
  582. emphasis: { // 也是选中样式
  583. borderWidth: 1,
  584. borderColor: '#fff',
  585. backgroundColor: 'red',
  586. label: {
  587. show: true,
  588. textStyle: {
  589. color: '#fff'
  590. }
  591. }
  592. }
  593. },
  594. data: data,
  595. }
  596. ]
  597. };
  598. myChart.setOption(option);
  599. myCharts.setOption(option);
  600. }
  601. chart2('');
  602. //------------广东省寄派件数据内容end---------------
  603. //cityName全国的省级行政区域数据
  604. var cityName = [{
  605. "ProID": 1,
  606. "name": "北京",
  607. "ProSort": 1,
  608. "firstP": "B",
  609. "ProRemark": "直辖市"
  610. }, {
  611. "ProID": 2,
  612. "name": "天津",
  613. "ProSort": 2,
  614. "firstP": "T",
  615. "ProRemark": "直辖市"
  616. }, {
  617. "ProID": 3,
  618. "name": "河北",
  619. "ProSort": 5,
  620. "firstP": "H",
  621. "ProRemark": "省份"
  622. }, {
  623. "ProID": 4,
  624. "name": "山西",
  625. "ProSort": 6,
  626. "firstP": "S",
  627. "ProRemark": "省份"
  628. }, {
  629. "ProID": 5,
  630. "name": "内蒙古",
  631. "ProSort": 32,
  632. "firstP": "N",
  633. "ProRemark": "自治区"
  634. }, {
  635. "ProID": 6,
  636. "name": "辽宁",
  637. "ProSort": 8,
  638. "firstP": "L",
  639. "ProRemark": "省份"
  640. }, {
  641. "ProID": 7,
  642. "name": "吉林",
  643. "ProSort": 9,
  644. "firstP": "J",
  645. "ProRemark": "省份"
  646. }, {
  647. "ProID": 8,
  648. "name": "黑龙江",
  649. "ProSort": 10,
  650. "firstP": "H",
  651. "ProRemark": "省份"
  652. }, {
  653. "ProID": 9,
  654. "name": "上海",
  655. "ProSort": 3,
  656. "firstP": "S",
  657. "ProRemark": "直辖市"
  658. }, {
  659. "ProID": 10,
  660. "name": "江苏",
  661. "ProSort": 11,
  662. "firstP": "J",
  663. "ProRemark": "省份"
  664. }, {
  665. "ProID": 11,
  666. "name": "浙江",
  667. "ProSort": 12,
  668. "firstP": "Z",
  669. "ProRemark": "省份"
  670. }, {
  671. "ProID": 12,
  672. "name": "安徽",
  673. "ProSort": 13,
  674. "firstP": "A",
  675. "ProRemark": "省份"
  676. }, {
  677. "ProID": 13,
  678. "name": "福建",
  679. "ProSort": 14,
  680. "firstP": "F",
  681. "ProRemark": "省份"
  682. }, {
  683. "ProID": 14,
  684. "name": "江西",
  685. "ProSort": 15,
  686. "firstP": "J",
  687. "ProRemark": "省份"
  688. }, {
  689. "ProID": 15,
  690. "name": "山东",
  691. "ProSort": 16,
  692. "firstP": "S",
  693. "ProRemark": "省份"
  694. }, {
  695. "ProID": 16,
  696. "name": "河南",
  697. "ProSort": 17,
  698. "firstP": "H",
  699. "ProRemark": "省份"
  700. }, {
  701. "ProID": 17,
  702. "name": "湖北",
  703. "ProSort": 18,
  704. "firstP": "H",
  705. "ProRemark": "省份"
  706. }, {
  707. "ProID": 18,
  708. "name": "湖南",
  709. "ProSort": 19,
  710. "firstP": "H",
  711. "ProRemark": "省份"
  712. }, {
  713. "ProID": 19,
  714. "name": "广东",
  715. "ProSort": 20,
  716. "firstP": "G",
  717. "ProRemark": "省份"
  718. }, {
  719. "ProID": 20,
  720. "name": "海南",
  721. "ProSort": 24,
  722. "firstP": "H",
  723. "ProRemark": "省份"
  724. }, {
  725. "ProID": 21,
  726. "name": "广西",
  727. "ProSort": 28,
  728. "firstP": "G",
  729. "ProRemark": "自治区"
  730. }, {
  731. "ProID": 22,
  732. "name": "甘肃",
  733. "ProSort": 21,
  734. "firstP": "G",
  735. "ProRemark": "省份"
  736. }, {
  737. "ProID": 23,
  738. "name": "陕西省",
  739. "ProSort": 27,
  740. "firstP": "S",
  741. "ProRemark": "省份"
  742. }, {
  743. "ProID": 24,
  744. "name": "新疆维吾尔",
  745. "ProSort": 31,
  746. "firstP": "X",
  747. "ProRemark": "自治区"
  748. }, {
  749. "ProID": 25,
  750. "name": "青海",
  751. "ProSort": 26,
  752. "firstP": "Q",
  753. "ProRemark": "省份"
  754. }, {
  755. "ProID": 26,
  756. "name": "宁夏",
  757. "ProSort": 30,
  758. "firstP": "N",
  759. "ProRemark": "自治区"
  760. }, {
  761. "ProID": 27,
  762. "name": "重庆",
  763. "ProSort": 4,
  764. "firstP": "C",
  765. "ProRemark": "直辖市"
  766. }, {
  767. "ProID": 28,
  768. "name": "四川省",
  769. "ProSort": 22,
  770. "firstP": "S",
  771. "ProRemark": "省份"
  772. }, {
  773. "ProID": 29,
  774. "name": "贵州省",
  775. "ProSort": 23,
  776. "firstP": "G",
  777. "ProRemark": "省份"
  778. }, {
  779. "ProID": 30,
  780. "name": "云南省",
  781. "ProSort": 25,
  782. "firstP": "Y",
  783. "ProRemark": "省份"
  784. }, {
  785. "ProID": 31,
  786. "name": "西藏",
  787. "ProSort": 29,
  788. "firstP": "X",
  789. "ProRemark": "自治区"
  790. }, {
  791. "ProID": 32,
  792. "name": "台湾",
  793. "ProSort": 7,
  794. "firstP": "T",
  795. "ProRemark": "省份"
  796. }, {
  797. "ProID": 33,
  798. "name": "澳门",
  799. "ProSort": 33,
  800. "firstP": "A",
  801. "ProRemark": "特别行政区"
  802. }, {
  803. "ProID": 34,
  804. "name": "香港",
  805. "ProSort": 34,
  806. "firstP": "X",
  807. "ProRemark": "特别行政区"
  808. }]
  809. addCityBtn(cityName);
  810. function addCityBtn(data) {
  811. var li_con = '';
  812. for (var i = 0; i < data.length; i++) {
  813. li_con += '<li>' + data[i].name + '</li>'
  814. }
  815. $('#city').html(li_con);
  816. $('#citys').html(li_con);
  817. }
  818. $('.city-btn').on('click', 'li', function () {
  819. var str;
  820. var patt = [/[a-z]/i, /[a-e]/i, /[f-i]/i, /[k-o]/i, /[p-t]/i, /[u-z]/i];
  821. var index = $(this).index();
  822. var li_con = '';
  823. for (var i = 0; i < cityName.length; i++) {
  824. str = cityName[i].firstP;
  825. if (patt[index].test(str)) {
  826. li_con += '<li>' + cityName[i].name + '</li>'
  827. }
  828. }
  829. $(this).addClass('active').siblings('li').removeClass('active');
  830. if (index == 0) {
  831. $('#city').children().removeClass('active');
  832. if ($(this).parent().data('city') == 1) {
  833. $('.ranking-box').show();
  834. if ($("#barType").find('.active').data('value') == 1) {
  835. $('#titleQ').html('<span>全网</span>到珠海');
  836. } else if ($("#barType").find('.active').data('value') == 2) {
  837. $('#titleQ').html('珠海到<span>全网</span>')
  838. }
  839. $('#city').html(li_con);
  840. } else if ($(this).parent().data('city') == 2) {
  841. if ($('.cont-div').eq(0).css('visibility') != 'hidden') {
  842. $('.ranking-box').show();
  843. }
  844. if ($("#barTypes").find('.active').data('value') == 1) {
  845. $('#titleQs').html('<span>全网</span>到珠海');
  846. } else if ($("#barTypes").find('.active').data('value') == 2) {
  847. $('#titleQs').html('珠海到<span>全网</span>')
  848. }
  849. $('#citys').html(li_con);
  850. }
  851. } else {
  852. if ($(this).parent().data('city') == 1) {
  853. $('#city').html(li_con);
  854. } else if ($(this).parent().data('city') == 2) {
  855. $('#citys').html(li_con);
  856. }
  857. }
  858. })
  859. $('#city').on('click', 'li', function () {
  860. $(this).addClass('active').siblings('li').removeClass('active');
  861. $('.center-bottom .ranking-box').hide();
  862. if ($("#barType").find('.active').data('value') == 1) {
  863. $('#titleQ').html('<span>' + $(this).html() + '</span>到珠海');
  864. } else if ($("#barType").find('.active').data('value') == 2) {
  865. $('#titleQ').html('珠海到<span>' + $(this).html() + '</span>')
  866. }
  867. })
  868. $('#citys').on('click', 'li', function () {
  869. $(this).addClass('active').siblings('li').removeClass('active');
  870. $('.pop-data .ranking-box').hide();
  871. if ($("#barTypes").find('.active').data('value') == 1) {
  872. $('#titleQs').html('<span>' + $(this).html() + '</span>到珠海');
  873. } else if ($("#barTypes").find('.active').data('value') == 2) {
  874. $('#titleQs').html('珠海到<span>' + $(this).html() + '</span>')
  875. }
  876. })
  877. //寄派件选择
  878. $("#barType").on('click', 'li', function () {
  879. $(this).addClass('active').siblings('li').removeClass('active');
  880. $('#barTitle').html($(this).html() + '数据');
  881. $('#tabBtn').data('state', $(this).data('value'));
  882. if ($(this).data('value') == 1) {
  883. $('.table1').eq(0).show().siblings('table').hide();
  884. } else if ($(this).data('value') == 2) {
  885. $('.table1').eq(1).show().siblings('table').hide();
  886. }
  887. chart3($(this).data('value'), 0);
  888. chart4(chart4Data, $(this).data('value'), 0);
  889. })
  890. //寄派件选择
  891. $("#barTypes").on('click', 'li', function () {
  892. $(this).addClass('active').siblings('li').removeClass('active');
  893. $('#barTitles').html($(this).html() + '数据');
  894. $('#tabBtns').data('state', $(this).data('value'));
  895. if ($(this).data('value') == 1) {
  896. $('.table2').eq(0).show().siblings('table').hide();
  897. } else if ($(this).data('value') == 2) {
  898. $('.table2').eq(1).show().siblings('table').hide();
  899. }
  900. chart3($(this).data('value'), 1);
  901. chart4(chart4Data, $(this).data('value'), 1);
  902. })
  903. function chart3(type, chartType) {
  904. var myChart = echarts.init(document.getElementById('chart3'));
  905. var myCharts = echarts.init(document.getElementById('chart3s'));
  906. window.addEventListener('resize', function () {
  907. myChart.resize();
  908. myCharts.resize();
  909. });
  910. // 设置背景阴影的参数,获取数据的最大值
  911. var data; //横坐标数据,不动
  912. var data_; //模拟数据
  913. if (type == 1) {
  914. data_ = [{
  915. name: "入库件",
  916. value: 584
  917. },
  918. {
  919. name: "滞留件",
  920. value: 152
  921. }, {
  922. name: "丢失件",
  923. value: 100
  924. },
  925. {
  926. name: "正常件",
  927. value: 689
  928. },
  929. {
  930. name: "派送件",
  931. value: 200
  932. }, {
  933. name: "自提件",
  934. value: 121
  935. }, {
  936. name: "退签件",
  937. value: 92
  938. }]
  939. } else if (type == 2) {
  940. data_ = [{
  941. name: "入库件",
  942. value: 568
  943. }, {
  944. name: "丢失件",
  945. value: 287
  946. }, {
  947. name: "滞留件",
  948. value: 120
  949. },
  950. {
  951. name: "撤销件",
  952. value: 152
  953. },
  954. {
  955. name: "出库件",
  956. value: 125
  957. }, {
  958. name: "正常件",
  959. value: 122
  960. }]
  961. }
  962. var series_data; //绘制图表的数据
  963. //绘制图表
  964. var yMax = 0;
  965. for (var j = 0; j < data_.length; j++) {
  966. if (yMax < data_[j].value) {
  967. yMax = data_[j].value;
  968. }
  969. }
  970. var dataShadow = [];
  971. for (var i = 0; i < 10; i++) {
  972. dataShadow.push(yMax * 2);
  973. }
  974. if (type == 1) {
  975. data = ['入库件', '在库件', '出库件', '退签件', '丢失件'];
  976. if (chartType == '') {
  977. $(' .dph-data1').html(data_[0].value);
  978. $(' .dph-data2').html(data_[1].value + data_[3].value);
  979. $(' .dph-data3').html(data_[3].value);
  980. $(' .dph-data4').html(data_[2].value);
  981. $(' .dph-data5').html(data_[1].value);
  982. $(' .dph-data6').html(data_[4].value + data_[5].value);
  983. $(' .dph-data7').html(data_[4].value);
  984. $(' .dph-data8').html(data_[5].value);
  985. $(' .dph-data9').html(data_[6].value);
  986. } else if (chartType == 0) {
  987. $('.table1 .dph-data1').html(data_[0].value);
  988. $('.table1 .dph-data2').html(data_[1].value + data_[3].value);
  989. $('.table1 .dph-data3').html(data_[3].value);
  990. $('.table1 .dph-data4').html(data_[2].value);
  991. $('.table1 .dph-data5').html(data_[1].value);
  992. $('.table1 .dph-data6').html(data_[4].value + data_[5].value);
  993. $('.table1 .dph-data7').html(data_[4].value);
  994. $('.table1 .dph-data8').html(data_[5].value);
  995. $('.table1 .dph-data9').html(data_[6].value);
  996. } else if (chartType == 1) {
  997. $('.table2 .dph-data1').html(data_[0].value);
  998. $('.table2 .dph-data2').html(data_[1].value + data_[3].value);
  999. $('.table2 .dph-data3').html(data_[3].value);
  1000. $('.table2 .dph-data4').html(data_[2].value);
  1001. $('.table2 .dph-data5').html(data_[1].value);
  1002. $('.table2 .dph-data6').html(data_[4].value + data_[5].value);
  1003. $('.table2 .dph-data7').html(data_[4].value);
  1004. $('.table2 .dph-data8').html(data_[5].value);
  1005. $('.table2 .dph-data9').html(data_[6].value);
  1006. }
  1007. series_data = [
  1008. { // For shadow
  1009. type: 'bar',
  1010. barWidth: 20,
  1011. xAxisIndex: 2,
  1012. tooltip: {
  1013. show: false
  1014. },
  1015. itemStyle: {
  1016. normal: {
  1017. color: 'rgba(14, 148, 235, 0.102)'
  1018. }
  1019. },
  1020. data: dataShadow,
  1021. animation: false
  1022. },
  1023. {
  1024. name: '入库件',
  1025. type: 'bar',
  1026. barGap: '-100%',
  1027. barWidth: '40%',
  1028. xAxisIndex: 1,
  1029. itemStyle: {
  1030. normal: {
  1031. color: '#0e94eb'
  1032. },
  1033. emphasis: {
  1034. opacity: 1
  1035. }
  1036. },
  1037. data: [data_[0], 0, 0, 0, 0],
  1038. },
  1039. {
  1040. name: '滞留件',
  1041. type: 'bar',
  1042. stack: '在库件',
  1043. xAxisIndex: 1,
  1044. itemStyle: {
  1045. normal: {
  1046. color: 'rgba(239,176,19,.9)'
  1047. },
  1048. emphasis: {
  1049. opacity: 1
  1050. }
  1051. },
  1052. data: [0, data_[1], 0, 0, 0],
  1053. },
  1054. {
  1055. name: '丢失件',
  1056. type: 'bar',
  1057. xAxisIndex: 1,
  1058. itemStyle: {
  1059. normal: {
  1060. color: 'rgba(239,176,19,0.4)'
  1061. },
  1062. emphasis: {
  1063. opacity: 1
  1064. }
  1065. },
  1066. data: [0, 0, 0, 0, data_[2]],
  1067. },
  1068. {
  1069. name: '正常件',
  1070. type: 'bar',
  1071. stack: '在库件',
  1072. xAxisIndex: 1,
  1073. itemStyle: {
  1074. normal: {
  1075. color: 'rgba(239,176,19,0.3)'
  1076. },
  1077. emphasis: {
  1078. opacity: 1
  1079. }
  1080. },
  1081. data: [0, data_[3], 0, 0, 0],
  1082. },
  1083. {
  1084. name: '派送件',
  1085. type: 'bar',
  1086. stack: '出库件',
  1087. xAxisIndex: 1,
  1088. itemStyle: {
  1089. normal: {
  1090. color: 'rgba(196,64,239,0.8)'
  1091. },
  1092. emphasis: {
  1093. opacity: 1
  1094. }
  1095. },
  1096. data: [0, 0, data_[4], 0, 0],
  1097. },
  1098. {
  1099. name: '自提件',
  1100. type: 'bar',
  1101. stack: '出库件',
  1102. xAxisIndex: 1,
  1103. itemStyle: {
  1104. normal: {
  1105. color: 'rgba(196,64,239,0.4)'
  1106. },
  1107. emphasis: {
  1108. opacity: 1
  1109. }
  1110. },
  1111. data: [0, 0, data_[5], 0, 0],
  1112. },
  1113. {
  1114. name: '退签件',
  1115. type: 'bar',
  1116. xAxisIndex: 1,
  1117. itemStyle: {
  1118. normal: {
  1119. color: 'rgba(219,44,44,0.8)'
  1120. },
  1121. emphasis: {
  1122. opacity: 1
  1123. }
  1124. },
  1125. data: [0, 0, 0, data_[6], 0],
  1126. }
  1127. ]
  1128. } else if (type == 2) {
  1129. data = ['入库件', '在库件', '出库件', '丢失件', '撤销件'];
  1130. if (chartType == '') {
  1131. $('.mail-data1').html(data_[0].value);
  1132. $('.mail-data2').html(data_[2].value + data_[5].value);
  1133. $('.mail-data3').html(data_[1].value);
  1134. $('.mail-data4').html(data_[2].value);
  1135. $('.mail-data5').html(data_[3].value);
  1136. $('.mail-data6').html(data_[4].value);
  1137. $('.mail-data7').html(data_[5].value);
  1138. } else if (chartType == 0) {
  1139. $('.table1 .mail-data1').html(data_[0].value);
  1140. $('.table1 .mail-data2').html(data_[2].value + data_[5].value);
  1141. $('.table1 .mail-data3').html(data_[1].value);
  1142. $('.table1 .mail-data4').html(data_[2].value);
  1143. $('.table1 .mail-data5').html(data_[3].value);
  1144. $('.table1 .mail-data6').html(data_[4].value);
  1145. $('.table1 .mail-data7').html(data_[5].value);
  1146. } else if (chartType == 1) {
  1147. $('.table2 .mail-data1').html(data_[0].value);
  1148. $('.table2 .mail-data2').html(data_[2].value + data_[5].value);
  1149. $('.table2 .mail-data3').html(data_[1].value);
  1150. $('.table2 .mail-data4').html(data_[2].value);
  1151. $('.table2 .mail-data5').html(data_[3].value);
  1152. $('.table2 .mail-data6').html(data_[4].value);
  1153. $('.table2 .mail-data7').html(data_[5].value);
  1154. }
  1155. series_data = [
  1156. { // For shadow
  1157. type: 'bar',
  1158. barWidth: 20,
  1159. xAxisIndex: 2,
  1160. tooltip: {
  1161. show: false
  1162. },
  1163. itemStyle: {
  1164. normal: {
  1165. color: 'rgba(14, 148, 235, 0.102)'
  1166. }
  1167. },
  1168. data: dataShadow,
  1169. animation: false
  1170. },
  1171. {
  1172. name: '入库件',
  1173. barGap: '-100%',
  1174. barWidth: '40%',
  1175. type: 'bar',
  1176. xAxisIndex: 1,
  1177. itemStyle: {
  1178. normal: {
  1179. color: '#0e94eb'
  1180. },
  1181. emphasis: {
  1182. opacity: 1
  1183. }
  1184. },
  1185. data: [data_[0], 0, 0, 0, 0],
  1186. },
  1187. {
  1188. name: '正常件',
  1189. type: 'bar',
  1190. stack: '在库件',
  1191. xAxisIndex: 1,
  1192. itemStyle: {
  1193. normal: {
  1194. color: 'rgba(239,176,19,.9)'
  1195. },
  1196. emphasis: {
  1197. opacity: 1
  1198. }
  1199. },
  1200. data: [0, data_[5], 0, 0, 0, 0],
  1201. },
  1202. {
  1203. name: '丢失件',
  1204. type: 'bar',
  1205. xAxisIndex: 1,
  1206. itemStyle: {
  1207. normal: {
  1208. color: 'rgba(239,176,19,.9)'
  1209. },
  1210. emphasis: {
  1211. opacity: 1
  1212. }
  1213. },
  1214. data: [0, 0, 0, data_[1], 0],
  1215. },
  1216. {
  1217. name: '滞留件',
  1218. type: 'bar',
  1219. xAxisIndex: 1,
  1220. stack: '在库件',
  1221. itemStyle: {
  1222. normal: {
  1223. color: 'rgba(239,176,19,0.4)'
  1224. },
  1225. emphasis: {
  1226. opacity: 1
  1227. }
  1228. },
  1229. data: [0, data_[2], 0, 0, 0],
  1230. },
  1231. {
  1232. name: '撤销件',
  1233. type: 'bar',
  1234. xAxisIndex: 1,
  1235. itemStyle: {
  1236. normal: {
  1237. color: 'rgba(239,176,19,0.3)'
  1238. },
  1239. emphasis: {
  1240. opacity: 1
  1241. }
  1242. },
  1243. data: [0, 0, 0, 0, data_[3]],
  1244. },
  1245. {
  1246. name: '出库件',
  1247. type: 'bar',
  1248. xAxisIndex: 1,
  1249. stack: '退签件',
  1250. itemStyle: {
  1251. normal: {
  1252. color: 'rgba(196,64,239,0.8)'
  1253. },
  1254. emphasis: {
  1255. opacity: 1
  1256. }
  1257. },
  1258. data: [0, 0, data_[4], 0, 0],
  1259. }
  1260. ]
  1261. }
  1262. var option = {
  1263. title: '',
  1264. grid: {
  1265. top: '10%',
  1266. containLabel: true
  1267. },
  1268. tooltip: {
  1269. show: true
  1270. },
  1271. xAxis: [{
  1272. type: 'category',
  1273. show: false,
  1274. data: data,
  1275. axisLabel: {
  1276. textStyle: {
  1277. color: '#fff'
  1278. }
  1279. }
  1280. },
  1281. {
  1282. type: 'category',
  1283. position: "bottom",
  1284. data: data,
  1285. boundaryGap: true,
  1286. // offset: 40,
  1287. axisTick: {
  1288. show: false
  1289. },
  1290. axisLine: {
  1291. show: false
  1292. },
  1293. axisLabel: {
  1294. textStyle: {
  1295. color: '#fff'
  1296. }
  1297. }
  1298. },
  1299. {
  1300. show: false,
  1301. data: dataShadow,
  1302. axisLabel: {
  1303. inside: true,
  1304. textStyle: {
  1305. color: '#fff'
  1306. }
  1307. },
  1308. axisTick: {
  1309. show: false
  1310. },
  1311. axisLine: {
  1312. show: false
  1313. },
  1314. z: 10
  1315. },
  1316. ],
  1317. yAxis: [{
  1318. show: true,
  1319. splitLine: {
  1320. show: false,
  1321. lineStyle: {
  1322. color: "#0e94eb"
  1323. }
  1324. },
  1325. axisTick: {
  1326. show: false
  1327. },
  1328. axisLine: {
  1329. show: false
  1330. },
  1331. axisLabel: {
  1332. show: true,
  1333. color: '#0e94eb'
  1334. }
  1335. }, {
  1336. show: false,
  1337. type: "value",
  1338. nameTextStyle: {
  1339. color: '#0e94eb'
  1340. },
  1341. axisLabel: {
  1342. color: '#0e94eb'
  1343. },
  1344. splitLine: {
  1345. show: false
  1346. },
  1347. axisLine: {
  1348. show: false
  1349. },
  1350. axisTick: {
  1351. show: false
  1352. }
  1353. },
  1354. {
  1355. axisLine: {
  1356. show: false
  1357. },
  1358. axisTick: {
  1359. show: false
  1360. },
  1361. axisLabel: {
  1362. textStyle: {
  1363. color: '#999'
  1364. }
  1365. }
  1366. }],
  1367. // color: ['#e54035'],
  1368. series: series_data
  1369. }
  1370. if (chartType === '') {
  1371. myChart.clear();
  1372. myCharts.clear();
  1373. myChart.setOption(option);
  1374. myCharts.setOption(option);
  1375. } else if (chartType === 0) {
  1376. myChart.clear();
  1377. myChart.setOption(option);
  1378. } else if (chartType === 1) {
  1379. myCharts.clear();
  1380. myCharts.setOption(option);
  1381. }
  1382. }
  1383. chart3(1, '')
  1384. //
  1385. //
  1386. //
  1387. $('#dateBtn').on('click', function () {
  1388. if ($('#timeBox').is(":hidden")) {
  1389. $('#timeBox').show();
  1390. document.getElementById('timeBox').focus();
  1391. } else {
  1392. $('#timeBox').hide();
  1393. }
  1394. })
  1395. $('#dateBtns').on('click', function () {
  1396. if ($('#timeBoxs').is(":hidden")) {
  1397. $('#timeBoxs').show();
  1398. document.getElementById('timeBoxs').focus();
  1399. } else {
  1400. $('#timeBoxs').hide();
  1401. }
  1402. })
  1403. $('#switchBtn').on('click', 'span', function () {
  1404. $(this).addClass('active').siblings().removeClass('active');
  1405. if ($(this).data('datatype') == 'income') {
  1406. $('#totalProfit').html('123,456.5元');
  1407. } else if ($(this).data('datatype') == 'expend') {
  1408. $('#totalProfit').html('32,111.4元');
  1409. }
  1410. })
  1411. $('#tabBtn').on('click', function () {
  1412. var _this = $(this);
  1413. if ($('.right-top').children('.chart-box').is(':hidden')) {
  1414. _this.children('span').html('图表');
  1415. $('.right-top').children('.chart-box').show().siblings('.data-box').hide();
  1416. } else {
  1417. _this.children('span').html('表格');
  1418. $('.right-top').children('.data-box').show().siblings('.chart-box').hide();
  1419. if (_this.data('state') == 1) {
  1420. $('.table1').eq(0).show().siblings('table').hide();
  1421. } else if (_this.data('state') == 2) {
  1422. $('.table1').eq(1).show().siblings('table').hide();
  1423. }
  1424. }
  1425. })
  1426. $('#tabBtns').on('click', function () {
  1427. var _this = $(this);
  1428. if (_this.siblings('.pop-chart').is(':hidden')) {
  1429. _this.children('span').html('图表');
  1430. _this.siblings('.pop-chart').show().siblings('.data-box').hide();
  1431. } else {
  1432. _this.children('span').html('表格');
  1433. _this.siblings('.data-box').show().siblings('.chart-box').hide();
  1434. if (_this.data('state') == 1) {
  1435. $('.table2').eq(0).show().siblings('table').hide();
  1436. } else if (_this.data('state') == 2) {
  1437. $('.table2').eq(1).show().siblings('table').hide();
  1438. }
  1439. }
  1440. })
  1441. //时间选择器
  1442. var startV = '';
  1443. var endV = '';
  1444. laydate.skin('danlan');
  1445. var startTime = {
  1446. elem: '#startTime',
  1447. format: 'YYYY-MM-DD',
  1448. min: '1997-01-01', //设定最小日期为当前日期
  1449. max: laydate.now(), //最大日期
  1450. istime: true,
  1451. istoday: true,
  1452. fixed: false,
  1453. choose: function (datas) {
  1454. startV = datas;
  1455. endTime.min = datas; //开始日选好后,重置结束日的最小日期
  1456. }
  1457. };
  1458. var endTime = {
  1459. elem: '#endTime',
  1460. format: 'YYYY-MM-DD',
  1461. min: laydate.now(),
  1462. max: laydate.now(),
  1463. istime: true,
  1464. istoday: true,
  1465. fixed: false,
  1466. choose: function (datas) {
  1467. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  1468. endV = datas;
  1469. }
  1470. };
  1471. laydate(startTime);
  1472. laydate(endTime);
  1473. //时间选择器
  1474. var startVs = '';
  1475. var endVs = '';
  1476. laydate.skin('danlan');
  1477. var startTimes = {
  1478. elem: '#startTimes',
  1479. format: 'YYYY-MM-DD',
  1480. min: '1997-01-01', //设定最小日期为当前日期
  1481. max: '2099-06-16', //最大日期
  1482. istime: true,
  1483. istoday: true,
  1484. fixed: false,
  1485. choose: function (datas) {
  1486. startVs = datas;
  1487. endTimes.min = datas; //开始日选好后,重置结束日的最小日期
  1488. setQgData($('#barTypes').parent().parent(), 1);
  1489. }
  1490. };
  1491. var endTimes = {
  1492. elem: '#endTimes',
  1493. format: 'YYYY-MM-DD',
  1494. min: laydate.now(),
  1495. max: laydate.now(),
  1496. istime: true,
  1497. istoday: true,
  1498. fixed: false,
  1499. choose: function (datas) {
  1500. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  1501. endVs = datas;
  1502. setQgData($('#barTypes').parent().parent(), 1);
  1503. }
  1504. };
  1505. laydate(startTimes);
  1506. laydate(endTimes);
  1507. //点击时间选择器的时候更改样式
  1508. $('#endTime').on('click', function () {
  1509. dateCss();
  1510. })
  1511. $('#end').on('click', function () {
  1512. dateCss();
  1513. })
  1514. //更改日期插件的样式
  1515. function dateCss() {
  1516. var arr = $('#laydate_box').attr('style').split(';');
  1517. var cssStr =
  1518. 'position:absolute;right:0;';
  1519. for (var i = 0; i < arr.length; i++) {
  1520. if (arr[i].indexOf('top') != -1) {
  1521. cssStr += arr[i];
  1522. }
  1523. }
  1524. $('#laydate_box').attr('style', cssStr);
  1525. }
  1526. //chart4Data模拟数据
  1527. var chart4Data = [{
  1528. 'name': "天津市",
  1529. 'value': 178546
  1530. }, {
  1531. 'name': "湖南省",
  1532. 'value': 125687
  1533. }, {
  1534. 'name': "福建省",
  1535. 'value': 78452
  1536. }, {
  1537. 'name': "北京市",
  1538. 'value': 57841
  1539. }, {
  1540. 'name': "江苏省",
  1541. 'value': 45879
  1542. }, {
  1543. 'name': "海南",
  1544. 'value': 28584
  1545. }, {
  1546. 'name': "四川省",
  1547. 'value': 14852
  1548. }, {
  1549. 'name': "浙江省",
  1550. 'value': 12589
  1551. }, {
  1552. 'name': "重庆市",
  1553. 'value': 5261
  1554. }, {
  1555. 'name': "香港特别行政区",
  1556. 'value': 2563
  1557. }, {
  1558. 'name': "内蒙古",
  1559. 'value': 856
  1560. }]
  1561. chart4(chart4Data, 1, '');
  1562. function chart4(data, type, chartType) {
  1563. var str = '<li><span></span><p>城市</p><p>派件</p></li>';
  1564. for (var i = 0; i < 10; i++) {
  1565. str += '<li><span>' + (i + 1) + '</span><p>' + data[i].name + '</p><p>' + data[i].value + '</p></li>';
  1566. }
  1567. var s_data = [];
  1568. var myChart = echarts.init(document.getElementById('chart4'));
  1569. var myCharts = echarts.init(document.getElementById('chart4s'));
  1570. window.addEventListener('resize', function () {
  1571. myChart.resize();
  1572. myCharts.resize();
  1573. });
  1574. function formtGCData(geoData, data, srcNam, dest) {
  1575. var tGeoDt = [];
  1576. if (dest) {
  1577. for (var i = 0, len = data.length; i < len; i++) {
  1578. if (srcNam != data[i].name) {
  1579. tGeoDt.push({
  1580. coords: [geoData[srcNam], geoData[data[i].name]],
  1581. });
  1582. }
  1583. }
  1584. } else {
  1585. for (var i = 0, len = data.length; i < len; i++) {
  1586. if (srcNam != data[i].name) {
  1587. tGeoDt.push({
  1588. coords: [geoData[data[i].name], geoData[srcNam]],
  1589. });
  1590. }
  1591. }
  1592. }
  1593. return tGeoDt;
  1594. }
  1595. function formtVData(geoData, data, srcNam) {
  1596. var tGeoDt = [];
  1597. for (var i = 0, len = data.length; i < len; i++) {
  1598. var tNam = data[i].name
  1599. if (srcNam != tNam) {
  1600. tGeoDt.push({
  1601. name: tNam,
  1602. symbolSize: 2,
  1603. itemStyle: {
  1604. normal: {
  1605. color: '#ffeb40',
  1606. }
  1607. },
  1608. value: geoData[tNam]
  1609. });
  1610. }
  1611. }
  1612. tGeoDt.push({
  1613. name: srcNam,
  1614. value: geoData[srcNam],
  1615. symbolSize: 5,
  1616. itemStyle: {
  1617. normal: {
  1618. color: '#2ef358',
  1619. }
  1620. }
  1621. });
  1622. return tGeoDt;
  1623. }
  1624. var planePath = 'pin';
  1625. if (type == 2) {
  1626. s_data.push({
  1627. type: 'lines',
  1628. zlevel: 2,
  1629. mapType: 'china',
  1630. symbol: 'none',
  1631. effect: {
  1632. show: true,
  1633. period: 1.5,
  1634. trailLength: 0.1,
  1635. // color: '#ffeb40',
  1636. color: '#2ef358',
  1637. symbol: planePath,
  1638. symbolSize: 6,
  1639. trailLength: 0.5
  1640. },
  1641. lineStyle: {
  1642. normal: {
  1643. color: '#2ef358',
  1644. width: 1,
  1645. opacity: 0.4,
  1646. curveness: 0.2
  1647. }
  1648. },
  1649. data: formtGCData(geoCoordMap, data, '珠海', true)
  1650. })
  1651. } else if (type == 1) {
  1652. s_data.push({
  1653. type: 'lines',
  1654. zlevel: 2,
  1655. effect: {
  1656. show: true,
  1657. period: 1.5,
  1658. trailLength: 0.1,
  1659. // color: '#2ef358',
  1660. color: '#ffeb40',
  1661. symbol: planePath,
  1662. symbolSize: 6,
  1663. trailLength: 0.5
  1664. },
  1665. lineStyle: {
  1666. normal: {
  1667. color: '#ffeb40',
  1668. width: 1,
  1669. opacity: 0.4,
  1670. curveness: 0.2
  1671. }
  1672. },
  1673. data: formtGCData(geoCoordMap, data, '珠海', false)
  1674. }, {
  1675. type: 'effectScatter',
  1676. coordinateSystem: 'geo',
  1677. zlevel: 2,
  1678. rippleEffect: {
  1679. period: 4,
  1680. scale: 2.5,
  1681. brushType: 'stroke'
  1682. },
  1683. symbol: 'none',
  1684. symbolSize: 4,
  1685. itemStyle: {
  1686. normal: {
  1687. color: '#fff'
  1688. }
  1689. },
  1690. data: formtVData(geoCoordMap, data, '珠海')
  1691. })
  1692. }
  1693. var option = {
  1694. tooltip: {
  1695. trigger: 'item',
  1696. },
  1697. geo: {
  1698. map: 'china',
  1699. label: {
  1700. show: true,
  1701. position: 'insideLeft',
  1702. color: 'white',
  1703. fontSize: '10',
  1704. emphasis: {
  1705. show: true
  1706. }
  1707. },
  1708. roam: true,
  1709. silent: true,
  1710. itemStyle: {
  1711. normal: {
  1712. areaColor: 'transparent',
  1713. borderColor: '#0e94eb',
  1714. shadowBlur: 10,
  1715. shadowColor: '#0e94ea'
  1716. }
  1717. },
  1718. left: 10,
  1719. right: 10
  1720. },
  1721. series: s_data
  1722. };
  1723. if (chartType === '') {
  1724. $('.ranking-box').html(str);
  1725. myChart.setOption(option);
  1726. myCharts.setOption(option);
  1727. } else if (chartType === 0) {
  1728. $('.center-bottom .ranking-box').html(str);
  1729. myChart.setOption(option);
  1730. } else if (chartType === 1) {
  1731. $('.pop-data .ranking-box').html(str);
  1732. myCharts.setOption(option);
  1733. }
  1734. }
  1735. $('.close-pop').on('click', function () {
  1736. $(this).parent().parent().hide().find('.cont-div').attr('style', 'visibility: hidden');
  1737. })
  1738. $('#setBtn').on('click', function () {
  1739. $('.container').attr('style', 'visibility: visible').find('.pop-up').eq(4).attr('style', 'visibility: visible').siblings().attr('style', 'visibility: hidden');
  1740. })
  1741. var workDate;
  1742. var time = {
  1743. elem: '#times',
  1744. format: 'YYYY-MM-DD',
  1745. min: laydate.now(),
  1746. max: laydate.now() + 30,
  1747. istime: true,
  1748. istoday: true,
  1749. fixed: false,
  1750. choose: function (datas) {
  1751. // startTime.max = datas; //结束日选好后,重置开始日的最大日期
  1752. workDate = datas;
  1753. }
  1754. };
  1755. laydate(time);
  1756. $('#addT').on('click', function () {
  1757. $('#mineusT').show();
  1758. if ($(this).siblings('input').length < 6) {
  1759. if ($(this).siblings('input').length == 5) {
  1760. $(this).hide();
  1761. }
  1762. $(this).before('<input type="text" value="">');
  1763. }
  1764. })
  1765. $('#mineusT').on('click', function () {
  1766. if ($(this).siblings('input').length > 1) {
  1767. if ($(this).siblings('input').length == 6) {
  1768. $('#addT').show();
  1769. } else if ($(this).siblings('input').length == 2) {
  1770. $(this).hide()
  1771. }
  1772. $(this).siblings('input:last').remove();
  1773. }
  1774. })
  1775. $('#addL').on('click', function () {
  1776. $('#mineusL').show();
  1777. if ($(this).siblings('input').length < 3) {
  1778. if ($(this).siblings('input').length == 2) {
  1779. $(this).hide();
  1780. }
  1781. $(this).before('<input type="text" value="">');
  1782. }
  1783. })
  1784. $('#mineusL').on('click', function () {
  1785. if ($(this).siblings('input').length > 1) {
  1786. if ($(this).siblings('input').length == 3) {
  1787. $('#addL').show();
  1788. } else if ($(this).siblings('input').length == 2) {
  1789. $(this).hide()
  1790. }
  1791. $(this).siblings('input:last').remove();
  1792. }
  1793. })