1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408 |
- /***
- * 接口数量 和 接口占比 统一由这个方法调用
- */
- function countAndPercent(year){
- if(year == null){
- // year = new Date().getFullYear();
- year = '';
- }
- $.post("/visualization/countAndPercent",{
- year:year
- },function (res) {
- // console.log("四个球 qiu res=", res)
- //渲染接口数量
- if(res.count.length > 0){
- $(".data1").remove();
- let tmpl = "";
- for(let i=0;i<res.count.length;i++){
- if (i==0){
- tmpl += "<div class='data1 data_left'><div class='qiu'>";
- }else{
- tmpl += "<div class='data1'><div class='qiu'>";
- }
- tmpl += "<p>"+res.count[i].count+"个</p>";
- tmpl += "</div>";
- tmpl += "<span>"+res.count[i].shareType+"</span></div>";
- }
- $(".con_sk").append(tmpl);
- }
- //渲染接口占比
- jkzb(res.percent);
- });
- }
- // 接口占比
- function jkzb(data) {
- // console.log("接口占比 data=", data)
- let percent = new Array();
- percent.push({'shareTypeDict': 'share_type_1', 'shareType': '市直共享接口', 'count': 0, 'percent': 0});
- percent.push({'shareTypeDict': 'share_type_2', 'shareType': '市直归集接口', 'count': 0, 'percent': 0});
- percent.push({'shareTypeDict': 'share_type_3', 'shareType': '省上报接口', 'count': 0, 'percent': 0});
- percent.push({'shareTypeDict': 'share_type_4', 'shareType': '省共享接口', 'count': 0, 'percent': 0});
- for(let i = 0; i < percent.length; i++){
- for(let j = 0; j < data.length; j++){
- if(percent[i].shareTypeDict == data[j].shareTypeDict){
- percent[i].shareType = data[j].shareType;
- percent[i].count = parseInt(data[j].count);
- percent[i].percent = parseInt(data[j].percent);
- }
- }
- }
- let trafficWay = [];
- let jsArr = [];
- let html = "";
- let classArr = ['sgj','sgx','sgj2','sgx2'];
- //把JSON格式处理为JSONArray并渲染
- if(percent.length>0){
- //渲染饼图
- for(let i=0;i<percent.length;i++){
- let js = {};
- js.name = percent[i].shareType;
- js.value = percent[i].count;
- jsArr.push(js);
- //组装页面元素
- html += '<div class="'+classArr[i]+' jkzb_list">';
- html += '<h3><i></i>'+percent[i].shareType+'</h3>';
- html += '<p><span>'+percent[i].count+'</span><span>'+percent[i].percent+'%</span></p>';
- html += '</div>';
- }
- trafficWay = jsArr;
- //渲染页面数据
- $("#pie_div").html("");
- $("#pie_div").append(html);
- }else{
- let html = '<div class="sgj jkzb_list">' +
- ' <h3><i></i>市归集</h3>' +
- ' <p><span>0</span><span>0%</span></p>' +
- '</div>' +
- '<div class="sgx jkzb_list">' +
- ' <h3><i></i>市共享</h3>' +
- ' <p><span>0</span><span>0%</span></p>' +
- '</div>' +
- '<div class="sgj2 jkzb_list">' +
- ' <h3><i></i>省归集</h3>' +
- ' <p><span>0</span><span>0%</span></p>' +
- '</div>' +
- '<div class="sgx2 jkzb_list">' +
- ' <h3><i></i>省共享</h3>' +
- ' <p><span>0</span><span>0%</span></p>' +
- '</div>';
- //渲染页面数据
- $("#pie_div").html("");
- $("#pie_div").append(html);
- }
- // 基于准备好的dom,初始化echarts实例
- var tootipTimer = null;
- var myChart1 = echarts.init(document.getElementById('pie_charts'));
- var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMDUtMjFUMDk6Mzk6MTArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTA1LTIxVDA5OjQwOjUwKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA1LTIxVDA5OjQwOjUwKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI4MTU0MTE4LWYyZGQtYmM0Ny05NmRkLTI2Nzg2M2FjMDUwNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5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"
- var nameArray = trafficWay.map(item => {
- return item.name
- })
- var data = [];
- var color = ['#ff3000', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000', '#ff3000']
- var size = 120
- var left = 60
- for (var i = 0; i < trafficWay.length; i++) {
- data.push({
- value: trafficWay[i].value,
- name: trafficWay[i].name,
- itemStyle: {
- normal: {
- borderWidth: 5,
- shadowBlur: 20,
- borderColor: color[i],
- shadowColor: color[i]
- }
- }
- });
- }
- var seriesOption = [{
- name: '',
- type: 'pie',
- clockWise: false,
- // 适配给你写好了
- radius: [72, 76],
- width: size,
- height: size,
- center: ['51%', '50%'],
- left: left,
- top: "center",
- hoverAnimation: false,
- itemStyle: {
- normal: {
- label: {
- show: false,
- position: 'outside',
- color: '#ddd',
- formatter: function (params) {
- var percent = 0;
- var total = 0;
- for (var i = 0; i < trafficWay.length; i++) {
- total += trafficWay[i].value;
- }
- percent = ((params.value / total) * 100).toFixed(0);
- if (params.name !== '') {
- return '接口占比:' + params.name + '\n' + '\n' + '占百分比:' + percent + '%';
- } else {
- return '';
- }
- },
- },
- }
- },
- data: data
- }];
- option = {
- // backgroundColor: '#01132e',
- color: color,
- graphic: {
- elements: [{
- type: "image",
- z: 3,
- style: {
- image: img,
- width: size,
- height: size
- },
- left: left,
- top: 'center',
- }]
- },
- legend: [{
- // 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`,
- orient: 'vertical',
- // x: 'left',
- data: nameArray.slice(4, 8),
- left: '10%',
- top: 'center',
- itemWidth: 15,
- align: 'left',
- textStyle: {
- color: "#fff"
- },
- itemGap: 20
- },
- {
- // 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`,
- orient: 'vertical',
- // x: 'left',
- data: nameArray.slice(0, 4),
- left: '10%',
- top: 'center',
- itemWidth: 15, show: false,
- align: 'left',
- textStyle: {
- color: "#fff"
- },
- itemGap: 20
- }],
- tooltip: {
- show: true
- },
- toolbox: {
- show: false
- },
- series: seriesOption
- }
- if (option) {
- myChart1.setOption(option);
- }
- // 可调用clearLoop方法,清除定时器
- tootipTimer && tootipTimer.clearLoop();
- tootipTimer = null;
- // 调用轮播的方法
- tootipTimer = tools.loopShowTooltip(myChart1, option, {
- interval: 2000, // 轮播间隔时间
- loopSeries: true // 是否开启轮播循环
- });
- }
- /***
- * 获取市接口调用频次top5和top20 统一由这个方法调用
- */
- function getCityFrequency(){
- $.post("/visualization/getCityFrequency",function (res) {
- sjk1(res.top5);
- sjk2(res.top20);
- });
- }
- /***
- * 获取省接口调用频次top5和top20 统一由这个方法调用
- */
- function getProvinceFrequency(){
- $.post("/visualization/getProvinceFrequency",function (res) {
- shjk2(res.top20);
- shjk1(res.top5);
- });
- }
- /***
- * 获取归集和接口排名 统一由这个方法调用
- */
- function imputationDataAndInterfaceRanking() {
- $.post("/visualization/getImputationDataAndInterfaceRanking",function (res) {
- jkgj(res.data);//归集数据排名
- jkgj2(res.interface);//归集接口排名
- });
- }
- /***
- * 获取归集数据分析 由这个方法调用
- */
- function imputationDataList(year) {
- if(year == null){
- // year = new Date().getFullYear();
- year = "";
- }
- $.post("/visualization/getImputationDataList",{
- year:year
- },function (res) {
- gjsj(res);
- });
- }
- function getFaultInterfaceCount() {
- $.post("/visualization/getFaultInterfaceCount",function (res) {
- $("#faultInterfaceCount").text(res);
- });
- }
- // 归集数据排名
- function jkgj(res) {
- //处理数据为数组
- let jsArr = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- let js = {};
- js.name = res[i].deptName;
- js.value = res[i].count;
- jsArr.push(js);
- }
- }
- let myChart22 = echarts.init(document.getElementById('jkgj'));
- let data = jsArr;
- let xAxisData = data.map(item => item.name)
- let xAxisDataReverse = data.map(item => item.name).reverse();
- let seriesData = data.map(item => item.value)
- let maxSeriesData = []
- // const MAX = Math.max(...seriesData)
- // for (let i = 0; i < seriesData.length; i++) {
- // maxSeriesData.push(MAX)
- // }
- let barLinearColors = [
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#EB3B5A"},
- {offset: 1, color: "#FE9C5A"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#FA8231"},
- {offset: 1, color: "#FFD14C"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#F7B731"},
- {offset: 1, color: "#FFEE96"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#395CFE"},
- {offset: 1, color: "#2EC7CF"}
- ])
- ]
- function rankBarColor(cData) {
- let tempData = []
- cData.forEach((item, index) => {
- tempData.push({
- value: item,
- itemStyle: {
- color: index > 3 ? barLinearColors[3] : barLinearColors[index]
- }
- })
- })
- return tempData
- }
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none',
- },
- // backgroundColor: 'rgba(50,50,50,.3)',
- textStyle: {
- color: '#fff'
- }
- },
- grid: {
- left: "-10%",
- right: "2%",
- width: "100%",
- bottom: "0%",
- top: "5%",
- containLabel: true
- },
- xAxis: {
- type: "value",
- splitLine: {show: false},
- axisLabel: {show: false},
- axisTick: {show: false},
- axisLine: {show: false}
- },
- yAxis: [
- {
- type: "category",
- inverse: true,
- axisLine: {show: false},
- axisTick: {show: false},
- data: xAxisData,
- axisLabel: {
- rich: {
- nt1: {
- color: "#fff",
- backgroundColor: '#EB3B5A',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt2: {
- color: "#fff",
- backgroundColor: '#FA8231',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt3: {
- color: "#fff",
- backgroundColor: '#F7B731',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt: {
- color: "#fff",
- backgroundColor: '#00a9c8',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- }
- },
- formatter: function (value, index) {
- let idx = index + 1
- if (idx <= 3) {
- return ["{nt" + idx + "|" + idx + "}"].join("\n");
- } else {
- return ["{nt|" + idx + "}"].join("\n");
- }
- }
- }
- },
- {//名称
- type: 'category',
- offset: -10,
- position: "left",
- axisLine: {show: false},
- axisTick: {show: false},
- axisLabel: {
- color: '#fff',
- align: "left",
- verticalAlign: "bottom",
- lineHeight: 30,
- fontSize: 12
- },
- data: xAxisDataReverse
- },
- ],
- series: [
- {
- zlevel: 1,
- type: "bar",
- barWidth: 13,
- data: rankBarColor(seriesData),
- itemStyle: {
- normal: {
- barBorderRadius: 30
- }
- },
- label: {
- align: "left",
- show: true,
- fontSize: 12,
- color: "#fff"
- }
- },
- {
- type: "bar",
- barWidth: 13,
- barGap: "-100%",
- itemStyle: {
- normal: {
- barBorderRadius: 30,
- color: 'rgba(27, 17, 134, 0.0)'
- }
- },
- data: maxSeriesData
- }
- ]
- };
- if (option) {
- myChart22.setOption(option);
- }
- myChart22.on('mouseover', function () {
- // stopShowTip();
- });
- myChart22.on('mouseout', function () {
- // autoShowTip();
- });
- }
- // 归集接口排名
- function jkgj2(res) {
- //处理数据为数组
- let jsArr = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- let js = {};
- js.name = res[i].deptName;
- js.value = res[i].count;
- jsArr.push(js);
- }
- }
- var myChart33 = echarts.init(document.getElementById('jkgj2'));
- let data = jsArr;
- let xAxisData = data.map(item => item.name)
- let xAxisDataReverse = data.map(item => item.name).reverse();
- let seriesData = data.map(item => item.value)
- let maxSeriesData = []
- // const MAX = Math.max(...seriesData)
- // for (let i = 0; i < seriesData.length; i++) {
- // maxSeriesData.push(MAX)
- // }
- let barLinearColors = [
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#EB3B5A"},
- {offset: 1, color: "#FE9C5A"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#FA8231"},
- {offset: 1, color: "#FFD14C"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#F7B731"},
- {offset: 1, color: "#FFEE96"}
- ]),
- new echarts.graphic.LinearGradient(0, 1, 1, 1, [
- {offset: 0, color: "#395CFE"},
- {offset: 1, color: "#2EC7CF"}
- ])
- ]
- function rankBarColor(cData) {
- let tempData = []
- cData.forEach((item, index) => {
- tempData.push({
- value: item,
- itemStyle: {
- color: index > 3 ? barLinearColors[3] : barLinearColors[index]
- }
- })
- })
- return tempData
- }
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none',
- },
- // backgroundColor: 'rgba(50,50,50,.3)',
- textStyle: {
- color: '#fff'
- }
- },
- grid: {
- left: "-10%",
- right: "2%",
- width: "100%",
- bottom: "0%",
- top: "5%",
- containLabel: true
- },
- xAxis: {
- type: "value",
- splitLine: {show: false},
- axisLabel: {show: false},
- axisTick: {show: false},
- axisLine: {show: false}
- },
- yAxis: [
- {
- type: "category",
- inverse: true,
- axisLine: {show: false},
- axisTick: {show: false},
- data: xAxisData,
- axisLabel: {
- rich: {
- nt1: {
- color: "#fff",
- backgroundColor: '#EB3B5A',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt2: {
- color: "#fff",
- backgroundColor: '#FA8231',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt3: {
- color: "#fff",
- backgroundColor: '#F7B731',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- },
- nt: {
- color: "#fff",
- backgroundColor: '#00a9c8',
- width: 16,
- height: 16,
- fontSize: 12,
- align: "center",
- borderRadius: 100,
- padding: [0, 1, 2, 1]
- }
- },
- formatter: function (value, index) {
- let idx = index + 1
- if (idx <= 3) {
- return ["{nt" + idx + "|" + idx + "}"].join("\n");
- } else {
- return ["{nt|" + idx + "}"].join("\n");
- }
- }
- }
- },
- {//名称
- type: 'category',
- offset: -10,
- position: "left",
- axisLine: {show: false},
- axisTick: {show: false},
- axisLabel: {
- color: '#fff',
- align: "left",
- verticalAlign: "bottom",
- lineHeight: 30,
- fontSize: 12
- },
- data: xAxisDataReverse
- },
- ],
- series: [
- {
- zlevel: 1,
- type: "bar",
- barWidth: 13,
- data: rankBarColor(seriesData),
- itemStyle: {
- normal: {
- barBorderRadius: 30
- }
- },
- label: {
- show: true,
- fontSize: 12,
- color: "#fff"
- }
- },
- {
- type: "bar",
- barWidth: 13,
- barGap: "-100%",
- itemStyle: {
- normal: {
- barBorderRadius: 30,
- color: 'rgba(27, 17, 134, 0.0)'
- }
- },
- data: maxSeriesData
- }
- ]
- };
- myChart33.setOption(option);
- myChart33.resize(
- {
- width: 430,
- height: 421
- }
- );
- }
- // 省接口调用频次top5
- function shjk1(res) {
- //将数据处理为三个数组,一个用于展示图例,一个用于渲染图表,一个用于美化
- let legend = [];
- let data = [];
- let fakeData = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- legend.push(res[i].deptName);
- let js = {};
- js.name = res[i].deptName;
- js.value = res[i].count;
- data.push(js);
- js.name = res[i].deptName;
- // js.value = res[i].count + 10;
- js.value = res[i].count;
- fakeData.push(js);
- }
- }
- // 基于准备好的dom,初始化echarts实例
- //省接口调用频次(左)
- var myChart44 = echarts.init(document.getElementById('shjk_div1'));
- option = {
- //backgroundColor: '#010f23',
- title: {
- text: '省接口调用频次Top5',
- subtext: '',
- link: '',
- target: 'blank',
- x: 'center',
- top: '20',
- textStyle: {
- color: '#FFF',
- fontSize: 12,
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c}"
- },
- legend: {
- data: legend,
- x: 'center',
- y: '92%',
- textStyle: {
- color: '#FFF',
- fontSize: '10'
- }, itemWidth: 4, itemHeight: 4
- },
- color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
- series: [
- {
- name: '省接口调用频次',
- type: 'funnel',
- left: 'center',
- width: '70%',
- sort: 'ascending',
- label: {
- normal: {
- formatter: '{b}',
- },
- },
- labelLine: {
- normal: {
- show: true,
- length: 30
- }
- },
- itemStyle: {
- normal: {
- opacity: 0.3
- }
- },
- tooltip: {
- show: false
- },
- //虚影 假数据 为了好看
- data: fakeData
- },
- {
- name: '省接口调用频次',
- type: 'funnel',
- left: 'center',
- width: '70%',
- maxSize: '70%',
- sort: 'ascending',
- label: {
- normal: {
- position: 'inside',
- formatter: '{c}',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- }
- },
- emphasis: {
- position: 'inside',
- // formatter: '{b}: {c}'//省悬浮
- }
- },
- itemStyle: {
- normal: {
- opacity: 8,
- borderColor: 'rgba(12, 13, 43, .9)',
- borderWidth: 3,
- shadowBlur: 5,
- shadowOffsetX: 0,
- shadowOffsetY: 5,
- shadowColor: 'rgba(0, 0, 0, .6)'
- }
- },
- data: data
- }
- ]
- };
- if (option) {
- myChart44.setOption(option);//省接口调用频次(左)
- }
- }
- // 省接口调用频次排名
- function shjk2(res) {
- //将数据处理为两个数组
- let legend = [];
- let data = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- legend.push(res[i].deptName);
- data.push(res[i].count);
- }
- }
- // 基于准备好的dom,初始化echarts实例
- //省接口调用频次(右)坏了的
- let tootipTimer = null;
- let myChart45 = echarts.init(document.getElementById('shjk_div2'));
- let dataX = legend; //名称
- let dataY = data; //数据
- let zoomShow = false;
- if (dataY.length > 15) {
- zoomShow = true;
- } else {
- zoomShow = false;
- }
- var option = {
- // backgroundColor: '#010f23',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- top: '10%',
- right: '5%',
- left: '10%',
- bottom: '23%',
- },
- xAxis: [
- {
- type: 'category',
- data: dataX,
- axisLine: {
- lineStyle: {
- color: 'rgba(66, 192, 255, .3)',
- },
- },
- axisLabel: {
- interval: 0,
- margin: 10,
- color: '#fff',
- textStyle: {
- fontSize: 11,
- },
- rotate: '45',
- },
- axisTick: {//刻度
- show: false,
- },
- },
- ],
- yAxis: [
- {
- axisLabel: {
- padding: [3, 0, 0, 0],
- formatter: '{value}',
- color: 'rgba(95, 187, 235, 1)',
- textStyle: {
- fontSize: 12,
- },
- },
- axisTick: {
- show: true,
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(66, 192, 255, .3)',
- },
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255,255,255,0)',
- },
- },
- },
- ],
- dataZoom: [//滚动条
- {
- show: zoomShow,
- type: 'slider',
- realtime: true,
- startValue: 0,
- endValue: 15,
- xAxisIndex: [0],
- bottom: '10',
- left: '30',
- height: 5,
- borderColor: 'rgba(0,0,0,0)',
- textStyle: {
- color: '#fff',
- },
- },
- ],
- series: [
- {
- type: 'bar',
- data: dataY,
- barWidth: '12',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
- },
- {
- offset: 0.98,
- color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
- },
- ],
- false
- ),
- shadowColor: 'rgba(1, 34, 62, 1)',
- shadowBlur: 4,
- barBorderRadius: [10, 10, 0, 0]
- },
- },
- label: {
- normal: {
- show: true,
- lineHeight: 10,
- formatter: '{c}',
- position: 'top',
- textStyle: {
- color: '#fff',
- fontSize: 10,
- },
- },
- },
- },
- ],
- };
- if (option) {
- myChart45.setOption(option);//省接口调用频次(右)坏了的
- }
- // 可调用clearLoop方法,清除定时器
- tootipTimer && tootipTimer.clearLoop();
- tootipTimer = null;
- // 调用轮播的方法
- tootipTimer = tools.loopShowTooltip(myChart45, option, {
- interval: 2500, // 轮播间隔时间
- loopSeries: true // 是否开启轮播循环
- });
- /*let loopSeriesMyChart45 = true;
- // 可调用clearLoop方法,清除定时器
- tootipTimer && tootipTimer.clearLoop();
- tootipTimer = null;
- // 调用轮播的方法
- tootipTimer = tools.loopShowTooltip(myChart45, option, {
- interval: 2000, // 轮播间隔时间
- loopSeries: loopSeriesMyChart45 // 是否开启轮播循环
- // loopSeries: true // 是否开启轮播循环
- });*/
- }
- // 市接口调用频次top5
- function sjk1(res) {
- //将数据处理为三个数组,一个用于展示图例,一个用于渲染图表,一个用于美化
- let legend = [];
- let data = [];
- let fakeData = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- legend.push(res[i].deptName);
- let js = {};
- js.name = res[i].deptName;
- js.value = res[i].count;
- data.push(js);
- js.name = res[i].deptName;
- // js.value = res[i].count + 10;
- js.value = res[i].count;
- fakeData.push(js);
- }
- }
- // 基于准备好的dom,初始化echarts实例
- //市接口调用频次(左)
- var myChart55 = echarts.init(document.getElementById('sjk_div1'));
- option = {
- //backgroundColor: '#010f23',
- title: {
- text: '市接口调用频次Top5',
- subtext: '',
- link: '',
- target: 'blank',
- x: 'center',
- top: '20',
- textStyle: {
- color: '#FFF',
- fontSize: 12,
- }
- },
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c}"
- },
- legend: {
- data: legend,
- x: 'center',
- y: '92%',
- textStyle: {
- color: '#FFF',
- fontSize: '10'
- }, itemWidth: 4, itemHeight: 4
- },
- color: ['#00a1e5', '#23c768', '#e5ce10', '#ff7e00', '#fe0000', '#c2c1bd',],
- series: [
- {
- name: '市接口调用频次',
- type: 'funnel',
- left: 'center',
- width: '60%',
- sort: 'ascending',
- label: {
- normal: {
- formatter: '{b}',
- },
- },
- labelLine: {
- normal: {
- show: true,
- length: 30
- }
- },
- itemStyle: {
- normal: {
- opacity: 0.3
- }
- },
- tooltip: {
- show: false
- },
- //虚影(假数据,为了好看)
- data: fakeData
- },
- {
- name: '市接口调用频次',
- type: 'funnel',
- left: 'center',
- width: '70%',
- maxSize: '70%',
- sort: 'ascending',
- label: {
- normal: {
- position: 'inside',
- formatter: '{c}',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- }
- },
- emphasis: {
- position: 'inside',
- // formatter: '{b}: {c}'//市悬浮
- }
- },
- itemStyle: {
- normal: {
- opacity: 8,
- borderColor: 'rgba(12, 13, 43, .9)',
- borderWidth: 3,
- shadowBlur: 5,
- shadowOffsetX: 0,
- shadowOffsetY: 5,
- shadowColor: 'rgba(0, 0, 0, .6)'
- }
- },
- data: data
- }
- ]
- };
- if (option) {
- myChart55.setOption(option);//市接口调用频次(左)
- }
- }
- // 市接口调用频次排名
- //市接口调用频次(右)
- function sjk2(res) {
- //将数据处理为两个数组
- let legend = [];
- let data = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- legend.push(res[i].deptName);
- data.push(res[i].count);
- }
- }
- var tootipTimer = null;
- // 基于准备好的dom,初始化echarts实例
- var myChart56 = echarts.init(document.getElementById('sjk_div2'));
- let dataX = legend; //名称
- let dataY = data; //数据
- let zoomShow = false;
- if (dataY.length > 15) {
- zoomShow = true;
- } else {
- zoomShow = false;
- }
- var option = {
- // backgroundColor: '#010f23',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- top: '10%',
- right: '5%',
- left: '10%',
- bottom: '23%',
- },
- xAxis: [
- {
- type: 'category',
- data: dataX,
- axisLine: {
- lineStyle: {
- color: 'rgba(66, 192, 255, .3)',
- },
- },
- axisLabel: {
- interval: 0,
- margin: 10,
- color: '#fff',
- textStyle: {
- fontSize: 11,
- },
- rotate: '45',
- },
- axisTick: {//刻度
- show: false,
- },
- },
- ],
- yAxis: [
- {
- axisLabel: {
- padding: [3, 0, 0, 0],
- formatter: '{value}',
- color: 'rgba(95, 187, 235, 1)',
- textStyle: {
- fontSize: 12,
- },
- },
- axisTick: {
- show: true,
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(66, 192, 255, .3)',
- },
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255,255,255,0)',
- },
- },
- },
- ],
- dataZoom: [//滚动条
- {
- show: zoomShow,
- type: 'slider',
- realtime: true,
- startValue: 0,
- endValue: 15,
- xAxisIndex: [0],
- bottom: '10',
- left: '30',
- height: 5,
- borderColor: 'rgba(0,0,0,0)',
- textStyle: {
- color: '#fff',
- },
- },
- ],
- series: [
- {
- type: 'bar',
- data: dataY,
- barWidth: '12',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: 'rgba(5, 64, 250, 1)', // 0% 处的颜色
- },
- {
- offset: 0.98,
- color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
- },
- ],
- false
- ),
- shadowColor: 'rgba(1, 34, 62, 1)',
- shadowBlur: 4,
- barBorderRadius: [10, 10, 0, 0]
- },
- },
- label: {
- normal: {
- show: true,
- lineHeight: 10,
- formatter: '{c}',
- position: 'top',
- textStyle: {
- color: '#fff',
- fontSize: 10,
- },
- },
- },
- },
- ],
- };
- if (option) {
- myChart56.setOption(option);//市接口调用频次(右)
- }
- // 可调用clearLoop方法,清除定时器
- tootipTimer && tootipTimer.clearLoop();
- tootipTimer = null;
- // 调用轮播的方法
- tootipTimer = tools.loopShowTooltip(myChart56, option, {
- interval: 2500, // 轮播间隔时间
- loopSeries: true // 是否开启轮播循环
- });
- }
- // 归集数据频次分析
- function gjsj(res) {
- //将数据处理为数组
- let title = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
- let _data = [];
- let _coords = [];
- if(res.length > 0){
- for(let i=0;i<res.length;i++){
- _data.push(res[i]);
- let element = [];
- element.push(title[i]);
- element.push(res[i]);
- _coords.push(element);
- }
- }
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('gjsj'));
- var img = [
- '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',
- 'image://data:image/png;base64,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',
- 'image://data:image/png;base64,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',
- 'image://data:image/png;base64,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',
- ]
- var data = [{
- /**_coords**/
- coords: _coords
- }]
- option = {
- // backgroundColor:'#011024',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#0d3fb7'
- }
- }
- },
- grid: {
- top: '15%',
- left: '5%',
- right: '5%',
- bottom: '15%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- axisLine: {
- show: true,
- color: '#0d3fb7'
- },
- axisLabel: {
- color: '#fff'
- },
- splitLine: {
- show: false
- },
- boundaryGap: true,
- /**title**/
- data: title,
- }],
- yAxis: [{
- type: 'value',
- min: 0,
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,0.1)'
- }
- },
- axisLine: {
- show: true,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#d1e6eb',
- },
- },
- axisTick: {
- show: false,
- },
- }],
- series: [{
- name: '归集数据频次分析',
- type: 'line',
- smooth: false, //是否平滑
- showAllSymbol: true,
- symbol: 'circle',
- symbolSize: 10,
- lineStyle: {
- normal: {
- color: "#0d3fb7",
- shadowColor: 'rgba(0, 0, 0, .3)',
- shadowBlur: 0,
- shadowOffsetY: 5,
- shadowOffsetX: 5,
- },
- },
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: '#fff'
- }
- },
- itemStyle: {
- color: "#0d3fb7",
- borderColor: "#fff",
- borderWidth: 3,
- shadowColor: 'rgba(0, 0, 0, .3)',
- shadowBlur: 0,
- shadowOffsetY: 2,
- shadowOffsetX: 2,
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(108,80,243,0.3)'
- },
- {
- offset: 1,
- color: 'rgba(108,80,243,0)'
- }
- ], false),
- shadowColor: 'rgba(108,80,243, 0.9)',
- shadowBlur: 20
- }
- },
- data: _data
- },
- {
- name: '滑行的光点',
- type: 'lines',
- coordinateSystem: 'cartesian2d',
- symbolSize: 30,
- polyline: true,
- effect: {
- show: true,
- trailLength: 0,
- symbol: "arrow",
- period: 10, //光点滑动速度
- symbolSize: 150,
- symbol: img[0]
- },
- lineStyle: {
- normal: {
- width: 1,
- opacity: 0.6,
- curveness: 0.2
- }
- },
- /**_data**/
- data: data
- }
- ]
- };
- if (option) {
- myChart.setOption(option);
- }
- }
|