echarts_div.js 47 KB

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