diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 08afac879..e888adcb5 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -97,6 +97,9 @@ export default { } }, computed: { + lineOption () { + return this.nzDefaultConfig.option + }, hasLegend () { try { return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend @@ -176,17 +179,19 @@ export default { this.legends = [] this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends - const styleOption = this.$lodash.get(this.chartInfo, 'param.option') - if (styleOption) { - chartOption.series.forEach(item => { - if (item.lineStyle && styleOption.lineWidth != undefined) { - item.lineStyle.width = styleOption.lineWidth - } - if (styleOption.pointSize != undefined) { - item.symbolSize = styleOption.pointSize - } - }) - } + const styleOption = this.$lodash.get(this.chartInfo, 'param.option', {}) + chartOption.series.forEach(item => { + if (item.lineStyle && styleOption.lineWidth != undefined) { + item.lineStyle.width = styleOption.lineWidth + } else { + item.lineStyle.width = this.lineOption.lineWidth + } + if (styleOption.pointSize != undefined) { + item.symbolSize = styleOption.pointSize + } else { + item.symbolSize = this.lineOption.pointSize + } + }) this.isGrey = this.legends.map(() => false) chartOption.color = this.colorList @@ -274,9 +279,9 @@ export default { this.cursorDefault = false }) } - if (this.chartInfo.type !== 'point') { - const option = myChart.getOption() - const series = this.$lodash.cloneDeep(option.series) + const option = myChart.getOption() + const series = this.$lodash.cloneDeep(option.series) + if (series[params.seriesIndex].type !== 'scatter') { series[params.seriesIndex].data[params.dataIndex] = { symbol: 'circle', itemStyle: { @@ -296,9 +301,9 @@ export default { this.tooltip.activeIndex = params.seriesIndex }) myChart.on('mouseout', (params) => { - if (this.chartInfo.type !== 'point') { - const option = myChart.getOption() - const series = this.$lodash.cloneDeep(option.series) + const option = myChart.getOption() + const series = this.$lodash.cloneDeep(option.series) + if (series[params.seriesIndex].type !== 'scatter') { series.forEach(s => { s.data.forEach((item, index) => { if (item.itemStyle) { diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue index 6968fee1c..49c6eccfc 100644 --- a/nezha-fronted/src/components/chart/chart/legend.vue +++ b/nezha-fronted/src/components/chart/chart/legend.vue @@ -274,6 +274,17 @@ export default { if (this.chartInfo.type === 'pie' || this.chartInfo.type === 'doughnut' || this.chartInfo.type === 'rose') { this.$emit('hoverLegendD3', legendName, index, type) } else if (this.isTimeSeries) { + if (type == 'highlight' && getChart(this.chartId)) { + const option = getChart(this.chartId).getOption() + const series = this.$lodash.cloneDeep(option.series) + series[index].emphasis.focus = 'series' + getChart(this.chartId).setOption({ series }) + } else if (getChart(this.chartId)) { + const option = getChart(this.chartId).getOption() + const series = this.$lodash.cloneDeep(option.series) + series[index].emphasis.focus = 'none' + getChart(this.chartId).setOption({ series }) + } getChart(this.chartId) && getChart(this.chartId).dispatchAction({ type: type, seriesIndex: index, diff --git a/nezha-fronted/src/components/chart/chart/line-chart-block.vue b/nezha-fronted/src/components/chart/chart/line-chart-block.vue index 3f56dd3eb..27c2eb92f 100644 --- a/nezha-fronted/src/components/chart/chart/line-chart-block.vue +++ b/nezha-fronted/src/components/chart/chart/line-chart-block.vue @@ -1740,13 +1740,13 @@ export default { theData: { name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [2, 2], + symbolSize: 8, smooth: 0.2, // 曲线变平滑 showSymbol: false, data: [], type: this.data.type, lineStyle: { - width: 1, + width: 2, opacity: 0.9 } // visible: true, diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js index 65b859d54..6435982da 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js @@ -152,16 +152,16 @@ export const chartTimeSeriesLineOption = { type: 'line', symbol: 'emptyCircle', // 去掉点 connectNulls: true, - symbolSize: 6, + symbolSize: 8, smooth: 0.2, // 曲线变平滑 showSymbol: false, data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, emphasis: { - focus: 'series' + focus: 'none' }, blur: { lineStyle: { @@ -189,7 +189,7 @@ export const chartTimeSeriesScatterOption = { data: [], z: 9, emphasis: { - focus: 'series' + focus: 'none' } }] } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue index caad524b9..b096181ad 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue @@ -443,7 +443,7 @@ export default { smooth: 0.2, // 曲线变平滑 name: '', lineStyle: { - width: 1, + width: 2, opacity: 0.9 } } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 1e1c11580..81c927397 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -910,12 +910,12 @@ export default { const seriesItem = { name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [2, 2], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, type: 'line' diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue index 8402ae91d..0909cd515 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue @@ -251,10 +251,7 @@ export default { max: undefined }, dataLink: [], - option: { - lineWidth: 1, - pointSize: 6 - } + option: undefined }, elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }], panel: '', @@ -437,24 +434,6 @@ export default { if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) { this.chart.param.collapse = false } - if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point')) { - if (!this.chart.param.rightYAxis) { - this.chart.param.rightYAxis = { - elementNames: [], - style: 'line', - unit: 2, - label: '', - min: undefined, - max: undefined - } - } - if (!this.chart.param.option) { - this.chart.param.option = { - lineWidth: 1, - pointSize: 6 - } - } - } if (this.chart.type === 'stat') { if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' } if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' } @@ -492,24 +471,6 @@ export default { if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) { this.chart.param.collapse = false } - if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point')) { - if (!this.chart.param.rightYAxis) { - this.chart.param.rightYAxis = { - elementNames: [], - style: 'line', - unit: 2, - label: '', - min: undefined, - max: undefined - } - } - if (!this.chart.param.option) { - this.chart.param.option = { - lineWidth: 1, - pointSize: 6 - } - } - } if (this.chart.type === 'stat') { if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' } if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue deleted file mode 100644 index 7f7d9b8ff..000000000 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue +++ /dev/null @@ -1,728 +0,0 @@ - - - - - - - {{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}{{$t("overall.detail")}} - {{$t("alert.alertMessage")}} - {{$t("overall.query")}} - - - - - - - - - - - - - - - - - - - - - {{$t('project.endpoint.hideSameLabels')}} - - - - - - - - - - - - - - - - - metric : {{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}} - type : {{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}} - help : {{scope.row.metricTip.help?scope.row.metricTip.help:'--'}} - unit : {{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}} - - - - - - - - - - - - - - - {{$t("project.endpoint.dialogTitle")}} - - - {{$t('dashboard.metric.saveChart')}} - - - - - - - - - - - diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue index 4e6d19c46..161c2666f 100644 --- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue +++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue @@ -230,12 +230,12 @@ export default { theData: { name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [2, 2], + symbolSize: 8, smooth: 0.2, // 曲线变平滑 showSymbol: false, data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, animation: false, diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index d3241b4b3..a0fc9ea40 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -1351,6 +1351,9 @@ export default { computed: { minStep () { return this.nzDefaultConfig.minStep + }, + lineOption () { + return this.nzDefaultConfig.option } }, data () { @@ -1447,10 +1450,7 @@ export default { max: undefined }, dataLink: this.chartConfig.param.dataLink, - option: { - lineWidth: 1, - pointSize: 6 - } + option: this.lineOption } this.$nextTick(() => { this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() }) diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue index 7aa4f1b3e..c2fc909e1 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue @@ -173,6 +173,9 @@ export default { panelChart }, computed: { + lineOption () { + return this.nzDefaultConfig.option + }, chartLastPosition () { return this.$store.getters.getChartLastPosition }, @@ -381,7 +384,7 @@ export default { height: 4, unit: 2, type: 'line', - elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 , step: undefined}], + elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }], param: { stack: 0, nullType: 'null', @@ -409,10 +412,7 @@ export default { max: undefined }, dataLink: [], - option: { - lineWidth: 1, - pointSize: 6 - } + option: this.lineOption } } } @@ -423,7 +423,7 @@ export default { height: 4, unit: 2, type: 'log', - elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 , step: undefined}], + elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined }], param: { enable: { thresholds: false, @@ -634,6 +634,21 @@ export default { delete item.chartId }) } + if ((obj.type === 'line' || obj.type === 'area' || obj.type === 'point')) { + if (!obj.param.rightYAxis) { + obj.param.rightYAxis = { + elementNames: [], + style: 'line', + unit: 2, + label: '', + min: undefined, + max: undefined + } + } + if (!obj.param.option) { + obj.param.option = this.lineOption + } + } this.editChart = this.$lodash.cloneDeep(obj) this.oldData = this.$lodash.cloneDeep(obj) if (this.stableTime) { diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue index 4207d84f4..e8b73b234 100644 --- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue +++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue @@ -325,7 +325,7 @@ export default { smooth: 0.2, // 曲线变平滑 name: '', lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, markLine: { diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 2e1954721..f065bb894 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -761,12 +761,12 @@ export default { const seriesItem = { name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [2, 2], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, type: 'line' diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue index 22b508e6e..d16699b02 100644 --- a/nezha-fronted/src/components/page/dashboard/dashboard.vue +++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue @@ -267,12 +267,9 @@ export default { max: undefined }, dataLink: [], - option: { - lineWidth: 1, - pointSize: 6 - } + option: undefined }, - elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 , step: undefined}], + elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined }], panel: '', sync: 0, remark: '', @@ -611,24 +608,6 @@ export default { if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) { this.chart.param.collapse = false } - if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point')) { - if (!this.chart.param.rightYAxis) { - this.chart.param.rightYAxis = { - elementNames: [], - style: 'line', - unit: 2, - label: '', - min: undefined, - max: undefined - } - } - if (!this.chart.param.option) { - this.chart.param.option = { - lineWidth: 1, - pointSize: 6 - } - } - } if (this.chart.type === 'stat') { if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' } if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' } @@ -666,24 +645,6 @@ export default { if (this.chart.type === 'group' && !this.chart.param.collapse == undefined) { this.chart.param.collapse = false } - if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point')) { - if (!this.chart.param.rightYAxis) { - this.chart.param.rightYAxis = { - elementNames: [], - style: 'line', - unit: 2, - label: '', - min: undefined, - max: undefined - } - } - if (!this.chart.param.option) { - this.chart.param.option = { - lineWidth: 1, - pointSize: 6 - } - } - } if (this.chart.type === 'stat') { if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' } if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' } diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue index d6bbbc264..2c18a0eff 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue @@ -3853,16 +3853,16 @@ export default { type: 'line', name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [6, 6], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, emphasis: { - focus: 'series' + focus: 'none' }, blur: { lineStyle: { @@ -3946,16 +3946,16 @@ export default { type: 'line', name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [6, 6], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, emphasis: { - focus: 'series' + focus: 'none' }, blur: { lineStyle: { @@ -4420,10 +4420,7 @@ export default { max: undefined }, dataLink: [], - option: { - lineWidth: 1, - pointSize: 6 - } + option: undefined }, elements: [], panel: '', diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue index f966d3cd9..612020fac 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue @@ -411,16 +411,16 @@ export default { type: 'line', name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [6, 6], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, emphasis: { - focus: 'series' + focus: 'none' }, blur: { lineStyle: { @@ -626,16 +626,16 @@ export default { type: 'line', name: '', symbol: 'emptyCircle', // 去掉点 - symbolSize: [6, 6], + symbolSize: 8, showSymbol: false, smooth: 0.2, // 曲线变平滑 data: [], lineStyle: { - width: 1, + width: 2, opacity: 0.9 }, emphasis: { - focus: 'series' + focus: 'none' }, blur: { lineStyle: { diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index 81cf1fb4f..709989065 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -370,6 +370,17 @@ export default { if (this.legend[index].isGray) { return false } + if (type == 'highlight' && this.chart) { + const option = this.chart.getOption() + const series = this.$lodash.cloneDeep(option.series) + series[index].emphasis.focus = 'series' + this.chart.setOption({ series }) + } else if (this.chart) { + const option = this.chart.getOption() + const series = this.$lodash.cloneDeep(option.series) + series[index].emphasis.focus = 'none' + this.chart.setOption({ series }) + } this.chart && this.chart.dispatchAction({ type: type, seriesIndex: index, diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js index 040b00670..0a77fa239 100644 --- a/nezha-fronted/src/store/index.js +++ b/nezha-fronted/src/store/index.js @@ -60,8 +60,12 @@ const store = new Vuex.Store({ configSync: {}, // 配置同步 showConfigSync: false, nzDefaultConfig: { - minStep: 60 - }, + minStep: 60, + option: { + lineWidth: 2, + pointSize: 8 + } + } }, getters: { getNzDefaultConfig (state) {