feat: AntV组合图横轴网格线增加虚线配置

This commit is contained in:
ulleo 2023-12-15 18:13:20 +08:00
parent b40edc2f36
commit c4d8f43da3
3 changed files with 56 additions and 1 deletions

View File

@ -122,6 +122,48 @@
@change="changeXAxisStyle('splitLine')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.dash_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.enableDash"
@change="changeXAxisStyle('splitLine')"
>{{ $t('chart.dash_show') }}</el-checkbox>
</el-form-item>
<template v-if="axisForm.splitLine.enableDash">
<el-form-item
:label="$t('chart.dash_width')"
class="form-item form-item-slider"
>
<el-slider
v-model="axisForm.splitLine.dashStyle.width"
:min="1"
:max="10"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeXAxisStyle('splitLine')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.dash_offset')"
class="form-item form-item-slider"
>
<el-slider
v-model="axisForm.splitLine.dashStyle.offset"
:min="1"
:max="10"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeXAxisStyle('splitLine')"
/>
</el-form-item>
</template>
</span>
<el-divider/>
<el-form-item
@ -325,6 +367,9 @@ export default {
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLine))
}
if (!this.axisForm.splitLine.dashStyle) {
this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine.dashStyle))
}
}
}
},

View File

@ -549,6 +549,11 @@ export const DEFAULT_XAXIS_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {

View File

@ -441,11 +441,16 @@ export default {
},
spacing: 8
} : null
const gridCfg = a.splitLine ? a.splitLine : DEFAULT_XAXIS_STYLE.splitLine
if (!gridCfg.dashStyle) {
gridCfg.dashStyle = DEFAULT_XAXIS_STYLE.splitLine.dashStyle
}
const grid = a.splitLine.show ? {
line: {
style: {
stroke: a.splitLine.lineStyle.color,
lineWidth: parseInt(a.splitLine.lineStyle.width)
lineWidth: parseInt(a.splitLine.lineStyle.width),
lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
}
}
} : null