{{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){