From ac72c455c72659d1675f408b3d3bcfbc2c5e9a00 Mon Sep 17 00:00:00 2001 From: hyx Date: Fri, 17 Apr 2020 22:43:28 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE?= =?UTF-8?q?=E9=A2=98=201=20tooltop=E9=A2=9C=E8=89=B2=E9=9A=8F=E6=9C=BA?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=9A=82=E6=97=B6=E6=B3=A8=E9=87=8A=202=20ec?= =?UTF-8?q?hart=E5=9B=BE=E8=A1=A8=E6=9B=B2=E7=BA=BF=E5=9B=BE=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E4=B8=8Elegend=E5=92=8Ctooltip=E4=B8=8D=E4=B8=80?= =?UTF-8?q?=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 13 +++++---- .../src/components/charts/chartPreview.vue | 29 ++++++++++++++----- .../components/charts/line-chart-block.vue | 17 ++++++----- 3 files changed, 38 insertions(+), 21 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 95f17ffba..2579285bd 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -589,7 +589,7 @@ export default { if (response.data.result) { // console.log(response.data.result) // 循环处理每个elements下获取的数据列 - response.data.result.forEach((queryItem) => { + response.data.result.forEach((queryItem,resIndex) => { const seriesItem = { theData: { name: '', @@ -634,12 +634,13 @@ export default { if(!alias || alias===''){ alias = chartItem.elements[innerPos].expression; } - //if(alias){ - //host = alias; - //} - legend.push({name:host,alias:alias}); + if(alias){ + host = alias; + } + legend.push({name:host+resIndex,alias:alias}); // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c - seriesItem.theData.name = host; + seriesItem.theData.name = host+resIndex; + //alert(seriesItem.theData.name); seriesItem.metric_name = seriesItem.theData.name; // 将秒改为毫秒 //alert('table=='+JSON.stringify(queryItem)) diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index 3f8518253..604b40a7f 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -95,7 +95,7 @@ import bus from '../../libs/bus'; import loading from "../common/loading"; import chartDataFormat from './chartDataFormat' - import {randomcolor} from '../common/js/radomcolor/randomcolor.js' + //import {randomcolor} from '../common/js/radomcolor/randomcolor.js' export default { name: 'chartPreview', @@ -136,7 +136,14 @@ screenLegendList:[], isGrey:[], isGreyScreen:[], - bgColorList: [], + bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', + '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF', + '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920', + '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9', + '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b', + '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc', + '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e', + ], //firstShow: false, // 默认不显示操作按钮, //dropdownMenuShow:false, showLegend:true, @@ -384,7 +391,7 @@ console.log('=======',this.chart); if (response.data.result) { // console.log(response.data.result) // 循环处理每个elements下获取的数据列 - response.data.result.forEach((queryItem) => { + response.data.result.forEach((queryItem,resInnerPos) => { const seriesItem = { theData: { name: '', @@ -427,9 +434,12 @@ console.log('=======',this.chart); if(!alias || alias===''){ alias = chartItem.elements[innerPos].expression; } - legend.push({name:host,alias:alias}); + if(alias){ + host = alias; + } + legend.push({name:host+resInnerPos,alias:alias}); // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c - seriesItem.theData.name = host; + seriesItem.theData.name = host+resInnerPos; seriesItem.metric_name = seriesItem.theData.name; // 将秒改为毫秒 //alert('table=='+JSON.stringify(queryItem)) @@ -855,7 +865,7 @@ console.log('=======',this.chart); }, // 设置数据 setData(chartItem, seriesItem,legend) { - this.setColor(legend.length); + //this.setColor(legend.length); this.legend = legend; //this.data = chartItem; //this.seriesItem = seriesItem; @@ -1006,9 +1016,12 @@ console.log('=======',this.chart); if(!alias || alias===''){ alias = this.chart.elements[pos].expression; } - legend.push({name:host,alias:alias}); + if(alias){ + host = alias; + } + legend.push({name:host+innerPos,alias:alias}); // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c - seriesItem.theData.name = host; + seriesItem.theData.name = host+innerPos; seriesItem.metric_name = seriesItem.theData.name; // 将秒改为毫秒 //alert('table=='+JSON.stringify(queryItem)) diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index b36f9f07f..37d1ccfc2 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -120,7 +120,7 @@ import bus from '../../libs/bus'; import loading from "../common/loading"; import chartDataFormat from './chartDataFormat' - import {randomcolor} from '../common/js/radomcolor/randomcolor.js' + //import {randomcolor} from '../common/js/radomcolor/randomcolor.js' export default { name: 'lineChartBlock', @@ -183,13 +183,13 @@ screenLegendList:[], isGrey:[], isGreyScreen:[], - bgColorList: [/*'#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', + bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF', '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920', '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9', '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b', '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc', - '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',*/ + '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e', ], firstShow: false, // 默认不显示操作按钮, caretShow:false, @@ -1124,12 +1124,12 @@ setColor(colorNum){ this.bgColorList = []; for(let i=0;i