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

feat: 仪表盘刻度大小自适应

Browse Source
This commit is contained in:
junjun 2022-04-20 13:01:07 +08:00
parent a240874d62
commit ded3fb29cb
2 changed files with 60 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,29 +88,66 @@ export function baseGaugeOption(chart_option, chart, scale = 1) {
show: false show: false
} }
chart_option.series[0].axisTick = { chart_option.series[0].axisTick = {
splitNumber: getScaleValue(5, scale), // TODO 刻度间隔数 splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: getScaleValue(10, scale), // TODO 子刻度线长度 length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: { lineStyle: {
color: 'auto', color: 'auto',
width: getScaleValue(2, scale) // TODO 子刻度线宽度 width: getScaleValue(2, scale) // 子刻度线宽度
} }
} }
chart_option.series[0].splitLine = { chart_option.series[0].splitLine = {
length: getScaleValue(18, scale), // TODO 刻度线长度 length: getScaleValue(18, scale), // 刻度线长度
lineStyle: { lineStyle: {
color: 'auto', color: 'auto',
width: getScaleValue(2, scale) // TODO 刻度线宽度 width: getScaleValue(2, scale) // 刻度线宽度
} }
} }
chart_option.series[0].axisLabel = { chart_option.series[0].axisLabel = {
color: 'auto', color: 'auto',
distance: getScaleValue(20, scale), // TODO 刻度值文字里刻度线距离 distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// TODO 刻度值字体大小 fontSize: getScaleValue(20, scale)// 刻度值字体大小
} }
} else {
chart_option.series[0].axisTick = {
splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 子刻度线宽度
}
}
chart_option.series[0].splitLine = {
length: getScaleValue(18, scale), // 刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 刻度线宽度
}
}
chart_option.series[0].axisLabel = {
distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// 刻度值字体大小
}
}
} else {
chart_option.series[0].axisTick = {
splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 子刻度线宽度
}
}
chart_option.series[0].splitLine = {
length: getScaleValue(18, scale), // 刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 刻度线宽度
}
}
chart_option.series[0].axisLabel = {
distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(12, scale)// 刻度值字体大小
} }
} }
} }
} }
console.log(chart_option.series[0])
// console.log(chart_option); // console.log(chart_option);
componentStyle(chart_option, chart) componentStyle(chart_option, chart)
return chart_option return chart_option

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

@ -77,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
axis: { axis: {
label: { label: {
style: { style: {
fontSize: getScaleValue(14, scale) // TODO 刻度值字体大小 fontSize: getScaleValue(14, scale) // 刻度值字体大小
} }
}, },
tickLine: { tickLine: {
length: getScaleValue(12, scale) * -1, // TODO 刻度线长度 length: getScaleValue(12, scale) * -1, // 刻度线长度
style: { style: {
lineWidth: getScaleValue(1, scale)// TODO 刻度线宽度 lineWidth: getScaleValue(1, scale)// 刻度线宽度
} }
}, },
subTickLine: { subTickLine: {
count: 4, // TODO 子刻度数 count: 4, // TODO 子刻度数
length: getScaleValue(6, scale) * -1, // TODO 子刻度线长度 length: getScaleValue(6, scale) * -1, // 子刻度线长度
style: { style: {
lineWidth: getScaleValue(1, scale)// TODO 子刻度线宽度 lineWidth: getScaleValue(1, scale)// 子刻度线宽度
} }
} }
} }
@ -114,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
}, },
pin: { pin: {
style: { style: {
stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length] stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length],
r: getScaleValue(10, scale)
}
}
}
} else {
options.indicator = {
pin: {
style: {
r: getScaleValue(10, scale)
} }
} }
} }
} }
console.log(options.indicator.pin)
// 开始渲染 // 开始渲染
if (plot) { if (plot) {