diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 8951b4aab..be3107d5c 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -7,7 +7,7 @@ v-my-loading="chartLoading" >
-
+

{{chartInfo.param.rightYAxis.label}} @@ -72,6 +72,7 @@ export default { isStack: false, hasRightYAxis: false, chartLoading: false, + cursorDefault: false, tooltip: { x: 0, y: 0, @@ -247,6 +248,20 @@ export default { } } if (this.isInit) { + // 未设置dataLink的图表 鼠标样式为default + myChart.getZr().on('mousemove', (params) => { + // 获取鼠标在图表中的坐标 + const pointInPixel = [params.offsetX, params.offsetY] + const option = myChart.getOption() + const zoomState = this.$lodash.get(option, 'toolbox[0].feature.dataZoom.iconStatus.zoom', 'normal') + // 判断鼠标在坐标轴中且zoom未被激活 + if (myChart.containPixel('grid', pointInPixel) && zoomState === 'normal') { + this.cursorDefault = true + } else { + this.cursorDefault = false + } + }) + if (this.series.length > 1) { myChart.on('click', this.chartClick) myChart.on('mousedown', (params) => { @@ -257,27 +272,46 @@ export default { }) } - myChart.on('mouseover', (params) => { + // 鼠标滑过当前symbol 改变样式 + myChart.on('mousemove', (params) => { + if (this.series.length > 1) { + myChart.on('mousemove', () => { + this.cursorDefault = false + }) + } if (this.chartInfo.type !== 'point') { - if (this.tooltip.activeIndex != params.seriesIndex) { - const option = myChart.getOption() - option.series[params.seriesIndex].symbol = 'circle' - option.series[params.seriesIndex].itemStyle = { + const option = myChart.getOption() + const series = this.$lodash.cloneDeep(option.series) + series[params.seriesIndex].data[params.dataIndex] = { + symbol: 'circle', + itemStyle: { borderColor: this.hexToRgb(params.color, 0.4), borderWidth: 5 - } - myChart.setOption(option) + }, + value: params.value } + myChart.setOption({ series }) + myChart.dispatchAction( + { + type: 'highlight', + dataIndex: params.dataIndex + } + ) } this.tooltip.activeIndex = params.seriesIndex }) myChart.on('mouseout', (params) => { if (this.chartInfo.type !== 'point') { const option = myChart.getOption() - option.series.forEach(item => { - item.symbol = 'emptyCircle' + const series = this.$lodash.cloneDeep(option.series) + series.forEach(s => { + s.data.forEach((item, index) => { + if (item.itemStyle) { + s.data[index] = item.value + } + }) }) - myChart.setOption(option) + myChart.setOption({ series }) } this.tooltip.activeIndex = undefined }) @@ -472,7 +506,7 @@ export default { } const seriesName = nameArr.join('-') if (i === 0 && item.seriesName.indexOf('Previous') === -1 && type == 'left') { - const value = bus.computeTimezone(item.data[0] * 1000) + const value = bus.computeTimezone(item.value[0] * 1000) const tData = new Date(value) str += '

' str += bus.timeFormate(tData) @@ -484,7 +518,7 @@ export default { } if (item.seriesName.indexOf('Previous') === -1 && type == 'right') { if (i == 0 && (rightYAxisIndex == 0 || (arr.some(item => item.seriesName.indexOf('Previous') !== -1)))) { - const value = bus.computeTimezone(item.data[0] * 1000) + const value = bus.computeTimezone(item.value[0] * 1000) const tData = new Date(value) str += '
' str += bus.timeFormate(tData) @@ -497,7 +531,7 @@ export default { } if (flag && item.seriesName.indexOf('Previous') !== -1) { flag = false - const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime) + const value = bus.computeTimezone(item.value[0] * 1000 - self.minusTime) const tData = new Date(value) str += '
' str += bus.timeFormate(tData) @@ -505,17 +539,17 @@ export default { } const color = self.colorList[item.seriesIndex] const previousItem = arr.find((series) => ('Previous ' + item.seriesName) === series.seriesName) - let paramsDot = bus.countDecimals(item.data[1]) + let paramsDot = bus.countDecimals(item.value[1]) if (paramsDot < self.chartDot) { paramsDot = self.chartDot } else if (paramsDot > 6) { paramsDot = 6 } - const val = formatScientificNotation(item.data[1], paramsDot) + const val = formatScientificNotation(item.value[1], paramsDot) sum += isNaN(self.numberWithEConvent(val)) ? 0 : parseFloat(self.numberWithEConvent(val)) let previousDom = '' if (previousItem) { - const previousVal = formatScientificNotation(previousItem.data[1], paramsDot) + const previousVal = formatScientificNotation(previousItem.value[1], paramsDot) let minusVal = 0 let operator if (previousVal <= val) { @@ -694,16 +728,16 @@ export default { unit = lodash.get(this, 'chartInfo.param.rightYAxis.unit', 2) } // title - const value = bus.computeTimezone(params.data[0] * 1000) + const value = bus.computeTimezone(params.value[0] * 1000) const tData = new Date(value) // value - let paramsDot = bus.countDecimals(params.data[1]) + let paramsDot = bus.countDecimals(params.value[1]) if (paramsDot < this.chartDot) { paramsDot = this.chartDot } else if (paramsDot > 6) { paramsDot = 6 } - const val = formatScientificNotation(params.data[1], paramsDot) + const val = formatScientificNotation(params.value[1], paramsDot) // 根据左右轴设置图标 let className = 'row__color-block' if (params.yAxisIndex == 0) { diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index b1e3bb0b3..3f2490158 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -164,6 +164,11 @@ export default { }) }) this.$emit('chartIsNoData', this.isNoData) + if (this.series.length == 1) { + series.forEach(item => { + item.cursor = 'default' + }) + } return series }, // 单个legend diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index f24963753..7e2dd6496 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -268,9 +268,6 @@ export default { }) if (this.series.length > 1) { - this.chart.on('mousemove', () => { - this.cursorDefault = false - }) this.chart.on('click', this.chartClick) this.chart.on('mousedown', (params) => { if (this.tooltip.dataLinkShow) { @@ -280,25 +277,43 @@ export default { }) } - this.chart.on('mouseover', (params) => { - if (this.tooltip.activeIndex != params.seriesIndex) { - const option = this.chart.getOption() - option.series[params.seriesIndex].symbol = 'circle' - option.series[params.seriesIndex].itemStyle = { + // 鼠标滑过当前symbol 改变样式 + this.chart.on('mousemove', (params) => { + if (this.series.length > 1) { + this.chart.on('mousemove', () => { + this.cursorDefault = false + }) + } + const option = this.chart.getOption() + const series = this.$lodash.cloneDeep(option.series) + series[params.seriesIndex].data[params.dataIndex] = { + symbol: 'circle', + itemStyle: { borderColor: this.hexToRgb(params.color, 0.4), borderWidth: 5 - } - this.chart.setOption(option) + }, + value: params.value } + this.chart.setOption({ series }) + this.chart.dispatchAction( + { + type: 'highlight', + dataIndex: params.dataIndex + } + ) this.tooltip.activeIndex = params.seriesIndex }) - this.chart.on('mouseout', (params) => { const option = this.chart.getOption() - option.series.forEach(item => { - item.symbol = 'emptyCircle' + const series = this.$lodash.cloneDeep(option.series) + series.forEach(s => { + s.data.forEach((item, index) => { + if (item.itemStyle) { + s.data[index] = item.value + } + }) }) - this.chart.setOption(option) + this.chart.setOption({ series }) this.tooltip.activeIndex = undefined }) }