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

fix：修改问题

Browse Source 
1 dashboard模块prometheus查询接口query内容进行encode
2 panel下拉列表位置左侧菜单收缩后显示异常
3 echarts图表对于返回数据metric为空图表，tooltip无法正常显示修改（列表及全屏，预览及全屏，explore及全屏）
4 图表tooltip中的冒号删掉
5 metric选择，metric及label高度为100%，无滚动条
6 增加网格，取消y轴
7 tooltip内容和legend内容显示不一致
8 tooltip颜色随机产生
This commit is contained in:
hyx
2020-04-17 21:50:26 +08:00
parent 0a35cba5cc
commit 7cafaf12da
7 changed files with 575 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,8 +17,9 @@
}
#chartPreviewDailog .el-dialog__body {
padding-bottom:5px !important;
padding-bottom:20px !important;
}
</style>
<template>
<el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
@@ -94,6 +95,7 @@
import bus from '../../libs/bus';
import loading from "../common/loading";
import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
export default {
name: 'chartPreview',
@@ -134,14 +136,7 @@
screenLegendList:[],
isGrey:[],
isGreyScreen:[],
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',
],
bgColorList: [],
//firstShow: false, // 默认不显示操作按钮,
//dropdownMenuShow:false,
showLegend:true,
@@ -662,9 +657,10 @@ console.log('=======',this.chart);
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
params.forEach((item, i) => {
let tip=legend.find((element)=>{
return element.name == item.seriesName;
});
//let tip=legend.find((element)=>{
//return element.name == item.seriesName;
//});
let tip=legend[i];
if(i===0){
let t_date = new Date(item.data[0]);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -676,7 +672,7 @@ console.log('=======',this.chart);
val = Number(item.data[1]);
}
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}: </div>`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
@@ -777,7 +773,7 @@ console.log('=======',this.chart);
show: true,
},
splitLine:{
show:false
show:true
}
},
yAxis: {
@@ -785,6 +781,14 @@ console.log('=======',this.chart);
splitLine:{
show:true
},
//去掉y轴--start
axisLine:{
show:false
},
axisTick: {
show: false,
},
//去掉y轴--end
axisLabel: {
formatter: function(value,index){
let chartUnit=chartInfo.unit;
@@ -843,8 +847,15 @@ console.log('=======',this.chart);
})
}
},
setColor(colorNum){
this.bgColorList = [];
for(let i=0;i<colorNum;i++) {
this.bgColorList.push(randomcolor())
}
},
// 设置数据
setData(chartItem, seriesItem,legend) {
this.setColor(legend.length);
this.legend = legend;
//this.data = chartItem;
//this.seriesItem = seriesItem;