center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #2144 from dataease/pr@dev@refactor_view-gauge-scale

Browse Source 
refactor: 仪表盘可以根据画布缩放调整大小
This commit is contained in:
王嘉豪 2022-04-20 12:04:59 +08:00 committed by GitHub
commit a240874d62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -31,6 +31,7 @@
:track-menu="trackMenu"
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
:scale="scale"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
@ -41,6 +42,7 @@
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
:scale="scale"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
@ -177,7 +179,8 @@ export default {
pre: null,
preCanvasPanel: null,
sourceCustomAttrStr: null,
sourceCustomStyleStr: null
sourceCustomStyleStr: null,
scale: 1
}
},
@ -412,11 +415,11 @@ export default {
},
// 根据仪表板的缩放比例，修改视图内部参数
mergeScale() {
const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType)
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {

17
frontend/src/views/chart/chart/gauge/gauge.js
View File

@ -1,8 +1,9 @@
import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOption(chart_option, chart) {
export function baseGaugeOption(chart_option, chart, scale = 1) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
@ -87,24 +88,24 @@ export function baseGaugeOption(chart_option, chart) {
show: false
}
chart_option.series[0].axisTick = {
splitNumber: 5, // TODO 刻度间隔数
length: 10, // TODO 子刻度线长度
splitNumber: getScaleValue(5, scale), // TODO 刻度间隔数
length: getScaleValue(10, scale), // TODO 子刻度线长度
lineStyle: {
color: 'auto',
width: 2// TODO 子刻度线宽度
width: getScaleValue(2, scale) // TODO 子刻度线宽度
}
}
chart_option.series[0].splitLine = {
length: 18, // TODO 刻度线长度
length: getScaleValue(18, scale), // TODO 刻度线长度
lineStyle: {
color: 'auto',
width: 2// TODO 刻度线宽度
width: getScaleValue(2, scale) // TODO 刻度线宽度
}
}
chart_option.series[0].axisLabel = {
color: 'auto',
distance: 20, // TODO 刻度值文字里刻度线距离
fontSize: 20// TODO 刻度值字体大小
distance: getScaleValue(20, scale), // TODO 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// TODO 刻度值字体大小
}
}
}

13
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -1,8 +1,9 @@
import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
import { Gauge } from '@antv/g2plot'
import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOptionAntV(plot, container, chart, action) {
export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
let max, labelContent, startAngel, endAngel
// theme
const theme = getTheme(chart)
@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
axis: {
label: {
style: {
fontSize: 14// TODO 刻度值字体大小
fontSize: getScaleValue(14, scale) // TODO 刻度值字体大小
}
},
tickLine: {
length: -12, // TODO 刻度线长度
length: getScaleValue(12, scale) * -1, // TODO 刻度线长度
style: {
lineWidth: 1// TODO 刻度线宽度
lineWidth: getScaleValue(1, scale)// TODO 刻度线宽度
}
},
subTickLine: {
count: 4, // TODO 子刻度数
length: -6, // TODO 子刻度线长度
length: getScaleValue(6, scale) * -1, // TODO 子刻度线长度
style: {
lineWidth: 1// TODO 子刻度线宽度
lineWidth: getScaleValue(1, scale)// TODO 子刻度线宽度
}
}
}

7
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -115,6 +115,11 @@ export default {
terminalType: {
type: String,
default: 'pc'
},
scale: {
type: Number,
required: false,
default: 1
}
},
data() {
@ -210,7 +215,7 @@ export default {
} else if (chart.type === 'radar') {
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
} else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.scale)
} else if (chart.type === 'scatter') {
chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
} else if (chart.type === 'treemap') {

7
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -50,6 +50,11 @@ export default {
type: Number,
required: false,
default: 0
},
scale: {
type: Number,
required: false,
default: 1
}
},
data() {
@ -153,7 +158,7 @@ export default {
} else if (chart.type === 'radar') {
this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'gauge') {
this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction, this.scale)
} else if (chart.type === 'pie') {
this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'pie-rose') {