echarts_div.js 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407
  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. show: true,
  431. fontSize: 12,
  432. color: "#fff"
  433. }
  434. },
  435. {
  436. type: "bar",
  437. barWidth: 13,
  438. barGap: "-100%",
  439. itemStyle: {
  440. normal: {
  441. barBorderRadius: 30,
  442. color: 'rgba(27, 17, 134, 0.0)'
  443. }
  444. },
  445. data: maxSeriesData
  446. }
  447. ]
  448. };
  449. if (option) {
  450. myChart22.setOption(option);
  451. }
  452. myChart22.on('mouseover', function () {
  453. // stopShowTip();
  454. });
  455. myChart22.on('mouseout', function () {
  456. // autoShowTip();
  457. });
  458. }
  459. // 归集接口排名
  460. function jkgj2(res) {
  461. //处理数据为数组
  462. let jsArr = [];
  463. if(res.length > 0){
  464. for(let i=0;i<res.length;i++){
  465. let js = {};
  466. js.name = res[i].deptName;
  467. js.value = res[i].count;
  468. jsArr.push(js);
  469. }
  470. }
  471. var myChart33 = echarts.init(document.getElementById('jkgj2'));
  472. let data = jsArr;
  473. let xAxisData = data.map(item => item.name)
  474. let xAxisDataReverse = data.map(item => item.name).reverse();
  475. let seriesData = data.map(item => item.value)
  476. let maxSeriesData = []
  477. // const MAX = Math.max(...seriesData)
  478. // for (let i = 0; i < seriesData.length; i++) {
  479. // maxSeriesData.push(MAX)
  480. // }
  481. let barLinearColors = [
  482. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  483. {offset: 0, color: "#EB3B5A"},
  484. {offset: 1, color: "#FE9C5A"}
  485. ]),
  486. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  487. {offset: 0, color: "#FA8231"},
  488. {offset: 1, color: "#FFD14C"}
  489. ]),
  490. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  491. {offset: 0, color: "#F7B731"},
  492. {offset: 1, color: "#FFEE96"}
  493. ]),
  494. new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  495. {offset: 0, color: "#395CFE"},
  496. {offset: 1, color: "#2EC7CF"}
  497. ])
  498. ]
  499. function rankBarColor(cData) {
  500. let tempData = []
  501. cData.forEach((item, index) => {
  502. tempData.push({
  503. value: item,
  504. itemStyle: {
  505. color: index > 3 ? barLinearColors[3] : barLinearColors[index]
  506. }
  507. })
  508. })
  509. return tempData
  510. }
  511. var option = {
  512. tooltip: {
  513. trigger: 'axis',
  514. axisPointer: {
  515. type: 'none',
  516. },
  517. // backgroundColor: 'rgba(50,50,50,.3)',
  518. textStyle: {
  519. color: '#fff'
  520. }
  521. },
  522. grid: {
  523. left: "-10%",
  524. right: "2%",
  525. width: "100%",
  526. bottom: "0%",
  527. top: "5%",
  528. containLabel: true
  529. },
  530. xAxis: {
  531. type: "value",
  532. splitLine: {show: false},
  533. axisLabel: {show: false},
  534. axisTick: {show: false},
  535. axisLine: {show: false}
  536. },
  537. yAxis: [
  538. {
  539. type: "category",
  540. inverse: true,
  541. axisLine: {show: false},
  542. axisTick: {show: false},
  543. data: xAxisData,
  544. axisLabel: {
  545. rich: {
  546. nt1: {
  547. color: "#fff",
  548. backgroundColor: '#EB3B5A',
  549. width: 16,
  550. height: 16,
  551. fontSize: 12,
  552. align: "center",
  553. borderRadius: 100,
  554. padding: [0, 1, 2, 1]
  555. },
  556. nt2: {
  557. color: "#fff",
  558. backgroundColor: '#FA8231',
  559. width: 16,
  560. height: 16,
  561. fontSize: 12,
  562. align: "center",
  563. borderRadius: 100,
  564. padding: [0, 1, 2, 1]
  565. },
  566. nt3: {
  567. color: "#fff",
  568. backgroundColor: '#F7B731',
  569. width: 16,
  570. height: 16,
  571. fontSize: 12,
  572. align: "center",
  573. borderRadius: 100,
  574. padding: [0, 1, 2, 1]
  575. },
  576. nt: {
  577. color: "#fff",
  578. backgroundColor: '#00a9c8',
  579. width: 16,
  580. height: 16,
  581. fontSize: 12,
  582. align: "center",
  583. borderRadius: 100,
  584. padding: [0, 1, 2, 1]
  585. }
  586. },
  587. formatter: function (value, index) {
  588. let idx = index + 1
  589. if (idx <= 3) {
  590. return ["{nt" + idx + "|" + idx + "}"].join("\n");
  591. } else {
  592. return ["{nt|" + idx + "}"].join("\n");
  593. }
  594. }
  595. }
  596. },
  597. {//名称
  598. type: 'category',
  599. offset: -10,
  600. position: "left",
  601. axisLine: {show: false},
  602. axisTick: {show: false},
  603. axisLabel: {
  604. color: '#fff',
  605. align: "left",
  606. verticalAlign: "bottom",
  607. lineHeight: 30,
  608. fontSize: 12
  609. },
  610. data: xAxisDataReverse
  611. },
  612. ],
  613. series: [
  614. {
  615. zlevel: 1,
  616. type: "bar",
  617. barWidth: 13,
  618. data: rankBarColor(seriesData),
  619. itemStyle: {
  620. normal: {
  621. barBorderRadius: 30
  622. }
  623. },
  624. label: {
  625. show: true,
  626. fontSize: 12,
  627. color: "#fff"
  628. }
  629. },
  630. {
  631. type: "bar",
  632. barWidth: 13,
  633. barGap: "-100%",
  634. itemStyle: {
  635. normal: {
  636. barBorderRadius: 30,
  637. color: 'rgba(27, 17, 134, 0.0)'
  638. }
  639. },
  640. data: maxSeriesData
  641. }
  642. ]
  643. };
  644. myChart33.setOption(option);
  645. myChart33.resize(
  646. {
  647. width: 430,
  648. height: 421
  649. }
  650. );
  651. }
  652. // 省接口调用频次top5
  653. function shjk1(res) {
  654. //将数据处理为三个数组,一个用于展示图例,一个用于渲染图表,一个用于美化
  655. let legend = [];
  656. let data = [];
  657. let fakeData = [];
  658. if(res.length > 0){
  659. for(let i=0;i<res.length;i++){
  660. legend.push(res[i].deptName);
  661. let js = {};
  662. js.name = res[i].deptName;
  663. js.value = res[i].count;
  664. data.push(js);
  665. js.name = res[i].deptName;
  666. // js.value = res[i].count + 10;
  667. js.value = res[i].count;
  668. fakeData.push(js);
  669. }
  670. }
  671. // 基于准备好的dom,初始化echarts实例
  672. //省接口调用频次(左)
  673. var myChart44 = echarts.init(document.getElementById('shjk_div1'));
  674. option = {
  675. //backgroundColor: '#010f23',
  676. title: {
  677. text: '省接口调用频次Top5',
  678. subtext: '',
  679. link: '',
  680. target: 'blank',
  681. x: 'center',
  682. top: '20',
  683. textStyle: {
  684. color: '#FFF',
  685. fontSize: 12,
  686. }
  687. },
  688. tooltip: {
  689. trigger: 'item',
  690. formatter: "{a} <br/>{b} : {c}"
  691. },
  692. legend: {
  693. data: legend,
  694. x: 'center',
  695. y: '92%',
  696. textStyle: {
  697. color: '#FFF',
  698. fontSize: '10'
  699. }, itemWidth: 4, itemHeight: 4
  700. },
  701. color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
  702. series: [
  703. {
  704. name: '省接口调用频次',
  705. type: 'funnel',
  706. left: 'center',
  707. width: '70%',
  708. sort: 'ascending',
  709. label: {
  710. normal: {
  711. formatter: '{b}',
  712. },
  713. },
  714. labelLine: {
  715. normal: {
  716. show: true,
  717. length: 30
  718. }
  719. },
  720. itemStyle: {
  721. normal: {
  722. opacity: 0.3
  723. }
  724. },
  725. tooltip: {
  726. show: false
  727. },
  728. //虚影 假数据 为了好看
  729. data: fakeData
  730. },
  731. {
  732. name: '省接口调用频次',
  733. type: 'funnel',
  734. left: 'center',
  735. width: '70%',
  736. maxSize: '70%',
  737. sort: 'ascending',
  738. label: {
  739. normal: {
  740. position: 'inside',
  741. formatter: '{c}',
  742. textStyle: {
  743. color: '#fff',
  744. fontSize: 14,
  745. }
  746. },
  747. emphasis: {
  748. position: 'inside',
  749. // formatter: '{b}: {c}'//省悬浮
  750. }
  751. },
  752. itemStyle: {
  753. normal: {
  754. opacity: 8,
  755. borderColor: 'rgba(12, 13, 43, .9)',
  756. borderWidth: 3,
  757. shadowBlur: 5,
  758. shadowOffsetX: 0,
  759. shadowOffsetY: 5,
  760. shadowColor: 'rgba(0, 0, 0, .6)'
  761. }
  762. },
  763. data: data
  764. }
  765. ]
  766. };
  767. if (option) {
  768. myChart44.setOption(option);//省接口调用频次(左)
  769. }
  770. }
  771. // 省接口调用频次排名
  772. function shjk2(res) {
  773. //将数据处理为两个数组
  774. let legend = [];
  775. let data = [];
  776. if(res.length > 0){
  777. for(let i=0;i<res.length;i++){
  778. legend.push(res[i].deptName);
  779. data.push(res[i].count);
  780. }
  781. }
  782. // 基于准备好的dom,初始化echarts实例
  783. //省接口调用频次(右)坏了的
  784. let tootipTimer = null;
  785. let myChart45 = echarts.init(document.getElementById('shjk_div2'));
  786. let dataX = legend; //名称
  787. let dataY = data; //数据
  788. let zoomShow = false;
  789. if (dataY.length > 15) {
  790. zoomShow = true;
  791. } else {
  792. zoomShow = false;
  793. }
  794. var option = {
  795. // backgroundColor: '#010f23',
  796. tooltip: {
  797. trigger: 'axis',
  798. axisPointer: {
  799. type: 'shadow',
  800. },
  801. },
  802. grid: {
  803. top: '10%',
  804. right: '5%',
  805. left: '10%',
  806. bottom: '23%',
  807. },
  808. xAxis: [
  809. {
  810. type: 'category',
  811. data: dataX,
  812. axisLine: {
  813. lineStyle: {
  814. color: 'rgba(66, 192, 255, .3)',
  815. },
  816. },
  817. axisLabel: {
  818. interval: 0,
  819. margin: 10,
  820. color: '#fff',
  821. textStyle: {
  822. fontSize: 11,
  823. },
  824. rotate: '45',
  825. },
  826. axisTick: {//刻度
  827. show: false,
  828. },
  829. },
  830. ],
  831. yAxis: [
  832. {
  833. axisLabel: {
  834. padding: [3, 0, 0, 0],
  835. formatter: '{value}',
  836. color: 'rgba(95, 187, 235, 1)',
  837. textStyle: {
  838. fontSize: 12,
  839. },
  840. },
  841. axisTick: {
  842. show: true,
  843. },
  844. axisLine: {
  845. lineStyle: {
  846. color: 'rgba(66, 192, 255, .3)',
  847. },
  848. },
  849. splitLine: {
  850. lineStyle: {
  851. color: 'rgba(255,255,255,0)',
  852. },
  853. },
  854. },
  855. ],
  856. dataZoom: [//滚动条
  857. {
  858. show: zoomShow,
  859. type: 'slider',
  860. realtime: true,
  861. startValue: 0,
  862. endValue: 15,
  863. xAxisIndex: [0],
  864. bottom: '10',
  865. left: '30',
  866. height: 5,
  867. borderColor: 'rgba(0,0,0,0)',
  868. textStyle: {
  869. color: '#fff',
  870. },
  871. },
  872. ],
  873. series: [
  874. {
  875. type: 'bar',
  876. data: dataY,
  877. barWidth: '12',
  878. itemStyle: {
  879. normal: {
  880. color: new echarts.graphic.LinearGradient(
  881. 0,
  882. 0,
  883. 0,
  884. 1,
  885. [
  886. {
  887. offset: 0,
  888. color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
  889. },
  890. {
  891. offset: 0.98,
  892. color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
  893. },
  894. ],
  895. false
  896. ),
  897. shadowColor: 'rgba(1, 34, 62, 1)',
  898. shadowBlur: 4,
  899. barBorderRadius: [10, 10, 0, 0]
  900. },
  901. },
  902. label: {
  903. normal: {
  904. show: true,
  905. lineHeight: 10,
  906. formatter: '{c}',
  907. position: 'top',
  908. textStyle: {
  909. color: '#fff',
  910. fontSize: 10,
  911. },
  912. },
  913. },
  914. },
  915. ],
  916. };
  917. if (option) {
  918. myChart45.setOption(option);//省接口调用频次(右)坏了的
  919. }
  920. // 可调用clearLoop方法,清除定时器
  921. tootipTimer && tootipTimer.clearLoop();
  922. tootipTimer = null;
  923. // 调用轮播的方法
  924. tootipTimer = tools.loopShowTooltip(myChart45, option, {
  925. interval: 2500, // 轮播间隔时间
  926. loopSeries: true // 是否开启轮播循环
  927. });
  928. /*let loopSeriesMyChart45 = true;
  929. // 可调用clearLoop方法,清除定时器
  930. tootipTimer && tootipTimer.clearLoop();
  931. tootipTimer = null;
  932. // 调用轮播的方法
  933. tootipTimer = tools.loopShowTooltip(myChart45, option, {
  934. interval: 2000, // 轮播间隔时间
  935. loopSeries: loopSeriesMyChart45 // 是否开启轮播循环
  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. js.value = res[i].count;
  955. fakeData.push(js);
  956. }
  957. }
  958. // 基于准备好的dom,初始化echarts实例
  959. //市接口调用频次(左)
  960. var myChart55 = echarts.init(document.getElementById('sjk_div1'));
  961. option = {
  962. //backgroundColor: '#010f23',
  963. title: {
  964. text: '市接口调用频次Top5',
  965. subtext: '',
  966. link: '',
  967. target: 'blank',
  968. x: 'center',
  969. top: '20',
  970. textStyle: {
  971. color: '#FFF',
  972. fontSize: 12,
  973. }
  974. },
  975. tooltip: {
  976. trigger: 'item',
  977. formatter: "{a} <br/>{b} : {c}"
  978. },
  979. legend: {
  980. data: legend,
  981. x: 'center',
  982. y: '92%',
  983. textStyle: {
  984. color: '#FFF',
  985. fontSize: '10'
  986. }, itemWidth: 4, itemHeight: 4
  987. },
  988. color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
  989. series: [
  990. {
  991. name: '市接口调用频次',
  992. type: 'funnel',
  993. left: 'center',
  994. width: '60%',
  995. sort: 'ascending',
  996. label: {
  997. normal: {
  998. formatter: '{b}',
  999. },
  1000. },
  1001. labelLine: {
  1002. normal: {
  1003. show: true,
  1004. length: 30
  1005. }
  1006. },
  1007. itemStyle: {
  1008. normal: {
  1009. opacity: 0.3
  1010. }
  1011. },
  1012. tooltip: {
  1013. show: false
  1014. },
  1015. //虚影(假数据,为了好看)
  1016. data: fakeData
  1017. },
  1018. {
  1019. name: '市接口调用频次',
  1020. type: 'funnel',
  1021. left: 'center',
  1022. width: '70%',
  1023. maxSize: '70%',
  1024. sort: 'ascending',
  1025. label: {
  1026. normal: {
  1027. position: 'inside',
  1028. formatter: '{c}',
  1029. textStyle: {
  1030. color: '#fff',
  1031. fontSize: 14,
  1032. }
  1033. },
  1034. emphasis: {
  1035. position: 'inside',
  1036. // formatter: '{b}: {c}'//市悬浮
  1037. }
  1038. },
  1039. itemStyle: {
  1040. normal: {
  1041. opacity: 8,
  1042. borderColor: 'rgba(12, 13, 43, .9)',
  1043. borderWidth: 3,
  1044. shadowBlur: 5,
  1045. shadowOffsetX: 0,
  1046. shadowOffsetY: 5,
  1047. shadowColor: 'rgba(0, 0, 0, .6)'
  1048. }
  1049. },
  1050. data: data
  1051. }
  1052. ]
  1053. };
  1054. if (option) {
  1055. myChart55.setOption(option);//市接口调用频次(左)
  1056. }
  1057. }
  1058. // 市接口调用频次排名
  1059. //市接口调用频次(右)
  1060. function sjk2(res) {
  1061. //将数据处理为两个数组
  1062. let legend = [];
  1063. let data = [];
  1064. if(res.length > 0){
  1065. for(let i=0;i<res.length;i++){
  1066. legend.push(res[i].deptName);
  1067. data.push(res[i].count);
  1068. }
  1069. }
  1070. var tootipTimer = null;
  1071. // 基于准备好的dom,初始化echarts实例
  1072. var myChart56 = echarts.init(document.getElementById('sjk_div2'));
  1073. let dataX = legend; //名称
  1074. let dataY = data; //数据
  1075. let zoomShow = false;
  1076. if (dataY.length > 15) {
  1077. zoomShow = true;
  1078. } else {
  1079. zoomShow = false;
  1080. }
  1081. var option = {
  1082. // backgroundColor: '#010f23',
  1083. tooltip: {
  1084. trigger: 'axis',
  1085. axisPointer: {
  1086. type: 'shadow',
  1087. },
  1088. },
  1089. grid: {
  1090. top: '10%',
  1091. right: '5%',
  1092. left: '10%',
  1093. bottom: '23%',
  1094. },
  1095. xAxis: [
  1096. {
  1097. type: 'category',
  1098. data: dataX,
  1099. axisLine: {
  1100. lineStyle: {
  1101. color: 'rgba(66, 192, 255, .3)',
  1102. },
  1103. },
  1104. axisLabel: {
  1105. interval: 0,
  1106. margin: 10,
  1107. color: '#fff',
  1108. textStyle: {
  1109. fontSize: 11,
  1110. },
  1111. rotate: '45',
  1112. },
  1113. axisTick: {//刻度
  1114. show: false,
  1115. },
  1116. },
  1117. ],
  1118. yAxis: [
  1119. {
  1120. axisLabel: {
  1121. padding: [3, 0, 0, 0],
  1122. formatter: '{value}',
  1123. color: 'rgba(95, 187, 235, 1)',
  1124. textStyle: {
  1125. fontSize: 12,
  1126. },
  1127. },
  1128. axisTick: {
  1129. show: true,
  1130. },
  1131. axisLine: {
  1132. lineStyle: {
  1133. color: 'rgba(66, 192, 255, .3)',
  1134. },
  1135. },
  1136. splitLine: {
  1137. lineStyle: {
  1138. color: 'rgba(255,255,255,0)',
  1139. },
  1140. },
  1141. },
  1142. ],
  1143. dataZoom: [//滚动条
  1144. {
  1145. show: zoomShow,
  1146. type: 'slider',
  1147. realtime: true,
  1148. startValue: 0,
  1149. endValue: 15,
  1150. xAxisIndex: [0],
  1151. bottom: '10',
  1152. left: '30',
  1153. height: 5,
  1154. borderColor: 'rgba(0,0,0,0)',
  1155. textStyle: {
  1156. color: '#fff',
  1157. },
  1158. },
  1159. ],
  1160. series: [
  1161. {
  1162. type: 'bar',
  1163. data: dataY,
  1164. barWidth: '12',
  1165. itemStyle: {
  1166. normal: {
  1167. color: new echarts.graphic.LinearGradient(
  1168. 0,
  1169. 0,
  1170. 0,
  1171. 1,
  1172. [
  1173. {
  1174. offset: 0,
  1175. color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
  1176. },
  1177. {
  1178. offset: 0.98,
  1179. color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
  1180. },
  1181. ],
  1182. false
  1183. ),
  1184. shadowColor: 'rgba(1, 34, 62, 1)',
  1185. shadowBlur: 4,
  1186. barBorderRadius: [10, 10, 0, 0]
  1187. },
  1188. },
  1189. label: {
  1190. normal: {
  1191. show: true,
  1192. lineHeight: 10,
  1193. formatter: '{c}',
  1194. position: 'top',
  1195. textStyle: {
  1196. color: '#fff',
  1197. fontSize: 10,
  1198. },
  1199. },
  1200. },
  1201. },
  1202. ],
  1203. };
  1204. if (option) {
  1205. myChart56.setOption(option);//市接口调用频次(右)
  1206. }
  1207. // 可调用clearLoop方法,清除定时器
  1208. tootipTimer && tootipTimer.clearLoop();
  1209. tootipTimer = null;
  1210. // 调用轮播的方法
  1211. tootipTimer = tools.loopShowTooltip(myChart56, option, {
  1212. interval: 2500, // 轮播间隔时间
  1213. loopSeries: true // 是否开启轮播循环
  1214. });
  1215. }
  1216. // 归集数据频次分析
  1217. function gjsj(res) {
  1218. //将数据处理为数组
  1219. let title = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  1220. let _data = [];
  1221. let _coords = [];
  1222. if(res.length > 0){
  1223. for(let i=0;i<res.length;i++){
  1224. _data.push(res[i]);
  1225. let element = [];
  1226. element.push(title[i]);
  1227. element.push(res[i]);
  1228. _coords.push(element);
  1229. }
  1230. }
  1231. // 基于准备好的dom,初始化echarts实例
  1232. var myChart = echarts.init(document.getElementById('gjsj'));
  1233. var img = [
  1234. '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',
  1235. 'image://data:image/png;base64,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',
  1236. 'image://data:image/png;base64,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',
  1237. 'image://data:image/png;base64,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',
  1238. ]
  1239. var data = [{
  1240. /**_coords**/
  1241. coords: _coords
  1242. }]
  1243. option = {
  1244. // backgroundColor:'#011024',
  1245. tooltip: {
  1246. trigger: 'axis',
  1247. axisPointer: {
  1248. type: 'cross',
  1249. label: {
  1250. backgroundColor: '#0d3fb7'
  1251. }
  1252. }
  1253. },
  1254. grid: {
  1255. top: '15%',
  1256. left: '5%',
  1257. right: '5%',
  1258. bottom: '15%',
  1259. containLabel: true
  1260. },
  1261. xAxis: [{
  1262. type: 'category',
  1263. axisLine: {
  1264. show: true,
  1265. color: '#0d3fb7'
  1266. },
  1267. axisLabel: {
  1268. color: '#fff'
  1269. },
  1270. splitLine: {
  1271. show: false
  1272. },
  1273. boundaryGap: true,
  1274. /**title**/
  1275. data: title,
  1276. }],
  1277. yAxis: [{
  1278. type: 'value',
  1279. min: 0,
  1280. splitLine: {
  1281. show: true,
  1282. lineStyle: {
  1283. color: 'rgba(255,255,255,0.1)'
  1284. }
  1285. },
  1286. axisLine: {
  1287. show: true,
  1288. },
  1289. axisLabel: {
  1290. show: true,
  1291. textStyle: {
  1292. color: '#d1e6eb',
  1293. },
  1294. },
  1295. axisTick: {
  1296. show: false,
  1297. },
  1298. }],
  1299. series: [{
  1300. name: '归集数据频次分析',
  1301. type: 'line',
  1302. smooth: false, //是否平滑
  1303. showAllSymbol: true,
  1304. symbol: 'circle',
  1305. symbolSize: 10,
  1306. lineStyle: {
  1307. normal: {
  1308. color: "#0d3fb7",
  1309. shadowColor: 'rgba(0, 0, 0, .3)',
  1310. shadowBlur: 0,
  1311. shadowOffsetY: 5,
  1312. shadowOffsetX: 5,
  1313. },
  1314. },
  1315. label: {
  1316. show: true,
  1317. position: 'top',
  1318. textStyle: {
  1319. color: '#fff'
  1320. }
  1321. },
  1322. itemStyle: {
  1323. color: "#0d3fb7",
  1324. borderColor: "#fff",
  1325. borderWidth: 3,
  1326. shadowColor: 'rgba(0, 0, 0, .3)',
  1327. shadowBlur: 0,
  1328. shadowOffsetY: 2,
  1329. shadowOffsetX: 2,
  1330. },
  1331. areaStyle: {
  1332. normal: {
  1333. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1334. offset: 0,
  1335. color: 'rgba(108,80,243,0.3)'
  1336. },
  1337. {
  1338. offset: 1,
  1339. color: 'rgba(108,80,243,0)'
  1340. }
  1341. ], false),
  1342. shadowColor: 'rgba(108,80,243, 0.9)',
  1343. shadowBlur: 20
  1344. }
  1345. },
  1346. data: _data
  1347. },
  1348. {
  1349. name: '滑行的光点',
  1350. type: 'lines',
  1351. coordinateSystem: 'cartesian2d',
  1352. symbolSize: 30,
  1353. polyline: true,
  1354. effect: {
  1355. show: true,
  1356. trailLength: 0,
  1357. symbol: "arrow",
  1358. period: 10, //光点滑动速度
  1359. symbolSize: 150,
  1360. symbol: img[0]
  1361. },
  1362. lineStyle: {
  1363. normal: {
  1364. width: 1,
  1365. opacity: 0.6,
  1366. curveness: 0.2
  1367. }
  1368. },
  1369. /**_data**/
  1370. data: data
  1371. }
  1372. ]
  1373. };
  1374. if (option) {
  1375. myChart.setOption(option);
  1376. }
  1377. }