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-12-20 15:58:01 +08:00
parent a7e177162b
commit 3d9a4c0f44
4 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -209,7 +209,7 @@ export default {
.attr('height', height) .attr('height', height)
.attr('viewBox', [-width / 2, -height / 2, width, height]) .attr('viewBox', [-width / 2, -height / 2, width, height])
const outerRadius = (Math.min(width, height) / 2) * 0.6 // outer radius of pie, in pixels const outerRadius = (Math.min(width, height) / 2) * 0.8 // outer radius of pie, in pixels
const innerRadius = outerRadius * (this.chartInfo.type === 'doughnut' ? 0.67 : 0) // inner radius of pie, in pixels (non-zero for donut) const innerRadius = outerRadius * (this.chartInfo.type === 'doughnut' ? 0.67 : 0) // inner radius of pie, in pixels (non-zero for donut)
const padAngle = 0 // angular separation between wedges const padAngle = 0 // angular separation between wedges
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius) const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)

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

@@ -153,8 +153,9 @@ export default {
// 计算svg高度 // 计算svg高度
const height = this.rankData.length * (barHeight + margin) + margin const height = this.rankData.length * (barHeight + margin) + margin
this.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 left = 20
const bodyWidth = width - 3 * bodyX const right = 80
const bodyWidth = width - left - right
// 从大到小排序 // 从大到小排序
let rankData = lodash.cloneDeep(this.rankData) let rankData = lodash.cloneDeep(this.rankData)
@@ -176,7 +177,7 @@ export default {
const minWidth = 2 const minWidth = 2
// 渲染柱形 // 渲染柱形
const bars = this.svg.append('g') const bars = this.svg.append('g')
.attr('transform', `translate(${bodyX})`) .attr('transform', `translate(${left})`)
.selectAll() .selectAll()
.data(rankData) .data(rankData)
bars.enter() bars.enter()
@@ -200,7 +201,7 @@ export default {
// 文本标签 // 文本标签
this.svg.append('g') this.svg.append('g')
.attr('transform', `translate(${bodyX})`) .attr('transform', `translate(${left})`)
.selectAll() .selectAll()
.data(rankData) .data(rankData)
.enter() .enter()
@@ -230,7 +231,7 @@ export default {
// 生成标签和矩形 // 生成标签和矩形
this.svg.append('g') this.svg.append('g')
.attr('transform', `translate(${bodyX})`) .attr('transform', `translate(${left})`)
.selectAll('text') .selectAll('text')
.data(rankData) .data(rankData)
.enter() .enter()

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

@@ -208,7 +208,7 @@ export default {
.attr('height', height) .attr('height', height)
.attr('viewBox', [-width / 2, -height / 2, width, height]) .attr('viewBox', [-width / 2, -height / 2, width, height])
const outerRadius = (Math.min(width, height) / 2) * 0.6 // outer radius of pie, in pixels const outerRadius = (Math.min(width, height) / 2) * 0.8 // outer radius of pie, in pixels
const innerRadius = 20 // inner radius of pie, in pixels (non-zero for donut) const innerRadius = 20 // inner radius of pie, in pixels (non-zero for donut)
const padAngle = 0 // angular separation between wedges const padAngle = 0 // angular separation between wedges
const radius = 4 const radius = 4

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

@@ -170,17 +170,18 @@ export default {
} }
const width = svgDom.getBoundingClientRect().width const width = svgDom.getBoundingClientRect().width
const height = svgDom.getBoundingClientRect().height const height = svgDom.getBoundingClientRect().height
const margin1 = 100 const vertical = 20
const margin2 = 50 const left = 20
const right = 80
this.svg = d3.select(`#sankey-svg-${this.chartId}`) this.svg = d3.select(`#sankey-svg-${this.chartId}`)
const chart = this.svg.append('g').attr('transform', `translate(${margin2}, ${margin2})`) const chart = this.svg.append('g').attr('transform', `translate(${left}, ${vertical})`)
// 创建桑基图生成器 // 创建桑基图生成器
const sankey = d3Sankey const sankey = d3Sankey
.sankey() .sankey()
.nodeWidth(20) .nodeWidth(20)
.nodePadding(20) .nodePadding(20)
.size([width - 2 * margin1, height - 2 * margin2]) .size([width - 2 * left - right, height - 2 * vertical])
.nodeId((d) => d.node) .nodeId((d) => d.node)
const nodesData = lodash.cloneDeep(this.nodesData) const nodesData = lodash.cloneDeep(this.nodesData)
const linksData = lodash.cloneDeep(this.linksData) const linksData = lodash.cloneDeep(this.linksData)