@@ -195,12 +176,14 @@
import loading from "../../loading";
import bus from "../../../../libs/bus";
import chartDataFormat from "../../../charts/chartDataFormat";
+ import chart from '../../../page/dashboard/overview/chart'
var timeout;
export default {
name: "endpointQueryTab",
components: {
'chart-box': chartBox,
- 'loading': loading
+ 'loading': loading,
+ 'chart':chart
},
props: {
obj: Object, //关联的实体对象
@@ -223,268 +206,8 @@
selectedEndpoints:[],//选中的metric{label='value'}
chartDatas:[],//从query_range查询到的数据
legend:[],//echart legend
- graphChart:null,//图标对象
graphShow:false,
- searchTime:[],
- pickerOptions: {
- shortcuts: [
- {
- text: this.$t("dashboard.panel.recOne"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setHours(start.getHours() - 1);
- picker.$emit('pick', [start, end]);
- }
- },{
- text: this.$t("dashboard.panel.recFour"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setHours(start.getHours() - 4);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: this.$t("dashboard.panel.recOneDay"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setDate(start.getDate() - 1);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: this.$t("dashboard.panel.yesterday"),
- onClick(picker) {
- const start = new Date();
- const end = new Date();
- start.setDate(start.getDate() - 1);
- start.setHours(0);
- start.setMinutes(0);
- start.setSeconds(0);
- end.setDate(end.getDate() - 1);
- end.setHours(23);
- end.setMinutes(59);
- end.setSeconds(59);
- picker.$emit('pick', [start, end]);
- }
- },{
- text: this.$t("dashboard.panel.recSevenDay"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setDate(start.getDate() - 7);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: this.$t("dashboard.panel.recOneMonth"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setDate(start.getDate() - 30);
- picker.$emit('pick', [start, end]);
- }
- }, {
- text: this.$t("dashboard.panel.curMonth"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setDate(1);
- start.setHours(0);
- start.setMinutes(0);
- picker.$emit('pick', [start, end]);
- }
- },{
- text: this.$t("dashboard.panel.lastMonth"),
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setDate(1);
- start.setMonth(start.getMonth() - 1);
- end.setDate(0);
- start.setStart();
- end.setEnd();
- picker.$emit('pick', [start, end]);
- }
- }]
- },
- chartOptions:{
- color: temp.bgColorList,
- title: {
- text: ""
- },
- tooltip: {
- trigger: 'axis',
- confine:false,
- extraCssText:'z-index:1000;',
- /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
- position:function(point,params,dom,rect,size){
- dom.style.transform = "translateZ(0)";
- //提示框位置
- var x=0;
- var y=0;
- //当前鼠标位置
- var pointX = point[0];
- var pointY = point[1];
- //外层div大小
- var viewWidth = size.viewSize[0];
- var viewHeight = size.viewSize[1];
- //提示框大小
- var boxWidth = size.contentSize[0];
- var boxHeight = size.contentSize[1];
- if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
- x=pointX+10;
- }else{
- x = pointX - boxWidth;
- }
- if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
- y = pointY+10;
- }else {
- y = pointY-boxHeight;
- }
- return [x,y];
- },
- formatter:function(params){
- //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
- let str = `
`;
- params.forEach((item, i) => {
- let tip=temp.legend.find((element)=>{
- return element.name == item.seriesName;
- })
- if(i===0){
- let value=bus.computeTimezone(item.data[0]);
- let t_date = new Date(value);
- str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
- + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
- str +=`
`;
- }
- let val = parseFloat(Number(item.data[1]).toFixed(2));
- if(val===0){
- val = Number(item.data[1]);
- }
- str += `
`;
- str += `
${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:
`;
- str += `
`;
- str += chartDataFormat.short(val,null,2);
- str += `
`;
- str += `
`;
- });
- str +=`
`;
- return str;
- },
- },
- legend: {
- show:false,
- type:'scroll',
- height:80,
- icon:"roundRect",
- itemHeight:5,
- itemWidth:15,
- data:[],
- orient:'vertical',
- formatter:function(name){
- if(!name){
- return '';
- }
- //计算宽度
- let chartWidth=temp.$refs.viewGraphChart.clientWidth;
- var span = document.createElement("span");
- var result = {};
- result.width = span.offsetWidth;
- result.height = span.offsetHeight;
- span.style.visibility = "hidden";
- span.style.fontSize = 14;
- span.style.fontFamily = "Arial";
- span.style.display = "inline-block";
- document.body.appendChild(span);
- if(typeof span.textContent != "undefined"){
- span.textContent = name;
- }else{
- span.innerText = name;
- }
- var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
- document.body.removeChild(span);
-
- if(txtWidth < chartWidth){
- return name;
- }else {
- var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
- return name.slice(0,charNum)+'...';
- }
- },
- tooltip:{
- show:true,
- formatter:function(params){
- //console.log("params")
- //console.log(params);
- return `
${params.name}
`;
- },
- },
- orient:'vertical',
- x:'center',
- y:'bottom',
- },
- grid: {
- top: 13,
- left: 0,
- right: 30,
- containLabel: true,
- bottom:35,//156
- },
- dataZoom: [{
- type: 'slider',
- show:true,
- xAxisIndex: [0],
- start: 0,
- end: 100,
- height:25,
- bottom:10//96
- }],
-
- xAxis: {
- type: 'time',
- axisLabel: {
- intervale: 0,
- rotate: 0,
- formatter: function (value) {
- value = bus.computeTimezone(value);
- var t_date = new Date(value);
- return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
- + [t_date.getHours(), t_date.getMinutes()].join(':');
- }
- },
- axisPointer: {//y轴上显示指针对应的值
- show: true,
- },
- splitLine:{
- show:false
- }
- },
- yAxis: {
- type: 'value',
- splitLine:{
- show:true
- },
- axisLabel: {
- formatter: function(num,index) {
- return chartDataFormat.short(num,index)
- },
- },
- },
- useUTC: false,//使用本地时间
- series: []
- },
- legendList:[],
- 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',
- ],
+ searchTime:[new Date().setHours(new Date().getHours() - 1), new Date()],
panelData: [], //chart-box的panel下拉框数据,
hideSameLabels: true,
sameLabels:['instance','module','project','asset','endpoint','datacenter'],
@@ -494,85 +217,6 @@
changeTab(tab) {
this.$emit('changeTab', tab);
},
- clickLegend(legendName,index){
- //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
- let curIsGrey=this.isGrey[index];
- if(this.graphChart){
- this.legend.forEach((item,i)=>{
- let isGrey = this.isGrey[i];
- if(index != i){
- if(!curIsGrey && !isGrey){
- this.graphChart.dispatchAction({
- type: 'legendUnSelect',
- name: item.name
- });
- }else if(!curIsGrey && isGrey){
- this.graphChart.dispatchAction({
- type: 'legendSelect',
- name: item.name
- });
- }else{
- this.graphChart.dispatchAction({
- type: 'legendUnSelect',
- name: item.name
- });
- }
- }else {
- this.graphChart.dispatchAction({
- type: 'legendSelect',
- name: item.name
- });
- }
- })
- this.isGrey.forEach((item,i)=>{
- if(index != i){
- if(!curIsGrey && !item){
- this.$set(this.isGrey, i, true);
- }else if(!curIsGrey && item){
- this.$set(this.isGrey, i, false);
- }else{
- this.$set(this.isGrey, i, true);
- }
- }else{
- if(item === true){
- this.$set(this.isGrey, i, false);
- }
- }
- })
- }
- },
- formatLegend(name,chartWidth){
- if(!name){
- return '';
- }
- if(!chartWidth){
- this.$refs.viewGraphChart.clientWidth;
- }
- //计算宽度
- var span = document.createElement("span");
- var result = {};
- result.width = span.offsetWidth;
- result.height = span.offsetHeight;
- span.style.visibility = "hidden";
- span.style.fontSize = 14;
- span.style.fontFamily = "Arial";
- span.style.display = "inline-block";
- document.body.appendChild(span);
- if(typeof span.textContent != "undefined"){
- span.textContent = name;
- }else{
- span.innerText = name;
- }
- var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
- document.body.removeChild(span);
-
- if(txtWidth < chartWidth){
- return name;
- }else {
- var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
- return name.slice(0,charNum)+'...';
- }
- },
saveChart() { //新增chart
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
@@ -771,8 +415,7 @@
this.legend = [];
this.graphShow = true;
this.$nextTick(() => {
- this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
- this.$refs.graphLoading.startLoading();
+ this.$refs.endpointChart.startLoading();
this.queryChartDate();
});
/*setTimeout(()=> {
@@ -808,7 +451,6 @@
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+endpoint.element+"&start="+start+"&end="+end+"&step="+step));
}
this.legend=[];
- this.isGrey=[];
axios.all(axiosArr).then(res =>{
res.forEach((response,promIndex)=>{
if (response.status == 200) {
@@ -843,10 +485,10 @@
let legend={
name:chartData.name,
alias:alias,
- showText:this.formatLegend(chartData.name)
+ // showText:this.formatLegend(chartData.name),
+ isGray:false
}
this.legend.push(legend);
- this.isGrey.push(false);
chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])];
});
@@ -859,25 +501,14 @@
}
});
this.$nextTick(()=>{
- if(this.graphChart){
- this.graphChart.clear();
- this.chartOptions.color=this.bgColorList;
- this.chartOptions.series=this.chartDatas;
- this.graphChart.setOption(this.chartOptions);//创建图表
- }
- this.$refs.chartScrollbar.update();
- this.$refs.graphLoading.endLoading();
+ this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
+ this.$refs.endpointChart.setLegend(this.legend)
+ this.$refs.endpointChart.setSeries(this.chartDatas);
+ this.$refs.endpointChart.endLoading();
});
})
},
- dateChange:function(){
- if(this.graphChart){
- this.graphChart.clear();
- this.queryChartDate();
- }
-
- },
cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’
if (row.columnIndex === 0) {
return 'disabledCheck'
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index ba6057c88..7596f4f2f 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -30,7 +30,7 @@
'loading':loading,
},
props:{
- name: {type: String},
+ name: {type: String,default:'chart'},
chartTitle:{type:String},
showToolbox:{type:Boolean,default:true},
chartType:{type:String,default:'line'},
@@ -55,7 +55,7 @@
},
methods:{
modifyOption:function(target,name,obj){
- if(this.option){
+ if(!this.option){
this.option=chartConfig.getOption(this.chartType);
}
this.$set(this.option[target],name,obj)
@@ -78,7 +78,7 @@
}
}
- if(this.option){
+ if(!this.option){
this.option=chartConfig.getOption(this.chartType);
}
@@ -97,7 +97,7 @@
this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
}
}
-
+ console.log(this.option)
this.$set(this.option,'series',this.series);
this.chart.clear();
@@ -231,9 +231,10 @@
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str +=`
`;
}
+ let alias=this.queryAlias(item.seriesName)
let val = Number(item.data[1]);
str += `
`;
- str += `
${item.seriesName}:
`;
+ str += `
${alias?alias:item.seriesName}:
`;
str += `
`;
str += chartDataFormat.getUnit(5).compute(val,null,2);
str += `
`;
@@ -242,17 +243,28 @@
str +=`
`;
return str;
},
+ queryAlias:function(seriesName){
+ let alias=null;
+ if(this.legend&&this.legend.length>0){
+ let tempLegend=this.legend.find((item)=>{return item.name == seriesName});
+ if(tempLegend){
+ alias=tempLegend.alias;
+ }
+ }
+ return alias;
+ },
defaultYAxisFormatter:function(value,index){
let unit=chartDataFormat.getUnit(5);
return unit.compute(value,index);
},
- setRandomColors:function(num){
+ setRandomColors:function(num){//当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
let colors=[];
for(let i=0;i