Merge pull request #7071 from ulleo/dev

feat: AntV轴分割线支持设置虚线
This commit is contained in:
ulleo
2023-12-07 14:55:39 +08:00
committed by GitHub
12 changed files with 275 additions and 5 deletions

View File

@@ -178,6 +178,45 @@
@change="changeYAxisStyle('lineStyle')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.dash_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.enableDash"
@change="changeYAxisStyle('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="changeYAxisStyle('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="changeYAxisStyle('splitLine')"
/>
</el-form-item>
</template>
</span>
<el-divider/>
<el-form-item
@@ -385,6 +424,9 @@ export default {
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLine))
}
if (!this.axisForm.splitLine.dashStyle) {
this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle))
}
}
}
},

View File

@@ -175,6 +175,45 @@
@change="changeYAxisStyle('splitLine')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.dash_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.enableDash"
@change="changeYAxisStyle('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="changeYAxisStyle('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="changeYAxisStyle('splitLine')"
/>
</el-form-item>
</template>
</span>
<el-divider/>
<el-form-item
@@ -385,6 +424,9 @@ export default {
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLine))
}
if (!this.axisForm.splitLine.dashStyle) {
this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine.dashStyle))
}
}
}
},

View File

@@ -416,6 +416,11 @@ export const DEFAULT_YAXIS_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {
@@ -462,6 +467,11 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {

View File

@@ -510,11 +510,16 @@ export default {
},
spacing: 8
} : null
const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_STYLE.splitLine
if (!gridCfg.dashStyle) {
gridCfg.dashStyle = DEFAULT_YAXIS_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
@@ -601,11 +606,16 @@ export default {
},
spacing: 8
} : null
const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_EXT_STYLE.splitLine
if (!gridCfg.dashStyle) {
gridCfg.dashStyle = DEFAULT_YAXIS_EXT_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