gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改问题

Browse Source 
1 tooltop颜色随机功能暂时注释
2 echart图表曲线图颜色与legend和tooltip不一致
This commit is contained in:
hyx
2020-04-17 22:43:28 +08:00
parent 0c5822b941
commit ac72c455c7
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -589,7 +589,7 @@ export default {
if (response.data.result) { if (response.data.result) {
// console.log(response.data.result) // console.log(response.data.result)
// 循环处理每个elements下获取的数据列 // 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem) => { response.data.result.forEach((queryItem,resIndex) => {
const seriesItem = { const seriesItem = {
theData: { theData: {
name: '', name: '',
@@ -634,12 +634,13 @@ export default {
if(!alias || alias===''){ if(!alias || alias===''){
alias = chartItem.elements[innerPos].expression; alias = chartItem.elements[innerPos].expression;
} }
//if(alias){ if(alias){
//host = alias; host = alias;
//} }
legend.push({name:host,alias:alias}); legend.push({name:host+resIndex,alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host+resIndex;
//alert(seriesItem.theData.name);
seriesItem.metric_name = seriesItem.theData.name; seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒 // 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem)) //alert('table=='+JSON.stringify(queryItem))

29
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -95,7 +95,7 @@
import bus from '../../libs/bus'; import bus from '../../libs/bus';
import loading from "../common/loading"; import loading from "../common/loading";
import chartDataFormat from './chartDataFormat' import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js' //import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
export default { export default {
name: 'chartPreview', name: 'chartPreview',
@@ -136,7 +136,14 @@
screenLegendList:[], screenLegendList:[],
isGrey:[], isGrey:[],
isGreyScreen:[], 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, // 默认不显示操作按钮, //firstShow: false, // 默认不显示操作按钮,
//dropdownMenuShow:false, //dropdownMenuShow:false,
showLegend:true, showLegend:true,
@@ -384,7 +391,7 @@ console.log('=======',this.chart);
if (response.data.result) { if (response.data.result) {
// console.log(response.data.result) // console.log(response.data.result)
// 循环处理每个elements下获取的数据列 // 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem) => { response.data.result.forEach((queryItem,resInnerPos) => {
const seriesItem = { const seriesItem = {
theData: { theData: {
name: '', name: '',
@@ -427,9 +434,12 @@ console.log('=======',this.chart);
if(!alias || alias===''){ if(!alias || alias===''){
alias = chartItem.elements[innerPos].expression; 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 // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host+resInnerPos;
seriesItem.metric_name = seriesItem.theData.name; seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒 // 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem)) //alert('table=='+JSON.stringify(queryItem))
@@ -855,7 +865,7 @@ console.log('=======',this.chart);
}, },
// 设置数据 // 设置数据
setData(chartItem, seriesItem,legend) { setData(chartItem, seriesItem,legend) {
this.setColor(legend.length); //this.setColor(legend.length);
this.legend = legend; this.legend = legend;
//this.data = chartItem; //this.data = chartItem;
//this.seriesItem = seriesItem; //this.seriesItem = seriesItem;
@@ -1006,9 +1016,12 @@ console.log('=======',this.chart);
if(!alias || alias===''){ if(!alias || alias===''){
alias = this.chart.elements[pos].expression; 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 // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host+innerPos;
seriesItem.metric_name = seriesItem.theData.name; seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒 // 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem)) //alert('table=='+JSON.stringify(queryItem))

17
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -120,7 +120,7 @@
import bus from '../../libs/bus'; import bus from '../../libs/bus';
import loading from "../common/loading"; import loading from "../common/loading";
import chartDataFormat from './chartDataFormat' import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js' //import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
export default { export default {
name: 'lineChartBlock', name: 'lineChartBlock',
@@ -183,13 +183,13 @@
screenLegendList:[], screenLegendList:[],
isGrey:[], isGrey:[],
isGreyScreen:[], isGreyScreen:[],
bgColorList: [/*'#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758', bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
'#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF', '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
'#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920', '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
'#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9', '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b', '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc', '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',*/ '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
], ],
firstShow: false, // 默认不显示操作按钮, firstShow: false, // 默认不显示操作按钮,
caretShow:false, caretShow:false,
@@ -1124,12 +1124,12 @@
setColor(colorNum){ setColor(colorNum){
this.bgColorList = []; this.bgColorList = [];
for(let i=0;i<colorNum;i++) { for(let i=0;i<colorNum;i++) {
this.bgColorList.push(randomcolor()) //this.bgColorList.push(randomcolor())
} }
}, },
// 设置数据, filter区分 // 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend,area) { setData(chartItem, seriesItem, panelId, filter,legend,area) {
this.setColor(legend.length); //this.setColor(legend.length);
if(area==='showFullScreen'){//全屏按时间查询 if(area==='showFullScreen'){//全屏按时间查询
/* /*
this.legend = legend; this.legend = legend;
@@ -1347,9 +1347,12 @@
if(!alias || alias===''){ if(!alias || alias===''){
alias = this.data.elements[pos].expression; alias = this.data.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 // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host; seriesItem.theData.name = host+innerPos;
seriesItem.metric_name = seriesItem.theData.name; seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒 // 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem)) //alert('table=='+JSON.stringify(queryItem))