echarts_div.js 49 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408
  1. /***
  2. * 接口数量 和 接口占比 统一由这个方法调用
  3. */
  4. function countAndPercent(year){
  5. if(year == null){
  6. // year = new Date().getFullYear();
  7. year = '';
  8. }
  9. $.post("/visualization/countAndPercent",{
  10. year:year
  11. },function (res) {
  12. // console.log("四个球 qiu res=", res)
  13. //渲染接口数量
  14. if(res.count.length > 0){
  15. $(".data1").remove();
  16. let tmpl = "";
  17. for(let i=0;i<res.count.length;i++){
  18. if (i==0){
  19. tmpl += "<div class='data1 data_left'><div class='qiu'>";
  20. }else{
  21. tmpl += "<div class='data1'><div class='qiu'>";
  22. }
  23. tmpl += "<p>"+res.count[i].count+"个</p>";
  24. tmpl += "</div>";
  25. tmpl += "<span>"+res.count[i].shareType+"</span></div>";
  26. }
  27. $(".con_sk").append(tmpl);
  28. }
  29. //渲染接口占比
  30. jkzb(res.percent);
  31. });
  32. }
  33. // 接口占比
  34. function jkzb(data) {
  35. // console.log("接口占比 data=", data)
  36. let percent = new Array();
  37. percent.push({'shareTypeDict': 'share_type_1', 'shareType': '市直共享接口', 'count': 0, 'percent': 0});
  38. percent.push({'shareTypeDict': 'share_type_2', 'shareType': '市直归集接口', 'count': 0, 'percent': 0});
  39. percent.push({'shareTypeDict': 'share_type_3', 'shareType': '省上报接口', 'count': 0, 'percent': 0});
  40. percent.push({'shareTypeDict': 'share_type_4', 'shareType': '省共享接口', 'count': 0, 'percent': 0});
  41. for(let i = 0; i < percent.length; i++){
  42. for(let j = 0; j < data.length; j++){
  43. if(percent[i].shareTypeDict == data[j].shareTypeDict){
  44. percent[i].shareType = data[j].shareType;
  45. percent[i].count = parseInt(data[j].count);
  46. percent[i].percent = parseInt(data[j].percent);
  47. }
  48. }
  49. }
  50. let trafficWay = [];
  51. let jsArr = [];
  52. let html = "";
  53. let classArr = ['sgj','sgx','sgj2','sgx2'];
  54. //把JSON格式处理为JSONArray并渲染
  55. if(percent.length>0){
  56. //渲染饼图
  57. for(let i=0;i<percent.length;i++){
  58. let js = {};
  59. js.name = percent[i].shareType;
  60. js.value = percent[i].count;
  61. jsArr.push(js);
  62. //组装页面元素
  63. html += '<div class="'+classArr[i]+' jkzb_list">';
  64. html += '<h3><i></i>'+percent[i].shareType+'</h3>';
  65. html += '<p><span>'+percent[i].count+'</span><span>'+percent[i].percent+'%</span></p>';
  66. html += '</div>';
  67. }
  68. trafficWay = jsArr;
  69. //渲染页面数据
  70. $("#pie_div").html("");
  71. $("#pie_div").append(html);
  72. }else{
  73. let html = '<div class="sgj jkzb_list">' +
  74. ' <h3><i></i>市归集</h3>' +
  75. ' <p><span>0</span><span>0%</span></p>' +
  76. '</div>' +
  77. '<div class="sgx jkzb_list">' +
  78. ' <h3><i></i>市共享</h3>' +
  79. ' <p><span>0</span><span>0%</span></p>' +
  80. '</div>' +
  81. '<div class="sgj2 jkzb_list">' +
  82. ' <h3><i></i>省归集</h3>' +
  83. ' <p><span>0</span><span>0%</span></p>' +
  84. '</div>' +
  85. '<div class="sgx2 jkzb_list">' +
  86. ' <h3><i></i>省共享</h3>' +
  87. ' <p><span>0</span><span>0%</span></p>' +
  88. '</div>';
  89. //渲染页面数据
  90. $("#pie_div").html("");
  91. $("#pie_div").append(html);
  92. }
  93. // 基于准备好的dom,初始化echarts实例
  94. var tootipTimer = null;
  95. var myChart1 = echarts.init(document.getElementById('pie_charts'));
  96. var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMDUtMjFUMDk6Mzk6MTArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTA1LTIxVDA5OjQwOjUwKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA1LTIxVDA5OjQwOjUwKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4MTU0MTE4LWYyZGQtYmM0Ny05NmRkLTI2Nzg2M2FjMDUwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5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"
  97. var nameArray = trafficWay.map(item => {
  98. return item.name
  99. })
  100. var data = [];
  101. var color = ['#ff3000', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000', '#ff3000']
  102. var size = 120
  103. var left = 60
  104. for (var i = 0; i < trafficWay.length; i++) {
  105. data.push({
  106. value: trafficWay[i].value,
  107. name: trafficWay[i].name,
  108. itemStyle: {
  109. normal: {
  110. borderWidth: 5,
  111. shadowBlur: 20,
  112. borderColor: color[i],
  113. shadowColor: color[i]
  114. }
  115. }
  116. });
  117. }
  118. var seriesOption = [{
  119. name: '',
  120. type: 'pie',
  121. clockWise: false,
  122. // 适配给你写好了
  123. radius: [72, 76],
  124. width: size,
  125. height: size,
  126. center: ['51%', '50%'],
  127. left: left,
  128. top: "center",
  129. hoverAnimation: false,
  130. itemStyle: {
  131. normal: {
  132. label: {
  133. show: false,
  134. position: 'outside',
  135. color: '#ddd',
  136. formatter: function (params) {
  137. var percent = 0;
  138. var total = 0;
  139. for (var i = 0; i < trafficWay.length; i++) {
  140. total += trafficWay[i].value;
  141. }
  142. percent = ((params.value / total) * 100).toFixed(0);
  143. if (params.name !== '') {
  144. return '接口占比:' + params.name + '\n' + '\n' + '占百分比:' + percent + '%';
  145. } else {
  146. return '';
  147. }
  148. },
  149. },
  150. }
  151. },
  152. data: data
  153. }];
  154. option = {
  155. // backgroundColor: '#01132e',
  156. color: color,
  157. graphic: {
  158. elements: [{
  159. type: "image",
  160. z: 3,
  161. style: {
  162. image: img,
  163. width: size,
  164. height: size
  165. },
  166. left: left,
  167. top: 'center',
  168. }]
  169. },
  170. legend: [{
  171. // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  172. orient: 'vertical',
  173. // x: 'left',
  174. data: nameArray.slice(4, 8),
  175. left: '10%',
  176. top: 'center',
  177. itemWidth: 15,
  178. align: 'left',
  179. textStyle: {
  180. color: "#fff"
  181. },
  182. itemGap: 20
  183. },
  184. {
  185. // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
  186. orient: 'vertical',
  187. // x: 'left',
  188. data: nameArray.slice(0, 4),
  189. left: '10%',
  190. top: 'center',
  191. itemWidth: 15, show: false,
  192. align: 'left',
  193. textStyle: {
  194. color: "#fff"
  195. },
  196. itemGap: 20
  197. }],
  198. tooltip: {
  199. show: true
  200. },
  201. toolbox: {
  202. show: false
  203. },
  204. series: seriesOption
  205. }
  206. if (option) {
  207. myChart1.setOption(option);
  208. }
  209. // 可调用clearLoop方法,清除定时器
  210. tootipTimer && tootipTimer.clearLoop();
  211. tootipTimer = null;
  212. // 调用轮播的方法
  213. tootipTimer = tools.loopShowTooltip(myChart1, option, {
  214. interval: 2000, // 轮播间隔时间
  215. loopSeries: true // 是否开启轮播循环
  216. });
  217. }
  218. /***
  219. * 获取市接口调用频次top5和top20 统一由这个方法调用
  220. */
  221. function getCityFrequency(){
  222. $.post("/visualization/getCityFrequency",function (res) {
  223. sjk1(res.top5);
  224. sjk2(res.top20);
  225. });
  226. }
  227. /***
  228. * 获取省接口调用频次top5和top20 统一由这个方法调用
  229. */
  230. function getProvinceFrequency(){
  231. $.post("/visualization/getProvinceFrequency",function (res) {
  232. shjk2(res.top20);
  233. shjk1(res.top5);
  234. });
  235. }
  236. /***
  237. * 获取归集和接口排名 统一由这个方法调用
  238. */
  239. function imputationDataAndInterfaceRanking() {
  240. $.post("/visualization/getImputationDataAndInterfaceRanking",function (res) {
  241. jkgj(res.data);//归集数据排名
  242. jkgj2(res.interface);//归集接口排名
  243. });
  244. }
  245. /***
  246. * 获取归集数据分析 由这个方法调用
  247. */
  248. function imputationDataList(year) {
  249. if(year == null){
  250. // year = new Date().getFullYear();
  251. year = "";
  252. }
  253. $.post("/visualization/getImputationDataList",{
  254. year:year
  255. },function (res) {
  256. gjsj(res);
  257. });
  258. }
  259. function getFaultInterfaceCount() {
  260. $.post("/visualization/getFaultInterfaceCount",function (res) {
  261. $("#faultInterfaceCount").text(res);
  262. });
  263. }
  264. // 归集数据排名
  265. function jkgj(res) {
  266. //处理数据为数组
  267. let jsArr = [];
  268. if(res.length > 0){
  269. for(let i=0;i<res.length;i++){
  270. let js = {};
  271. js.name = res[i].deptName;
  272. js.value = res[i].count;
  273. jsArr.push(js);
  274. }
  275. }
  276. let myChart22 = echarts.init(document.getElementById('jkgj'));
  277. let data = jsArr;
  278. let xAxisData = data.map(item => item.name)
  279. let xAxisDataReverse = data.map(item => item.name).reverse();
  280. let seriesData = data.map(item => item.value)
  281. let maxSeriesData = []
  282. // const MAX = Math.max(...seriesData)
  283. // for (let i = 0; i < seriesData.length; i++) {
  284. // maxSeriesData.push(MAX)
  285. // }
  286. let barLinearColors = [
  287. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  288. {offset: 0, color: "#EB3B5A"},
  289. {offset: 1, color: "#FE9C5A"}
  290. ]),
  291. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  292. {offset: 0, color: "#FA8231"},
  293. {offset: 1, color: "#FFD14C"}
  294. ]),
  295. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  296. {offset: 0, color: "#F7B731"},
  297. {offset: 1, color: "#FFEE96"}
  298. ]),
  299. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  300. {offset: 0, color: "#395CFE"},
  301. {offset: 1, color: "#2EC7CF"}
  302. ])
  303. ]
  304. function rankBarColor(cData) {
  305. let tempData = []
  306. cData.forEach((item, index) => {
  307. tempData.push({
  308. value: item,
  309. itemStyle: {
  310. color: index > 3 ? barLinearColors[3] : barLinearColors[index]
  311. }
  312. })
  313. })
  314. return tempData
  315. }
  316. var option = {
  317. tooltip: {
  318. trigger: 'axis',
  319. axisPointer: {
  320. type: 'none',
  321. },
  322. // backgroundColor: 'rgba(50,50,50,.3)',
  323. textStyle: {
  324. color: '#fff'
  325. }
  326. },
  327. grid: {
  328. left: "-10%",
  329. right: "2%",
  330. width: "100%",
  331. bottom: "0%",
  332. top: "5%",
  333. containLabel: true
  334. },
  335. xAxis: {
  336. type: "value",
  337. splitLine: {show: false},
  338. axisLabel: {show: false},
  339. axisTick: {show: false},
  340. axisLine: {show: false}
  341. },
  342. yAxis: [
  343. {
  344. type: "category",
  345. inverse: true,
  346. axisLine: {show: false},
  347. axisTick: {show: false},
  348. data: xAxisData,
  349. axisLabel: {
  350. rich: {
  351. nt1: {
  352. color: "#fff",
  353. backgroundColor: '#EB3B5A',
  354. width: 16,
  355. height: 16,
  356. fontSize: 12,
  357. align: "center",
  358. borderRadius: 100,
  359. padding: [0, 1, 2, 1]
  360. },
  361. nt2: {
  362. color: "#fff",
  363. backgroundColor: '#FA8231',
  364. width: 16,
  365. height: 16,
  366. fontSize: 12,
  367. align: "center",
  368. borderRadius: 100,
  369. padding: [0, 1, 2, 1]
  370. },
  371. nt3: {
  372. color: "#fff",
  373. backgroundColor: '#F7B731',
  374. width: 16,
  375. height: 16,
  376. fontSize: 12,
  377. align: "center",
  378. borderRadius: 100,
  379. padding: [0, 1, 2, 1]
  380. },
  381. nt: {
  382. color: "#fff",
  383. backgroundColor: '#00a9c8',
  384. width: 16,
  385. height: 16,
  386. fontSize: 12,
  387. align: "center",
  388. borderRadius: 100,
  389. padding: [0, 1, 2, 1]
  390. }
  391. },
  392. formatter: function (value, index) {
  393. let idx = index + 1
  394. if (idx <= 3) {
  395. return ["{nt" + idx + "|" + idx + "}"].join("\n");
  396. } else {
  397. return ["{nt|" + idx + "}"].join("\n");
  398. }
  399. }
  400. }
  401. },
  402. {//名称
  403. type: 'category',
  404. offset: -10,
  405. position: "left",
  406. axisLine: {show: false},
  407. axisTick: {show: false},
  408. axisLabel: {
  409. color: '#fff',
  410. align: "left",
  411. verticalAlign: "bottom",
  412. lineHeight: 30,
  413. fontSize: 12
  414. },
  415. data: xAxisDataReverse
  416. },
  417. ],
  418. series: [
  419. {
  420. zlevel: 1,
  421. type: "bar",
  422. barWidth: 13,
  423. data: rankBarColor(seriesData),
  424. itemStyle: {
  425. normal: {
  426. barBorderRadius: 30
  427. }
  428. },
  429. label: {
  430. align: "left",
  431. show: true,
  432. fontSize: 12,
  433. color: "#fff"
  434. }
  435. },
  436. {
  437. type: "bar",
  438. barWidth: 13,
  439. barGap: "-100%",
  440. itemStyle: {
  441. normal: {
  442. barBorderRadius: 30,
  443. color: 'rgba(27, 17, 134, 0.0)'
  444. }
  445. },
  446. data: maxSeriesData
  447. }
  448. ]
  449. };
  450. if (option) {
  451. myChart22.setOption(option);
  452. }
  453. myChart22.on('mouseover', function () {
  454. // stopShowTip();
  455. });
  456. myChart22.on('mouseout', function () {
  457. // autoShowTip();
  458. });
  459. }
  460. // 归集接口排名
  461. function jkgj2(res) {
  462. //处理数据为数组
  463. let jsArr = [];
  464. if(res.length > 0){
  465. for(let i=0;i<res.length;i++){
  466. let js = {};
  467. js.name = res[i].deptName;
  468. js.value = res[i].count;
  469. jsArr.push(js);
  470. }
  471. }
  472. var myChart33 = echarts.init(document.getElementById('jkgj2'));
  473. let data = jsArr;
  474. let xAxisData = data.map(item => item.name)
  475. let xAxisDataReverse = data.map(item => item.name).reverse();
  476. let seriesData = data.map(item => item.value)
  477. let maxSeriesData = []
  478. // const MAX = Math.max(...seriesData)
  479. // for (let i = 0; i < seriesData.length; i++) {
  480. // maxSeriesData.push(MAX)
  481. // }
  482. let barLinearColors = [
  483. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  484. {offset: 0, color: "#EB3B5A"},
  485. {offset: 1, color: "#FE9C5A"}
  486. ]),
  487. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  488. {offset: 0, color: "#FA8231"},
  489. {offset: 1, color: "#FFD14C"}
  490. ]),
  491. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  492. {offset: 0, color: "#F7B731"},
  493. {offset: 1, color: "#FFEE96"}
  494. ]),
  495. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  496. {offset: 0, color: "#395CFE"},
  497. {offset: 1, color: "#2EC7CF"}
  498. ])
  499. ]
  500. function rankBarColor(cData) {
  501. let tempData = []
  502. cData.forEach((item, index) => {
  503. tempData.push({
  504. value: item,
  505. itemStyle: {
  506. color: index > 3 ? barLinearColors[3] : barLinearColors[index]
  507. }
  508. })
  509. })
  510. return tempData
  511. }
  512. var option = {
  513. tooltip: {
  514. trigger: 'axis',
  515. axisPointer: {
  516. type: 'none',
  517. },
  518. // backgroundColor: 'rgba(50,50,50,.3)',
  519. textStyle: {
  520. color: '#fff'
  521. }
  522. },
  523. grid: {
  524. left: "-10%",
  525. right: "2%",
  526. width: "100%",
  527. bottom: "0%",
  528. top: "5%",
  529. containLabel: true
  530. },
  531. xAxis: {
  532. type: "value",
  533. splitLine: {show: false},
  534. axisLabel: {show: false},
  535. axisTick: {show: false},
  536. axisLine: {show: false}
  537. },
  538. yAxis: [
  539. {
  540. type: "category",
  541. inverse: true,
  542. axisLine: {show: false},
  543. axisTick: {show: false},
  544. data: xAxisData,
  545. axisLabel: {
  546. rich: {
  547. nt1: {
  548. color: "#fff",
  549. backgroundColor: '#EB3B5A',
  550. width: 16,
  551. height: 16,
  552. fontSize: 12,
  553. align: "center",
  554. borderRadius: 100,
  555. padding: [0, 1, 2, 1]
  556. },
  557. nt2: {
  558. color: "#fff",
  559. backgroundColor: '#FA8231',
  560. width: 16,
  561. height: 16,
  562. fontSize: 12,
  563. align: "center",
  564. borderRadius: 100,
  565. padding: [0, 1, 2, 1]
  566. },
  567. nt3: {
  568. color: "#fff",
  569. backgroundColor: '#F7B731',
  570. width: 16,
  571. height: 16,
  572. fontSize: 12,
  573. align: "center",
  574. borderRadius: 100,
  575. padding: [0, 1, 2, 1]
  576. },
  577. nt: {
  578. color: "#fff",
  579. backgroundColor: '#00a9c8',
  580. width: 16,
  581. height: 16,
  582. fontSize: 12,
  583. align: "center",
  584. borderRadius: 100,
  585. padding: [0, 1, 2, 1]
  586. }
  587. },
  588. formatter: function (value, index) {
  589. let idx = index + 1
  590. if (idx <= 3) {
  591. return ["{nt" + idx + "|" + idx + "}"].join("\n");
  592. } else {
  593. return ["{nt|" + idx + "}"].join("\n");
  594. }
  595. }
  596. }
  597. },
  598. {//名称
  599. type: 'category',
  600. offset: -10,
  601. position: "left",
  602. axisLine: {show: false},
  603. axisTick: {show: false},
  604. axisLabel: {
  605. color: '#fff',
  606. align: "left",
  607. verticalAlign: "bottom",
  608. lineHeight: 30,
  609. fontSize: 12
  610. },
  611. data: xAxisDataReverse
  612. },
  613. ],
  614. series: [
  615. {
  616. zlevel: 1,
  617. type: "bar",
  618. barWidth: 13,
  619. data: rankBarColor(seriesData),
  620. itemStyle: {
  621. normal: {
  622. barBorderRadius: 30
  623. }
  624. },
  625. label: {
  626. show: true,
  627. fontSize: 12,
  628. color: "#fff"
  629. }
  630. },
  631. {
  632. type: "bar",
  633. barWidth: 13,
  634. barGap: "-100%",
  635. itemStyle: {
  636. normal: {
  637. barBorderRadius: 30,
  638. color: 'rgba(27, 17, 134, 0.0)'
  639. }
  640. },
  641. data: maxSeriesData
  642. }
  643. ]
  644. };
  645. myChart33.setOption(option);
  646. myChart33.resize(
  647. {
  648. width: 430,
  649. height: 421
  650. }
  651. );
  652. }
  653. // 省接口调用频次top5
  654. function shjk1(res) {
  655. //将数据处理为三个数组,一个用于展示图例,一个用于渲染图表,一个用于美化
  656. let legend = [];
  657. let data = [];
  658. let fakeData = [];
  659. if(res.length > 0){
  660. for(let i=0;i<res.length;i++){
  661. legend.push(res[i].deptName);
  662. let js = {};
  663. js.name = res[i].deptName;
  664. js.value = res[i].count;
  665. data.push(js);
  666. js.name = res[i].deptName;
  667. // js.value = res[i].count + 10;
  668. js.value = res[i].count;
  669. fakeData.push(js);
  670. }
  671. }
  672. // 基于准备好的dom,初始化echarts实例
  673. //省接口调用频次(左)
  674. var myChart44 = echarts.init(document.getElementById('shjk_div1'));
  675. option = {
  676. //backgroundColor: '#010f23',
  677. title: {
  678. text: '省接口调用频次Top5',
  679. subtext: '',
  680. link: '',
  681. target: 'blank',
  682. x: 'center',
  683. top: '20',
  684. textStyle: {
  685. color: '#FFF',
  686. fontSize: 12,
  687. }
  688. },
  689. tooltip: {
  690. trigger: 'item',
  691. formatter: "{a} <br/>{b} : {c}"
  692. },
  693. legend: {
  694. data: legend,
  695. x: 'center',
  696. y: '92%',
  697. textStyle: {
  698. color: '#FFF',
  699. fontSize: '10'
  700. }, itemWidth: 4, itemHeight: 4
  701. },
  702. color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
  703. series: [
  704. {
  705. name: '省接口调用频次',
  706. type: 'funnel',
  707. left: 'center',
  708. width: '70%',
  709. sort: 'ascending',
  710. label: {
  711. normal: {
  712. formatter: '{b}',
  713. },
  714. },
  715. labelLine: {
  716. normal: {
  717. show: true,
  718. length: 30
  719. }
  720. },
  721. itemStyle: {
  722. normal: {
  723. opacity: 0.3
  724. }
  725. },
  726. tooltip: {
  727. show: false
  728. },
  729. //虚影 假数据 为了好看
  730. data: fakeData
  731. },
  732. {
  733. name: '省接口调用频次',
  734. type: 'funnel',
  735. left: 'center',
  736. width: '70%',
  737. maxSize: '70%',
  738. sort: 'ascending',
  739. label: {
  740. normal: {
  741. position: 'inside',
  742. formatter: '{c}',
  743. textStyle: {
  744. color: '#fff',
  745. fontSize: 14,
  746. }
  747. },
  748. emphasis: {
  749. position: 'inside',
  750. // formatter: '{b}: {c}'//省悬浮
  751. }
  752. },
  753. itemStyle: {
  754. normal: {
  755. opacity: 8,
  756. borderColor: 'rgba(12, 13, 43, .9)',
  757. borderWidth: 3,
  758. shadowBlur: 5,
  759. shadowOffsetX: 0,
  760. shadowOffsetY: 5,
  761. shadowColor: 'rgba(0, 0, 0, .6)'
  762. }
  763. },
  764. data: data
  765. }
  766. ]
  767. };
  768. if (option) {
  769. myChart44.setOption(option);//省接口调用频次(左)
  770. }
  771. }
  772. // 省接口调用频次排名
  773. function shjk2(res) {
  774. //将数据处理为两个数组
  775. let legend = [];
  776. let data = [];
  777. if(res.length > 0){
  778. for(let i=0;i<res.length;i++){
  779. legend.push(res[i].deptName);
  780. data.push(res[i].count);
  781. }
  782. }
  783. // 基于准备好的dom,初始化echarts实例
  784. //省接口调用频次(右)坏了的
  785. let tootipTimer = null;
  786. let myChart45 = echarts.init(document.getElementById('shjk_div2'));
  787. let dataX = legend; //名称
  788. let dataY = data; //数据
  789. let zoomShow = false;
  790. if (dataY.length > 15) {
  791. zoomShow = true;
  792. } else {
  793. zoomShow = false;
  794. }
  795. var option = {
  796. // backgroundColor: '#010f23',
  797. tooltip: {
  798. trigger: 'axis',
  799. axisPointer: {
  800. type: 'shadow',
  801. },
  802. },
  803. grid: {
  804. top: '10%',
  805. right: '5%',
  806. left: '10%',
  807. bottom: '23%',
  808. },
  809. xAxis: [
  810. {
  811. type: 'category',
  812. data: dataX,
  813. axisLine: {
  814. lineStyle: {
  815. color: 'rgba(66, 192, 255, .3)',
  816. },
  817. },
  818. axisLabel: {
  819. interval: 0,
  820. margin: 10,
  821. color: '#fff',
  822. textStyle: {
  823. fontSize: 11,
  824. },
  825. rotate: '45',
  826. },
  827. axisTick: {//刻度
  828. show: false,
  829. },
  830. },
  831. ],
  832. yAxis: [
  833. {
  834. axisLabel: {
  835. padding: [3, 0, 0, 0],
  836. formatter: '{value}',
  837. color: 'rgba(95, 187, 235, 1)',
  838. textStyle: {
  839. fontSize: 12,
  840. },
  841. },
  842. axisTick: {
  843. show: true,
  844. },
  845. axisLine: {
  846. lineStyle: {
  847. color: 'rgba(66, 192, 255, .3)',
  848. },
  849. },
  850. splitLine: {
  851. lineStyle: {
  852. color: 'rgba(255,255,255,0)',
  853. },
  854. },
  855. },
  856. ],
  857. dataZoom: [//滚动条
  858. {
  859. show: zoomShow,
  860. type: 'slider',
  861. realtime: true,
  862. startValue: 0,
  863. endValue: 15,
  864. xAxisIndex: [0],
  865. bottom: '10',
  866. left: '30',
  867. height: 5,
  868. borderColor: 'rgba(0,0,0,0)',
  869. textStyle: {
  870. color: '#fff',
  871. },
  872. },
  873. ],
  874. series: [
  875. {
  876. type: 'bar',
  877. data: dataY,
  878. barWidth: '12',
  879. itemStyle: {
  880. normal: {
  881. color: new echarts.graphic.LinearGradient(
  882. 0,
  883. 0,
  884. 0,
  885. 1,
  886. [
  887. {
  888. offset: 0,
  889. color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
  890. },
  891. {
  892. offset: 0.98,
  893. color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
  894. },
  895. ],
  896. false
  897. ),
  898. shadowColor: 'rgba(1, 34, 62, 1)',
  899. shadowBlur: 4,
  900. barBorderRadius: [10, 10, 0, 0]
  901. },
  902. },
  903. label: {
  904. normal: {
  905. show: true,
  906. lineHeight: 10,
  907. formatter: '{c}',
  908. position: 'top',
  909. textStyle: {
  910. color: '#fff',
  911. fontSize: 10,
  912. },
  913. },
  914. },
  915. },
  916. ],
  917. };
  918. if (option) {
  919. myChart45.setOption(option);//省接口调用频次(右)坏了的
  920. }
  921. // 可调用clearLoop方法,清除定时器
  922. tootipTimer && tootipTimer.clearLoop();
  923. tootipTimer = null;
  924. // 调用轮播的方法
  925. tootipTimer = tools.loopShowTooltip(myChart45, option, {
  926. interval: 2500, // 轮播间隔时间
  927. loopSeries: true // 是否开启轮播循环
  928. });
  929. /*let loopSeriesMyChart45 = true;
  930. // 可调用clearLoop方法,清除定时器
  931. tootipTimer && tootipTimer.clearLoop();
  932. tootipTimer = null;
  933. // 调用轮播的方法
  934. tootipTimer = tools.loopShowTooltip(myChart45, option, {
  935. interval: 2000, // 轮播间隔时间
  936. loopSeries: loopSeriesMyChart45 // 是否开启轮播循环
  937. // loopSeries: true // 是否开启轮播循环
  938. });*/
  939. }
  940. // 市接口调用频次top5
  941. function sjk1(res) {
  942. //将数据处理为三个数组,一个用于展示图例,一个用于渲染图表,一个用于美化
  943. let legend = [];
  944. let data = [];
  945. let fakeData = [];
  946. if(res.length > 0){
  947. for(let i=0;i<res.length;i++){
  948. legend.push(res[i].deptName);
  949. let js = {};
  950. js.name = res[i].deptName;
  951. js.value = res[i].count;
  952. data.push(js);
  953. js.name = res[i].deptName;
  954. // js.value = res[i].count + 10;
  955. js.value = res[i].count;
  956. fakeData.push(js);
  957. }
  958. }
  959. // 基于准备好的dom,初始化echarts实例
  960. //市接口调用频次(左)
  961. var myChart55 = echarts.init(document.getElementById('sjk_div1'));
  962. option = {
  963. //backgroundColor: '#010f23',
  964. title: {
  965. text: '市接口调用频次Top5',
  966. subtext: '',
  967. link: '',
  968. target: 'blank',
  969. x: 'center',
  970. top: '20',
  971. textStyle: {
  972. color: '#FFF',
  973. fontSize: 12,
  974. }
  975. },
  976. tooltip: {
  977. trigger: 'item',
  978. formatter: "{a} <br/>{b} : {c}"
  979. },
  980. legend: {
  981. data: legend,
  982. x: 'center',
  983. y: '92%',
  984. textStyle: {
  985. color: '#FFF',
  986. fontSize: '10'
  987. }, itemWidth: 4, itemHeight: 4
  988. },
  989. color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
  990. series: [
  991. {
  992. name: '市接口调用频次',
  993. type: 'funnel',
  994. left: 'center',
  995. width: '60%',
  996. sort: 'ascending',
  997. label: {
  998. normal: {
  999. formatter: '{b}',
  1000. },
  1001. },
  1002. labelLine: {
  1003. normal: {
  1004. show: true,
  1005. length: 30
  1006. }
  1007. },
  1008. itemStyle: {
  1009. normal: {
  1010. opacity: 0.3
  1011. }
  1012. },
  1013. tooltip: {
  1014. show: false
  1015. },
  1016. //虚影(假数据,为了好看)
  1017. data: fakeData
  1018. },
  1019. {
  1020. name: '市接口调用频次',
  1021. type: 'funnel',
  1022. left: 'center',
  1023. width: '70%',
  1024. maxSize: '70%',
  1025. sort: 'ascending',
  1026. label: {
  1027. normal: {
  1028. position: 'inside',
  1029. formatter: '{c}',
  1030. textStyle: {
  1031. color: '#fff',
  1032. fontSize: 14,
  1033. }
  1034. },
  1035. emphasis: {
  1036. position: 'inside',
  1037. // formatter: '{b}: {c}'//市悬浮
  1038. }
  1039. },
  1040. itemStyle: {
  1041. normal: {
  1042. opacity: 8,
  1043. borderColor: 'rgba(12, 13, 43, .9)',
  1044. borderWidth: 3,
  1045. shadowBlur: 5,
  1046. shadowOffsetX: 0,
  1047. shadowOffsetY: 5,
  1048. shadowColor: 'rgba(0, 0, 0, .6)'
  1049. }
  1050. },
  1051. data: data
  1052. }
  1053. ]
  1054. };
  1055. if (option) {
  1056. myChart55.setOption(option);//市接口调用频次(左)
  1057. }
  1058. }
  1059. // 市接口调用频次排名
  1060. //市接口调用频次(右)
  1061. function sjk2(res) {
  1062. //将数据处理为两个数组
  1063. let legend = [];
  1064. let data = [];
  1065. if(res.length > 0){
  1066. for(let i=0;i<res.length;i++){
  1067. legend.push(res[i].deptName);
  1068. data.push(res[i].count);
  1069. }
  1070. }
  1071. var tootipTimer = null;
  1072. // 基于准备好的dom,初始化echarts实例
  1073. var myChart56 = echarts.init(document.getElementById('sjk_div2'));
  1074. let dataX = legend; //名称
  1075. let dataY = data; //数据
  1076. let zoomShow = false;
  1077. if (dataY.length > 15) {
  1078. zoomShow = true;
  1079. } else {
  1080. zoomShow = false;
  1081. }
  1082. var option = {
  1083. // backgroundColor: '#010f23',
  1084. tooltip: {
  1085. trigger: 'axis',
  1086. axisPointer: {
  1087. type: 'shadow',
  1088. },
  1089. },
  1090. grid: {
  1091. top: '10%',
  1092. right: '5%',
  1093. left: '10%',
  1094. bottom: '23%',
  1095. },
  1096. xAxis: [
  1097. {
  1098. type: 'category',
  1099. data: dataX,
  1100. axisLine: {
  1101. lineStyle: {
  1102. color: 'rgba(66, 192, 255, .3)',
  1103. },
  1104. },
  1105. axisLabel: {
  1106. interval: 0,
  1107. margin: 10,
  1108. color: '#fff',
  1109. textStyle: {
  1110. fontSize: 11,
  1111. },
  1112. rotate: '45',
  1113. },
  1114. axisTick: {//刻度
  1115. show: false,
  1116. },
  1117. },
  1118. ],
  1119. yAxis: [
  1120. {
  1121. axisLabel: {
  1122. padding: [3, 0, 0, 0],
  1123. formatter: '{value}',
  1124. color: 'rgba(95, 187, 235, 1)',
  1125. textStyle: {
  1126. fontSize: 12,
  1127. },
  1128. },
  1129. axisTick: {
  1130. show: true,
  1131. },
  1132. axisLine: {
  1133. lineStyle: {
  1134. color: 'rgba(66, 192, 255, .3)',
  1135. },
  1136. },
  1137. splitLine: {
  1138. lineStyle: {
  1139. color: 'rgba(255,255,255,0)',
  1140. },
  1141. },
  1142. },
  1143. ],
  1144. dataZoom: [//滚动条
  1145. {
  1146. show: zoomShow,
  1147. type: 'slider',
  1148. realtime: true,
  1149. startValue: 0,
  1150. endValue: 15,
  1151. xAxisIndex: [0],
  1152. bottom: '10',
  1153. left: '30',
  1154. height: 5,
  1155. borderColor: 'rgba(0,0,0,0)',
  1156. textStyle: {
  1157. color: '#fff',
  1158. },
  1159. },
  1160. ],
  1161. series: [
  1162. {
  1163. type: 'bar',
  1164. data: dataY,
  1165. barWidth: '12',
  1166. itemStyle: {
  1167. normal: {
  1168. color: new echarts.graphic.LinearGradient(
  1169. 0,
  1170. 0,
  1171. 0,
  1172. 1,
  1173. [
  1174. {
  1175. offset: 0,
  1176. color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
  1177. },
  1178. {
  1179. offset: 0.98,
  1180. color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
  1181. },
  1182. ],
  1183. false
  1184. ),
  1185. shadowColor: 'rgba(1, 34, 62, 1)',
  1186. shadowBlur: 4,
  1187. barBorderRadius: [10, 10, 0, 0]
  1188. },
  1189. },
  1190. label: {
  1191. normal: {
  1192. show: true,
  1193. lineHeight: 10,
  1194. formatter: '{c}',
  1195. position: 'top',
  1196. textStyle: {
  1197. color: '#fff',
  1198. fontSize: 10,
  1199. },
  1200. },
  1201. },
  1202. },
  1203. ],
  1204. };
  1205. if (option) {
  1206. myChart56.setOption(option);//市接口调用频次(右)
  1207. }
  1208. // 可调用clearLoop方法,清除定时器
  1209. tootipTimer && tootipTimer.clearLoop();
  1210. tootipTimer = null;
  1211. // 调用轮播的方法
  1212. tootipTimer = tools.loopShowTooltip(myChart56, option, {
  1213. interval: 2500, // 轮播间隔时间
  1214. loopSeries: true // 是否开启轮播循环
  1215. });
  1216. }
  1217. // 归集数据频次分析
  1218. function gjsj(res) {
  1219. //将数据处理为数组
  1220. let title = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  1221. let _data = [];
  1222. let _coords = [];
  1223. if(res.length > 0){
  1224. for(let i=0;i<res.length;i++){
  1225. _data.push(res[i]);
  1226. let element = [];
  1227. element.push(title[i]);
  1228. element.push(res[i]);
  1229. _coords.push(element);
  1230. }
  1231. }
  1232. // 基于准备好的dom,初始化echarts实例
  1233. var myChart = echarts.init(document.getElementById('gjsj'));
  1234. var img = [
  1235. 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
  1236. 'image://data:image/png;base64,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',
  1237. 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAGZklEQVR42u2cTYgkSRXHfy8iP6q7qr92e+wunIPIIGyN60XRk+xFT7IHD3vypiDexJuHhZ5G2IOgZw96Fd3Z06J48SJ4VWGh66CLIDvSPXa7PVVdn5kR8TxUdpnVM8Muylb1FPEgqazKiMjKH/8XH+8FKapKtP/NTEQQ4UV4EV6EFy3Ci/AivAgvWoQX4UV4EV6EFy3Ci/AivAgvWoQX4UV4EV60CO//t+Q2/ikR5OZvqmiE93Fg6UeXuQ0wZZU7BuZArv/C8dOKe8qOqtKyeogrgyeCoDeAdarz7jMgdipI3RqsIxRZHUCzCmgL4E6QCprhsjqojk7tvH6tU9U7nrUzb3PdlSeC8KB60A5CF6GNsIdwhrCFcPlI4G6t1iPYu6tcoRyiXKKconTQuRIfoMtWoFmJq9bBgWGKMT2f29Rt2+Cb5HetafmWbfpd0/It8rvWBt+0qds2PZ8zrRTYnauWawWuJbwFV62DA0OOpSDHT2woRZBeGgZD762dhsHQI700lCL4yaxcjp3XvQZYc+G1c9u5u94AZw/8pu/bkl0MFovHEDAkCMVQyJqKQzEELAGP5wnBbvvUP7YjIABh7sJLdF+zdHcFaCO8hNgDv6kWS4alJGEwTIGUcpxRjDOcnX2W4wxIGQxTShIyrFqsPfCbvFT1mbU54rLUt9xJ8gkClfoeYby1BZMnCd4mZCYhb1rKSUJibG4RFXkVQb1w6cvJP8ibjjAUfJAw9CXZrsNhOETpIpw8b4r9ArvtgstezgYIpo8T8gPLJgkDUsw4NUl2J8HvA18FvoPh63hURAOKn5rcUY4dYaOkRckIx/SxJz9w5AT2CMt03eUMGNeP0UU47QpbiG2+3MRjGGGxWMyGTUs3QHkE8kXgPfVlplYyxfxURb6V+eK+sdk+Fsto1j/a5stNtqp2uzdWLC86vKf6n04HLhFNjUP7s8HBjG3DYNWIJZCo8KYib/7gC/IVAgnoe8A3gX8nom3M2BIwaN9oahyXCJ3ORwYXXvzAwNn7QvOehLFxZJIiCMmGBO9ewfIlVf746k4RfvTl8MvMcPha25/9vGu++5sPsl9LooX45IIkmfWdKhLGpqSJcPa+wL01XZ6dPKyUUH/ALUhGQokg5l/A9zAy+vYrvJ4ZDgEyw+E3PqOvYxBMJlhm5ZORwFatrXs37rNO8O6/Me+JbHDNxYsTRMonBL5GYDz19OtXiyBXBHJc8XvV6S5MFmovtFe7z9oFBjhEVXoFfAgNFKdKiuJRhCCi4Yd/yt49Hcmvho4/X0zkt7/4W/KuiG4AP0PlU6RVvQYKH6LSKzhcfmTlE5+q3Ag9zZZU21jKi4St/QSZTYqT1HzeSDIl+J8Av1ORd/AItoLq1EmWlVOZlIy1JN0oUEquLhzpvqOPn682lhSq+sSVt/AAHZQ2yh5Ke3+23DIEcvUBTnE+AG8D9wUtRbUU1bck6I8xfFaLok3Ak6ufL9fa+2HWXhVlWWKkeTmjrQAPat+vUJu6TbVCcNbR2JQwHJ0XmblsePlAs/wdwtSgCAnf12DbhLDprD6hCI7mpmOCN4nPZKiZL5M++Y376Rq47fNc13za52LIfG5LJiSUgwTTshisKaZ7ibCDsmOMnkw8St7wBDxh4ElbjgbOTn2qgSL8006X7bLLHTBk0XXDjp36nh3ROw80cGirBEoYliHxF4X3fy8a+V8mLhSkoYDh7Lq2Sho4eufB9+wo7NjpgsvKGg0Yz43nXa9xHcbs+A2CEAb9wJYxTLaFtIahRGn0lasQTGvbiKj1fTsgISysaZec01juVOUax0PgFCUnkBCCsSNxClnpkO2SXSoVVscuJbJdkpVOnKLKZA7uFOXhjfbXbZ43V8MRyn2UE5S9CkCT4Es7ZPOOM1kQe+VyO/YJfRx9nL1yucmCsHnH+dIOw46dzhV3UrVXpSSXmcdYTQKonnKsJ4FOETrA2TM0NIvZQfsZyZ8VpSBXkrddSHZfpx/f4L/52teAv9YAfg7lD7UB5yHM1bbC5PdKtluooiJINR9TQCslzgCcI+zVYJzXonRd4O3bsWtAVv2Chqe2XFzb8bHAEXAMR0f6rIFn1ftV5Da93eLjBDBv024pia8GeZFCUhFetAgvwovwIrwIL1qEF+FFeBFetAgvwovwIrwIL1qEF+FFeBFetAgvwovw1tD+A2QKHlM6/+MtAAAAAElFTkSuQmCC',
  1238. 'image://data:image/png;base64,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',
  1239. ]
  1240. var data = [{
  1241. /**_coords**/
  1242. coords: _coords
  1243. }]
  1244. option = {
  1245. // backgroundColor:'#011024',
  1246. tooltip: {
  1247. trigger: 'axis',
  1248. axisPointer: {
  1249. type: 'cross',
  1250. label: {
  1251. backgroundColor: '#0d3fb7'
  1252. }
  1253. }
  1254. },
  1255. grid: {
  1256. top: '15%',
  1257. left: '5%',
  1258. right: '5%',
  1259. bottom: '15%',
  1260. containLabel: true
  1261. },
  1262. xAxis: [{
  1263. type: 'category',
  1264. axisLine: {
  1265. show: true,
  1266. color: '#0d3fb7'
  1267. },
  1268. axisLabel: {
  1269. color: '#fff'
  1270. },
  1271. splitLine: {
  1272. show: false
  1273. },
  1274. boundaryGap: true,
  1275. /**title**/
  1276. data: title,
  1277. }],
  1278. yAxis: [{
  1279. type: 'value',
  1280. min: 0,
  1281. splitLine: {
  1282. show: true,
  1283. lineStyle: {
  1284. color: 'rgba(255,255,255,0.1)'
  1285. }
  1286. },
  1287. axisLine: {
  1288. show: true,
  1289. },
  1290. axisLabel: {
  1291. show: true,
  1292. textStyle: {
  1293. color: '#d1e6eb',
  1294. },
  1295. },
  1296. axisTick: {
  1297. show: false,
  1298. },
  1299. }],
  1300. series: [{
  1301. name: '归集数据频次分析',
  1302. type: 'line',
  1303. smooth: false, //是否平滑
  1304. showAllSymbol: true,
  1305. symbol: 'circle',
  1306. symbolSize: 10,
  1307. lineStyle: {
  1308. normal: {
  1309. color: "#0d3fb7",
  1310. shadowColor: 'rgba(0, 0, 0, .3)',
  1311. shadowBlur: 0,
  1312. shadowOffsetY: 5,
  1313. shadowOffsetX: 5,
  1314. },
  1315. },
  1316. label: {
  1317. show: true,
  1318. position: 'top',
  1319. textStyle: {
  1320. color: '#fff'
  1321. }
  1322. },
  1323. itemStyle: {
  1324. color: "#0d3fb7",
  1325. borderColor: "#fff",
  1326. borderWidth: 3,
  1327. shadowColor: 'rgba(0, 0, 0, .3)',
  1328. shadowBlur: 0,
  1329. shadowOffsetY: 2,
  1330. shadowOffsetX: 2,
  1331. },
  1332. areaStyle: {
  1333. normal: {
  1334. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1335. offset: 0,
  1336. color: 'rgba(108,80,243,0.3)'
  1337. },
  1338. {
  1339. offset: 1,
  1340. color: 'rgba(108,80,243,0)'
  1341. }
  1342. ], false),
  1343. shadowColor: 'rgba(108,80,243, 0.9)',
  1344. shadowBlur: 20
  1345. }
  1346. },
  1347. data: _data
  1348. },
  1349. {
  1350. name: '滑行的光点',
  1351. type: 'lines',
  1352. coordinateSystem: 'cartesian2d',
  1353. symbolSize: 30,
  1354. polyline: true,
  1355. effect: {
  1356. show: true,
  1357. trailLength: 0,
  1358. symbol: "arrow",
  1359. period: 10, //光点滑动速度
  1360. symbolSize: 150,
  1361. symbol: img[0]
  1362. },
  1363. lineStyle: {
  1364. normal: {
  1365. width: 1,
  1366. opacity: 0.6,
  1367. curveness: 0.2
  1368. }
  1369. },
  1370. /**_data**/
  1371. data: data
  1372. }
  1373. ]
  1374. };
  1375. if (option) {
  1376. myChart.setOption(option);
  1377. }
  1378. }