gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：图表销毁解绑事件

Browse Source
This commit is contained in:
zyh
2023-04-10 14:26:46 +08:00
parent 37c5be765a
commit bf8f5ae241
8 changed files with 137 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/chart/chart/chartAutotopology.vue
View File

@@ -137,7 +137,7 @@ export default {
}
},
mounted () {
// this.queryAllProjectData()
this.queryAllProjectData()
this.$get('/topology/icon').then(res => {
this.iconArray = [...res.data.list]
})

37
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -58,7 +58,8 @@ export default {
value: 0,
mapping: {},
show: false
}
},
svg: null
}
},
methods: {
@@ -108,13 +109,14 @@ export default {
},
drawBubbleChart () {
this.$nextTick(() => {
d3.select(`#bubble-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
const svg = document.getElementById(`bubble-svg-${this.chartId}`)
if (!svg) {
this.dispose()
this.svg = d3.select(`#bubble-svg-${this.chartId}`)
const svgDom = document.getElementById(`bubble-svg-${this.chartId}`)
if (!svgDom) {
return false
}
const width = svg.getBoundingClientRect().width
const height = svg.getBoundingClientRect().height
const width = svgDom.getBoundingClientRect().width
const height = svgDom.getBoundingClientRect().height
// 定义布局方式
const pack = d3.pack()
.size([width, height])
@@ -137,7 +139,7 @@ export default {
return b.value - a.value
})
const nodes = pack(data).descendants()
const bubbles = d3.select(`#bubble-svg-${this.chartId}`).selectAll('.bubble')
const bubbles = this.svg.selectAll('.bubble')
.data(nodes)
.enter()
.filter(function (d) {
@@ -236,11 +238,6 @@ export default {
`
}
},
resize () {
setTimeout(() => {
this.drawBubbleChart()
}, 50)
},
bubbleEnter (e, node) { // 移入气泡
this.tooltip.title = node.data.alias
this.tooltip.value = node.data.showValue
@@ -277,6 +274,20 @@ export default {
this.tooltip.y = e.pageY + 15
this.tooltip.x = e.pageX + 15
}
},
resize () {
setTimeout(() => {
this.drawBubbleChart()
}, 50)
},
dispose () {
if (this.svg) {
this.svg.selectAll('.bubble').on('mouseenter', null)
this.svg.selectAll('.bubble').on('mousemove', null)
this.svg.selectAll('.bubble').on('mouseleave', null)
this.svg.selectAll('g').remove()
this.svg = null
}
}
},
mounted () {
@@ -284,7 +295,7 @@ export default {
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {
d3.select(`#bubble-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
}
}
</script>

33
nezha-fronted/src/components/chart/chart/chartFunnelNew.vue
View File

@@ -58,7 +58,8 @@ export default {
value: 0,
mapping: {},
show: false
}
},
svg: null
}
},
methods: {
@@ -122,7 +123,7 @@ export default {
funnelData = funnelData.filter(item => item.value !== 0)
}
this.$nextTick(() => {
d3.select(`#funnel-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
// 获取svg宽高 初始化画布
const svgDom = document.getElementById(`funnel-svg-${this.chartId}`)
if (!svgDom) {
@@ -153,8 +154,8 @@ export default {
return d
}
)
const svg = d3.select(`#funnel-svg-${this.chartId}`)
const chart = svg.append('g').attr('width', chartWidth).attr('height', chartHeight).attr('transform', `translate(${margin}, ${margin})`)
this.svg = d3.select(`#funnel-svg-${this.chartId}`)
const chart = this.svg.append('g').attr('width', chartWidth).attr('height', chartHeight).attr('transform', `translate(${margin}, ${margin})`)
// 渲染梯形
const trapezoids = chart
@@ -290,11 +291,6 @@ export default {
`
}
},
resize () {
setTimeout(() => {
this.drawChart()
}, 50)
},
chartEnter (e, data) {
this.tooltip.title = data.alias
this.tooltip.value = data.showValue
@@ -367,6 +363,23 @@ export default {
(Math.round((t - B) * p) + B)
return `#${converted.toString(16).slice(1)}`
},
resize () {
setTimeout(() => {
this.drawChart()
}, 50)
},
dispose () {
if (this.svg) {
this.svg.selectAll('.trap').on('mouseover', null)
this.svg.selectAll('.trap').on('mousemove', null)
this.svg.selectAll('.trap').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('mouseover', null)
this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('g').remove()
this.svg = null
}
}
},
mounted () {
@@ -374,7 +387,7 @@ export default {
this.chartInfo.loaded && this.initChart(true)
},
beforeDestroy () {
d3.select(`#funnel-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
}
}
</script>

63
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -45,7 +45,7 @@ export default {
mapping: {},
show: false
},
svgDom: null,
svg: null,
spaceBetweenHexa: 3,
hexagonTimer: null
}
@@ -53,21 +53,19 @@ export default {
methods: {
hexbin,
initChart () {
this.clearCache().then(() => {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
this.timer = setTimeout(() => {
this.initHexagonData(this.chartInfo, this.chartData).then(() => {
this.getLayout().then(layout => {
this.initHexagon(layout)
}).catch(() => {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
this.timer = setTimeout(() => {
this.initHexagonData(this.chartInfo, this.chartData).then(() => {
this.getLayout().then(layout => {
this.initHexagon(layout)
}).catch(() => {
})
})
}, 200)
})
})
}, 200)
},
initHexagonData (chartInfo, originalDatas) {
this.HexagonData = []
@@ -135,7 +133,8 @@ export default {
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
const child = document.getElementById('svgHex' + this.chartId)
if (dom && child) {
dom.removeChild(child)
this.clearCache()
// dom.removeChild(child)
}
if (dom) {
const hexaRadius = layout.radius
@@ -164,13 +163,11 @@ export default {
const hexbin = this.hexbin()
.radius(hexaRadius)
.extent([[0, 0], [width, height]])
const svg = d3.create('svg')
this.svg = d3.create('svg')
.attr('id', 'svgHex' + this.chartId)
.attr('width', width)
.attr('height', height)
.on('mousemove', this.hexagonMove)
this.svgDom = 'svgHex' + this.chartId
for (let i = 0; i < data.length; i++) {
const point = data[i]
const col = point.x
@@ -179,15 +176,15 @@ export default {
const vals = self.getCenter(hexaRadius, row, col) // Gets the Center coordinates with given row and column
const x = vals[0]
const y = vals[1]
const g = svg.append('g')
const g = this.svg.append('g')
const hexa = self.drawHexagon(g, hexaRadius, spaceBetweenHexa, x, y, hexbin) // Draws hexagon
hexa.attr('fill', color) // Paints hexagon
g.on('mouseenter', self.hexagonOver.bind(self, point))
g.on('mouseleave', self.hexagonOut.bind(self, point))
self.drawText(svg, vals, point, color, hexaRadius, g) // 文本
self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本
data[i].fcolor = color
}
return svg.node()
return this.svg.node()
},
hexagonOver (that, e) { // 移入六边形
this.tooltip.title = that.alias
@@ -414,13 +411,13 @@ export default {
})
},
clearCache () {
return new Promise(resolve => {
// if (this.svgDom) {
// const dom = document.getElementById(this.svgDom)
// dom.off('mousemove', this.hexagonMove)
// }
resolve()
})
if (this.svg) {
this.svg.on('mousemove', null)
this.svg.selectAll('g').on('mouseenter', null)
this.svg.selectAll('g').on('mouseleave', null)
this.svg.remove()
this.svg = null
}
},
resize () {
if (this.hexagonTimer) {
@@ -436,8 +433,6 @@ export default {
}, 50)
}
},
created () {
},
mounted () {
// eslint-disable-next-line vue/no-mutating-props
this.chartOption.color || (this.chartOption.color = initColor(20))
@@ -445,6 +440,14 @@ export default {
this.chartInfo.loaded && this.initChart(this.chartOption)
},
beforeDestroy () {
if (this.timer) {
clearTimeout(this.timer)
this.timer = null
}
if (this.hexagonTimer) {
clearTimeout(this.hexagonTimer)
this.hexagonTimer = null
}
this.clearCache()
}
}

28
nezha-fronted/src/components/chart/chart/chartRank.vue
View File

@@ -64,7 +64,8 @@ export default {
mapping: {},
rank: 0,
show: false
}
},
svg: null
}
},
methods: {
@@ -115,7 +116,7 @@ export default {
drawRankChart () {
this.$nextTick(() => {
d3.select(`#rank-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
// 获取svg宽高 初始化画布
const svgDom = document.getElementById(`rank-svg-${this.chartId}`)
if (!svgDom) {
@@ -128,7 +129,7 @@ export default {
const margin = 40
// 计算svg高度
const height = this.rankData.length * (barHeight + margin) + margin
const svg = d3.select(`#rank-svg-${this.chartId}`).attr('height', height)
this.svg = d3.select(`#rank-svg-${this.chartId}`).attr('height', height)
const bodyX = 50
const bodyWidth = width - 3 * bodyX
@@ -151,7 +152,7 @@ export default {
// 柱子最小宽度
const minWidth = 2
// 渲染柱形
const bars = svg.append('g')
const bars = this.svg.append('g')
.attr('transform', `translate(${bodyX})`)
.selectAll()
.data(rankData)
@@ -174,7 +175,7 @@ export default {
bars.exit().remove()
// 文本标签
svg.append('g')
this.svg.append('g')
.attr('transform', `translate(${bodyX})`)
.selectAll()
.data(rankData)
@@ -203,7 +204,7 @@ export default {
.style('overflow', 'visible')
// 生成标签和矩形
svg.append('g')
this.svg.append('g')
.attr('transform', `translate(${bodyX})`)
.selectAll('text')
.data(rankData)
@@ -283,11 +284,22 @@ export default {
this.tooltip.x = e.pageX + 15
}
},
resize () {
setTimeout(() => {
this.drawRankChart()
}, 50)
},
dispose () {
if (this.svg) {
this.svg.selectAll('rect').on('mouseenter', null)
this.svg.selectAll('rect').on('mousemove', null)
this.svg.selectAll('rect').on('mouseleave', null)
this.svg.selectAll('foreignObject').on('mouseenter', null)
this.svg.selectAll('foreignObject').on('mousemove', null)
this.svg.selectAll('foreignObject').on('mouseleave', null)
this.svg.selectAll('g').remove()
this.svg = null
}
}
},
@@ -296,7 +308,7 @@ export default {
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {
d3.select(`#rank-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
}
}
</script>

24
nezha-fronted/src/components/chart/chart/chartSankey.vue
View File

@@ -59,7 +59,8 @@ export default {
value: 0,
mapping: {},
show: false
}
},
svg: null
}
},
methods: {
@@ -136,8 +137,7 @@ export default {
drawSankeyChart () {
this.$nextTick(() => {
d3.select(`#sankey-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
// 获取svg宽高 初始化画布
const svgDom = document.getElementById(`sankey-svg-${this.chartId}`)
if (!svgDom) {
@@ -147,8 +147,8 @@ export default {
const height = svgDom.getBoundingClientRect().height
const margin1 = 100
const margin2 = 50
const svg = d3.select(`#sankey-svg-${this.chartId}`)
const chart = svg.append('g').attr('transform', `translate(${margin2}, ${margin2})`)
this.svg = d3.select(`#sankey-svg-${this.chartId}`)
const chart = this.svg.append('g').attr('transform', `translate(${margin2}, ${margin2})`)
// 创建桑基图生成器
const sankey = d3Sankey
@@ -389,6 +389,18 @@ export default {
setTimeout(() => {
this.drawSankeyChart()
}, 50)
},
dispose () {
if (this.svg) {
this.svg.selectAll('path').on('mouseover', null)
this.svg.selectAll('path').on('mousemove', null)
this.svg.selectAll('path').on('mouseleave', null)
this.svg.selectAll('.node').on('mouseover', null)
this.svg.selectAll('.node').on('mousemove', null)
this.svg.selectAll('.node').on('mouseleave', null)
this.svg.selectAll('g').remove()
this.svg = null
}
}
},
mounted () {
@@ -396,7 +408,7 @@ export default {
this.chartInfo.loaded && this.initChart()
},
beforeDestroy () {
d3.select(`#sankey-svg-${this.chartId}`).selectAll('g').remove() // 清空作图区域
this.dispose()
}
}
</script>

20
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -439,18 +439,18 @@ export default {
this.initChart(this.chartOption)
}
}
},
'chartInfo.loaded': {
immediate: true,
deep: true,
handler (n) {
if (n) {
this.initChart && this.initChart(this.chartOption)
}
}
}
// 'chartInfo.loaded': {
// immediate: true,
// deep: true,
// handler (n) {
// if (n) {
// this.initChart && this.initChart(this.chartOption)
// }
// }
// }
},
mounted () {
created () {
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
},
beforeDestroy () {

10
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -163,12 +163,12 @@ export default {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.refreshDataFunc()
this.timer = ''
this.timer = null
}, 200)
} else {
this.timer = setTimeout(() => {
this.refreshDataFunc()
this.timer = ''
this.timer = null
}, 200)
}
}
@@ -181,6 +181,12 @@ export default {
}
},
beforeDestroy () {
if (this.timer) {
this.timer = setTimeout(() => {
this.refreshDataFunc()
this.timer = null
}, 200)
}
if (this.intervalTimer) {
clearInterval(this.intervalTimer)
this.intervalTimer = null