diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index ac2e524c4..d1609d478 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -56,7 +56,7 @@ created() { this.option=chartConfig.getOption(this.chartType); if(this.showToolbox == false){ - this.option.grid.top=10; + //this.option.grid.top = 10; } }, methods:{ @@ -158,7 +158,6 @@ this.chart.setOption(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 5d58e1c52..bbb2e0924 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -194,22 +194,25 @@ series: [], tooltip : {} }; - const alertMessageBar = { + const alertMessageBarByRule = { title: { show: false, }, - color: overviewBgColor, legend: { show: false, }, grid: { - top: 30, - left: 0, + top: 60, + left: 80, right: 30, - bottom:8 + bottom: 60, }, series: [], - tooltip : {}, + tooltip : { + backgroundColor: "rgba(255, 255, 255, 0.66)", + extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);", + textStyle: {color: "#333"} + }, xAxis: { type: 'value', axisLine: { @@ -220,7 +223,7 @@ }, axisLabel: { show:true, - fontSize: 10 + fontSize: 14 } }, yAxis: { @@ -234,18 +237,82 @@ data: [], axisLabel: { show: true, + fontSize: 14, formatter: function(value) { - if (value.length > 33) { - return value.substring(0, 30) + "..."; + if (value.length > 10) { + return value.substring(0, 6) + "..."; } return value; }, - align: 'left', - margin: 200, }, triggerEvent: true }, }; + const alertMessageBarByAsset = { + title: { + show: false, + }, + color: function(params) { + //首先定义一个数组 + let colorList = [pieColor[0], pieColor[1]];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + legend: { + show: false, + }, + grid: { + top: 60, + left: 80, + right: 30, + bottom: 60, + }, + series: [], + tooltip : { + backgroundColor: "rgba(255, 255, 255, 0.66)", + extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);", + textStyle: {color: "#333"} + }, + yAxis: { + type: 'value', + axisLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show:true, + fontSize: 14 + } + }, + xAxis: { + type: 'category', + axisLine: { + show: false + }, + axisTick: { + show: false + }, + data: [], + axisLabel: { + show: true, + fontSize: 12, + formatter: function(value) { + let r = value; + if (r.length > 4) { + r = value.substring(0, 3) + "..."; + } + return r.split("").join("\n"); + }, + }, + triggerEvent: true + }, + }; + const overviewLine = { title:{ show: false, @@ -399,7 +466,9 @@ overviewLine: {name: 'line', option: overviewLine}, map:{name:'map',option:mapOptions}, pie: {name: 'assetType', option: assetTypePie}, - bar: {name: 'alertMessage', option: alertMessageBar}, + bar: {name: 'alertMessage', option: alertMessageBarByAsset}, + ruleBar: {name: 'ruleMessage', option: alertMessageBarByRule}, + assetBar: {name: 'assetMessage', option: alertMessageBarByAsset}, noData:{name:'noData',option:noDataOption}, }; export default { diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss index 8290843de..c32a78845 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss @@ -338,6 +338,7 @@ position: fixed; transform: translate(-100%, -50%); min-width: unset; + background-color: rgba(255, 255, 255, 0.8) !important; } .axis-tooltip::after { content: ''; diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue index 465ab35e6..efe981b49 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue @@ -129,7 +129,30 @@ + +
+
+ + {{$t("dashboard.overview.alert.assetTopN")}} + {{$t("dashboard.overview.alert.moduleTopN")}} + + +
+
+ + +
+
+
{{$t("dashboard.overview.alert.alertRuleTopN")}} @@ -141,47 +164,9 @@ -->
- - - -
-
- -
-
- - {{$t("dashboard.overview.alert.assetTopN")}} - {{$t("dashboard.overview.alert.moduleTopN")}} - - - -
    -
  • {{$t("dashboard.overview.asset.title")}}
    • -
  • {{$t("dashboard.overview.module.module")}}
    • -
- - - - -
-
- - - - - - + + +
@@ -779,16 +764,20 @@ name: 'alertStatByRule', data: seriesData, type: 'bar', - barMaxWidth: 30, + barMaxWidth: 20, + itemStyle: { + color: function(params) { + let colorList = ["#ECCD82", "#99CEB9"];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + }, category: categoryData, //自定义，用来判断N/A是否显示 }; this.$refs.ruleMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.ruleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.ruleMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.ruleMessage.modifyOption("grid", "top", 30); - this.$refs.ruleMessage.modifyOption("grid", "left", 200); - this.$refs.ruleMessage.modifyOption("grid", "right", 30); - this.$refs.ruleMessage.modifyOption("grid", "bottom", 8); this.$refs.ruleMessage.setSeries(this.messageByRuleSeries); this.$refs.ruleMessage.endLoading(); } @@ -809,15 +798,19 @@ data: seriesData, type: 'bar', barMaxWidth: 30, - category: categoryData + category: categoryData, + itemStyle: { + color: function(params) { + let colorList = ["#ECCD82", "#99CEB9"];; + if(params.dataIndex % 2 == 0){ + return colorList[0] + }else{ + return colorList[1] + } + }, + }, }; - this.$refs.assetMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.assetMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.assetMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.assetMessage.modifyOption("grid", "top", 30); - this.$refs.assetMessage.modifyOption("grid", "left", 200); - this.$refs.assetMessage.modifyOption("grid", "right", 30); - this.$refs.assetMessage.modifyOption("grid", "bottom", 8); + this.$refs.assetMessage.modifyOption('xAxis', 'data', categoryData); this.$refs.assetMessage.setSeries(this.messageByAssetSeries); this.$refs.assetMessage.endLoading(); } @@ -840,13 +833,7 @@ barMaxWidth: 30, category: categoryData }; - this.$refs.moduleMessage.modifyOption('yAxis', 'data', categoryData); - this.$refs.moduleMessage.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); - this.$refs.moduleMessage.modifyOption("tooltip", "textStyle", {color: "#000"}); - this.$refs.moduleMessage.modifyOption("grid", "top", 30); - this.$refs.moduleMessage.modifyOption("grid", "left", 200); - this.$refs.moduleMessage.modifyOption("grid", "right", 30); - this.$refs.moduleMessage.modifyOption("grid", "bottom", 8); + this.$refs.moduleMessage.modifyOption('xAxis', 'data', categoryData); this.$refs.moduleMessage.setSeries(this.messageByModuleSeries); this.$refs.moduleMessage.endLoading(); }