diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 56a455587..08afac879 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -255,11 +255,8 @@ export default { this.cursorDefault = false } }) - // 设置dataLink的图表 或存在多条数据时 划过节点时鼠标样式为pointer(可点击) + if (this.dataLink.length || this.series.length > 1) { - myChart.on('mousemove', () => { - this.cursorDefault = false - }) myChart.on('click', this.chartClick) myChart.on('mousedown', (params) => { if (this.tooltip.dataLinkShow) { @@ -269,27 +266,47 @@ export default { }) } - myChart.on('mouseover', (params) => { + // 鼠标滑过当前symbol 改变样式 + myChart.on('mousemove', (params) => { + // 设置dataLink的图表 或存在多条数据时 划过节点时鼠标样式为pointer(可点击) + if (this.dataLink.length || 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 }) @@ -414,7 +431,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 += '