From 0d898ab0bfc6d1fe5be1dbd3173cc0a32ba130b2 Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Wed, 3 Jun 2020 18:58:07 +0800 Subject: [PATCH 1/2] =?UTF-8?q?NEZ-305=20feat:chart=20=E6=B2=A1=E6=9C=89?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=97=B6=E6=98=BE=E7=A4=BAxy=E5=9D=90?= =?UTF-8?q?=E6=A0=87=E8=BD=B4=E5=8F=8A=E7=BD=91=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 12 ++-- .../components/charts/line-chart-block.vue | 46 ++++++++++++--- .../page/dashboard/explore/explore.vue | 10 ++-- .../page/dashboard/overview/chartConfig.vue | 56 ++++++++++++++++++- 4 files changed, 106 insertions(+), 18 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index b0e6ea0ea..06cd224f8 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -467,7 +467,7 @@ this.$nextTick(() => { if (this.dataList.length > 0 ) { this.dataList.forEach((item,index) => { - + this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现 this.setChartSize(item.span, index);//设置该图表宽度 if(!item.isLoaded ){ @@ -609,7 +609,7 @@ } }else { if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) { - + this.$refs['editChart'+item.id][0].showLoad(item); } this.setChartSize(item, realIndex); // 设置该图表宽度 @@ -984,6 +984,10 @@ smooth: 0.2, //曲线变平滑 showSymbol: false, data: [], + lineStyle: { + width: 1, + opacity: 0.9 + }, type: chartInfo.type, }, //visible: true, @@ -1320,7 +1324,7 @@ this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData); this.$nextTick(() => { if (this.$refs['editChart'+duplicateChartId][0]) { - + this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现 } @@ -1404,7 +1408,7 @@ if(chartType!=='url'){ that.getChartDataForSearch(item,index); } else { - + that.$refs['editChart'+item.id][0].showLoad(item); } } diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 519b70ee4..2b1c79f48 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -42,7 +42,7 @@
- +
No data
{{item.alias?item.alias:item.name}} @@ -78,7 +78,7 @@
- +
No data
{{item.alias?item.alias:item.name}} @@ -101,6 +101,7 @@ import chartDataFormat from './chartDataFormat' import {randomcolor} from '../common/js/radomcolor/randomcolor.js' import timePicker from '../common/timePicker' + import chartConfig from "../page/dashboard/overview/chartConfig"; export default { name: 'lineChartBlock', components: { @@ -133,6 +134,7 @@ data() { return { data: {}, // 该图表信息,chartItem + noData:false, seriesItem: [], // 保存信息 seriesItemScreen:[], images: '', @@ -616,14 +618,27 @@ show: true, }, splitLine:{ - show:true + show:true, + lineStyle: { + color: "#d9d9d9", + opacity: 0.8, + width: 1 + } + }, + axisTick: { + show: false }, //boundaryGap:['20%', '0'], }, yAxis: { type: 'value', splitLine:{ - show:true + show:true, + lineStyle: { + color: "#d9d9d9", + opacity: 0.8, + width: 1 + } }, //去掉y轴--start axisLine:{ @@ -669,8 +684,17 @@ }else { self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)}); } - self.echartStore.clear(); - self.echartStore.setOption(option);//创建图表 + if(dataArg&&dataArg.length>0){ + self.echartStore.clear(); + self.echartStore.setOption(option);//创建图表 + self.noData=false; + }else{ + self.noData=true; + option=chartConfig.getOption('noData') + self.echartStore.clear(); + self.echartStore.setOption(option);//创建图表 + } + self.$refs['localLoading'+self.chartIndex].endLoading(); self.firstShow = true; // 展示操作按键 }, 100); @@ -766,7 +790,15 @@ //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)});//图表的高度 - self.echartModalStore.setOption(option);//显示全屏界面 + if(dataArg&&dataArg.length>0){ + self.echartModalStore.setOption(option);//显示全屏界面 + self.noData=false; + }else{ + self.noData=true; + option=chartConfig.getOption('noData') + self.echartModalStore.setOption(option);//显示全屏界面 + } + }, 100) this.echartModalStore.on('magictypechanged', function (params) { diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue index 810c65ad6..3bd3c457e 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue @@ -309,6 +309,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c showSymbol:false, smooth: 0.2, //曲线变平滑 data: [], + lineStyle: { + width: 1, + opacity: 0.9 + }, type: 'line', } seriesItem.data = result.values.map((item) => { @@ -337,14 +341,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c this.$refs['promql-'+promqlIndex][0].setError(response.data.error) } }) - if(series.length>0){ + this.$refs.exploreChart.setLegend(legend); this.$refs.exploreChart.setRandomColors(series.length) this.$refs.exploreChart.setSeries(series) this.defaultChartVisible = true; - }else{ - // this.defaultChartVisible = false; - } + } this.$refs.exploreChart.endLoading(); diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index cd07dde64..69692758d 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -89,13 +89,23 @@ show: true, }, splitLine:{ - show:false + show:true, + lineStyle: { + color: "#d9d9d9", + opacity: 0.8, + width: 1 + } } }, yAxis: { type: 'value', splitLine:{ - show:true + show:true, + lineStyle: { + color: "#d9d9d9", + opacity: 0.8, + width: 1 + } }, axisLabel: { // formatter:null, @@ -312,12 +322,52 @@ useUTC: false,//使用本地时间 series: [], }; + const noDataOption={ + grid: { + top: 30, + left: 0, + right: 30, + containLabel: true, + bottom:8,//156 + }, + xAxis: { + type: 'category', + data: createTempTimes(), + splitLine:{ + show:true + }, + axisTick: { + show: false + }, + }, + yAxis: { + type: 'category', + data: [1, 3, 5, 7, 9, 11, 13], + splitLine:{ + show:true + }, + axisTick: { + show: false + }, + }, + series: null, + }; + function createTempTimes(){ + let times=[]; + for(let i=0;i<10;i++){ + let time=new Date(); + time.setMinutes(new Date().getMinutes()-(10-i)*5); + times.push(bus.timeFormate(time,'hh:mm')) + } + return times; + } const chartTypes={ line:{name:'line',option:commonOption}, overviewLine: {name: 'line', option: overviewLine}, map:{name:'map',option:mapOptions}, pie: {name: 'assetType', option: assetTypePie}, - bar: {name: 'alertMessage', option: alertMessageBar} + bar: {name: 'alertMessage', option: alertMessageBar}, + noData:{name:'noData',option:noDataOption}, }; export default { getOption:function(type){ From defde2bfb164e934799eae90fc85a8dbea8a154c Mon Sep 17 00:00:00 2001 From: wangwenrui Date: Wed, 3 Jun 2020 19:20:46 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 4 ++++ .../src/components/charts/line-chart-block.vue | 3 +++ .../page/dashboard/overview/chart.vue | 17 ++++++++++++++--- .../page/dashboard/overview/chartConfig.vue | 18 ++++++++++++++++++ 4 files changed, 39 insertions(+), 3 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 06cd224f8..ba9f75194 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -753,6 +753,10 @@ smooth: 0.2, //曲线变平滑 showSymbol: false, data: [], + lineStyle: { + width: 1, + opacity: 0.9 + }, type: chartInfo.type, }, metric_name: '', diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 2b1c79f48..736fd0b9e 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -625,6 +625,9 @@ width: 1 } }, + axisLine: { + show: false + }, axisTick: { show: false }, diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index ec3e76bf5..af617d17d 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -5,6 +5,7 @@
{{chartTitle}}
+
No data
@@ -46,6 +47,7 @@ chartId: this.name + '-'+this.guid()+'-'+new Date().getTime(), legend:[], colors:chartConfig.getBgColorList(), + noData:false, } }, created() { @@ -99,10 +101,19 @@ } } // console.log(this.option) - this.$set(this.option,'series',this.series); + if(this.series&&this.series.length>0){ + this.$set(this.option,'series',this.series); + this.noData=false; + this.chart.clear(); + this.chart.setOption(this.option); + }else{ + this.noData=true; + let option=chartConfig.getOption('noData'); + this.chart.clear(); + this.chart.setOption(option); + } + - this.chart.clear(); - this.chart.setOption(this.option); //坐标轴label鼠标悬浮提示 if (this.axisTooltip) { let tooltipDom = document.querySelector(".axis-tooltip"); diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index 69692758d..8ab4e9f4e 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -88,6 +88,12 @@ axisPointer: {//y轴上显示指针对应的值 show: true, }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, splitLine:{ show:true, lineStyle: { @@ -107,6 +113,12 @@ width: 1 } }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, axisLabel: { // formatter:null, }, @@ -336,6 +348,9 @@ splitLine:{ show:true }, + axisLine: { + show: false + }, axisTick: { show: false }, @@ -346,6 +361,9 @@ splitLine:{ show:true }, + axisLine: { + show: false + }, axisTick: { show: false },