+
{{item.alias?item.alias:item.name}}
@@ -136,7 +137,13 @@
data: {}, // 该图表信息,chartItem
noData:false,
seriesItem: [], // 保存信息
+ seriesItemArr:[],// 初次加载的数据
+ seriesLength:20,
seriesItemScreen:[],
+ seriesItemArrScreen:[],
+ legendListMore:[],
+ screenLegendListMore:[],
+ chartInfo:{},
images: '',
isStackArea:false,
isError:false,
@@ -363,6 +370,7 @@
},
// chartSite用于区分是全屏显示还是局部显示
initChart(chartInfo, dataArg, ele, chartSite,legend) {
+ this.chartInfo=chartInfo;
const self = this;
this.chartType = ''; // 图表类型
if ( chartInfo.type === 4) {//line,bar
@@ -690,13 +698,15 @@
this.isGrey.push(false);
});
}
+ this.legendListMore=this.legendList.filter((item,index)=>index
{
setTimeout(function () {
let divHeight = self.$refs.legendArea.offsetHeight;
+ let moreTilteHeight=(self.seriesItem.length==self.seriesItemArr.length)?0:20;
if(!chartInfo.height){
- self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+ self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight-moreTilteHeight)});
}else {
- self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+ self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight-moreTilteHeight)});
}
if(dataArg&&dataArg.length>0){
self.echartStore.clear();
@@ -789,6 +799,9 @@
this.isGreyScreen.push(false);
});
}
+ if(this.screenLegendListMore.length!==this.screenLegendList.length){
+ this.screenLegendListMore=this.screenLegendList.filter((item,index)=>index {
+ let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+ let divHeight = legendDiv.offsetHeight;
+ let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+ let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+ //console.log("11____00",sumHeight,divHeight,legendDiv)
+ self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+ self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
setTimeout(function () {
- let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
- let divHeight = legendDiv.offsetHeight;
- let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
- let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
- //console.log("11____00",sumHeight,divHeight,legendDiv)
- self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
- self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
+ if(self.screenLegendListMore.length!==self.screenLegendList.length){
+ self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index0){
self.echartModalStore.setOption(option);//显示全屏界面
self.noData=false;
@@ -812,8 +832,18 @@
option=chartConfig.getOption('noData')
self.echartModalStore.setOption(option);//显示全屏界面
}
-
- }, 100)
+ self.echartModalStore.on('finished', function () {
+ let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+ let divHeight = legendDiv.offsetHeight;
+ let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+ let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+ //console.log("11____00",sumHeight,divHeight,legendDiv)
+ self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+ self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight-5)});//图表的高度
+ console.log(self.seriesItemScreen,self.seriesItemArrScreen);
+ self.echartModalStore.off('finished');
+ })
+ }, 100);
this.echartModalStore.on('magictypechanged', function (params) {
self.isStackArea = !self.isStackArea;
@@ -949,7 +979,17 @@
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
- this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
+ this.seriesItem=seriesItem;
+ let seriesItemArr=seriesItem;
+ if(seriesItem.length>this.seriesLength){
+ seriesItemArr=seriesItem.filter((item,index)=>indexindex {
if (error) {
@@ -1306,6 +1349,39 @@
return num.toFixed(2);
},
handleClose(){},
+ // 加载更多
+ loadMore(){
+ this.seriesItemArr=this.seriesItem;
+ this.legendListMore=this.legendList;
+ this.echartStore.setOption({
+ series:this.seriesItem
+ });
+ this.$nextTick(()=>{
+ let divHeight = this.$refs.legendArea.offsetHeight;
+ if(!this.chartInfo.height){
+ this.echartStore.resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+ }else {
+ this.echartStore.resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+ }
+ })
+ },
+ // 加载更多
+ loadScreenMore(){
+ this.seriesItemArrScreen=this.seriesItemScreen;
+ this.screenLegendListMore=this.screenLegendList;
+ this.echartModalStore.setOption({
+ series:this.seriesItemScreen
+ });
+ this.$nextTick(()=>{
+ let legendDiv = document.getElementById('screenLegendArea'+this.chartIndex);
+ let divHeight = legendDiv.offsetHeight;
+ let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+ let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+ //console.log("11____00",sumHeight,divHeight,legendDiv)
+ this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
+ this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
+ })
+ }
},
mounted() {
this.firstLoad = false;
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 02d13c3ce..e1ecceb71 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -205,7 +205,10 @@ const cn = {
view: "查看",
confirm: "Ok",
cancel: "取消",
- lastTwoDay: "最近2天"
+ lastTwoDay: "最近2天",
+ moreFirstTitle:'仅显示',
+ moreSecondTitle:'个时间序列。',
+ moreThirdTitle:'全部显示',
},
metric: {
name: "指标名称",
@@ -839,7 +842,7 @@ const cn = {
name: "名称",
type: "类型",
description: "描述"
- }
+ },
},
el: {
colorpicker: {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ae7c10e2d..7e3f69d5e 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -217,7 +217,10 @@ const en = {
},
view:'View',//'查看'
confirm:'Ok',// OK
- cancel:'Cancel'//'取消'
+ cancel:'Cancel',//'取消',
+ moreFirstTitle:'Showing only ',
+ moreSecondTitle:'time series. ',
+ moreThirdTitle:'Show all ',
},
metric:{
name:'Metric name', //"指标名称"