diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 6e0fb1ab6..5a318301d 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -396,8 +396,8 @@ box-sizing: border-box; .legend-item { + padding: 0 8px; white-space: nowrap; - margin-right: 10px; cursor: pointer; display: inline-block; line-height: 20px; @@ -406,16 +406,27 @@ .legend-item, .legend--table-row { &.legend-item--inactive, &.row--inactive { color: $--color-text-secondary; - .legend-shape { background-color: $--background-color-1 !important; } - .nz-icon{ color: $--background-color-1 !important; } } } + .nz-icon-override{ + visibility: hidden; + font-size: 15px; + margin-left: 5px; + vertical-align: middle; + } + .legend-item:hover { + background-color: $--background-color-1; + cursor: pointer; + .nz-icon-override{ + visibility: visible; + } + } // 表格类型 .legend--table { @@ -429,6 +440,9 @@ .legend--table-row:not(:first-of-type):hover { background-color: $--background-color-1; cursor: pointer; + .nz-icon-override{ + visibility: visible; + } } .legend--table-row:first-of-type { color:#33a2e5; diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index d173506c5..ed87f0cc7 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -721,15 +721,22 @@ export default { if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') } - const index = this.tooltip.clickIndex - getChart(this.chartId).dispatchAction({ - type: 'legendInverseSelect' + + this.legends.forEach((item, index) => { + if (index == this.tooltip.clickIndex) { + getChart(this.chartId).dispatchAction({ + type: 'legendSelect', + name: item.name + }) + } else { + getChart(this.chartId).dispatchAction({ + type: 'legendUnSelect', + name: item.name + }) + } }) - getChart(this.chartId).dispatchAction({ - type: 'legendSelect', - name: this.legends[index].name - }) - this.isGrey = this.isGrey.map((g, i) => i !== index) + + this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex) this.$refs.legend.isGrey = this.isGrey if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue index a183e22f0..2d811b924 100644 --- a/nezha-fronted/src/components/chart/chart/legend.vue +++ b/nezha-fronted/src/components/chart/chart/legend.vue @@ -25,6 +25,7 @@ {{item.alias ? item.alias : item.name}} +