@@ -36,7 +36,8 @@
chartType:{type:String,default:'line'},
tooltipFormatter:Function,
yAxisFormatter:Function,
- map:{}
+ map:{},
+ axisTooltip: {type: String}, // x/y
},
data(){
return {
@@ -97,11 +98,30 @@
this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
}
}
- console.log(this.option)
+ //console.log(this.option)
this.$set(this.option,'series',this.series);
this.chart.clear();
- this.chart.setOption(this.option)
+ this.chart.setOption(this.option);
+ //坐标轴label鼠标悬浮提示
+ if (this.axisTooltip) {
+ let tooltipDom = document.querySelector(".axis-tooltip");
+ this.chart.on('mouseover', (params) => {
+ if(params.componentType == this.axisTooltip + "Axis") {
+ tooltipDom.style.display = "block";
+ tooltipDom.innerHTML = params.value;
+ }
+ this.$refs.chartRoom.addEventListener("mousemove", (event) => {
+ tooltipDom.style.top = event.pageY + "px";
+ tooltipDom.style.left = event.pageX-15 + "px";
+ });
+ });
+ this.chart.on('mouseout', (params) => {
+ if(params.componentType == this.axisTooltip + "Axis") {
+ tooltipDom.style.display = "";
+ }
+ });
+ }
this.resize();
},
resizeChart:function(width,height){
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 967a3338c..75e339a3d 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -154,19 +154,138 @@
legend: {
show: false,
},
- grid: {},
+ grid: {
+ top: 30,
+ left: 0,
+ right: 30,
+ containLabel: true,
+ bottom:8
+ },
series: [],
tooltip : {},
xAxis: {
- type: 'value'
+ type: 'value',
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ fontSize: 13*window.devicePixelRatio
+ }
},
yAxis: {
type: 'category',
- data: []
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ data: [],
+ axisLabel: {
+ formatter: function(value) {
+ if (value.length > 12) {
+ return value.substring(0, 9) + "...";
+ }
+ return value;
+ },
+ fontSize: 12*window.devicePixelRatio
+ },
+ triggerEvent: true
},
};
+ const overViewLine = {
+ title:{
+ show: false,
+ },
+ color: bgColorList,
+ legend:{
+ show:false,
+ },
+ toolbox:{
+ show:false,
+ top:'0',
+ showTitle:false,
+ tooltip:{
+ show:false,
+ },
+ feature:{
+ dataZoom:{
+ yAxisIndex:false
+ },
+ magicType:{
+ type:['stack']
+ },
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ confine: false,
+ extraCssText:'z-index:1000;',
+ },
+ grid: {
+ left: 6,
+ right: 30,
+ containLabel: true,
+ bottom:8,
+ },
+ xAxis: {
+ type: 'time',
+ axisLabel: {
+ intervale: 0,
+ rotate: 0,
+ formatter: function (value) {
+ value = bus.computeTimezone(value)
+ let now = bus.computeTimezone(new Date().getTime());
+ let t_date = new Date(value);
+ let hhmm = [t_date.getHours(), t_date.getMinutes() < 10 ? "0" + t_date.getMinutes() : t_date.getMinutes()].join(':');
+ let mmdd = [t_date.getMonth() + 1, t_date.getDate() < 10 ? "0" + t_date.getDate() : t_date.getDate()].join('/');
+ if (value-now < 1000*60*60*24) {
+ return hhmm;
+ } else if (value-now >= 1000*60*60*24 && value-now < 1000*60*60*24*30) {
+ return mmdd + " " + hhmm;
+ } else {
+ return mmdd;
+ }
+ },
+ fontSize: 13*window.devicePixelRatio
+ },
+ axisPointer: {//y轴上显示指针对应的值
+ show: true,
+ },
+ splitLine:{
+ show:false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ },
+ yAxis: {
+ type: 'value',
+ splitLine:{
+ show:true
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ fontSize: 13*window.devicePixelRatio
+ }
+ },
+ useUTC: false,//使用本地时间
+ series: [],
+ };
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}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index d7041edf2..ba85f3b31 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -127,13 +127,13 @@
padding: 0 8px;
border-radius: 0 0 6px 6px;
}
-.content-row-box:nth-of-type(2) .content-col-content:last-of-type {
+.content-row-box:nth-of-type(2) .content-col-box:last-of-type .content-col-content {
padding: 0;
}
-.content-row-box:first-of-type .content-col-content:last-of-type {
+.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
position: relative;
}
-.content-row-box:first-of-type .content-col-content:last-of-type span {
+.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content span {
position: absolute;
bottom: 5%;
right: 5%;
@@ -147,4 +147,26 @@
.hide-div {
visibility: hidden;
}
+.axis-tooltip {
+ display: none;
+ position: fixed;
+ transform: translate(-100%, -50%);
+ min-width: unset;
+}
+.axis-tooltip::after {
+ content: '';
+ display: block;
+ width:0;
+ height:0;
+ overflow: hidden;
+ font-size: 0;
+ line-height: 0;
+ border: 5px;
+ border-style: dashed dashed dashed solid;
+ border-color: transparent transparent transparent #fff ;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translate(100%, -50%);
+}
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
index 4ddc1d3e8..532e0a37e 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -67,7 +67,7 @@
{{$t("dashboard.overview.alert.chart.chartTitle")}}
-
+
@@ -82,13 +82,13 @@
{{$t("dashboard.overview.asset.assetType")}}
-
+
{{$t("dashboard.overview.alert.alertRuleTopN")}}
-
+
@@ -106,14 +106,15 @@
-
-
+
+