Merge pull request #10035 from ulleo/dev-v2

feat(图表): 支持网格线设置为虚线
This commit is contained in:
ulleo 2024-06-03 14:13:27 +08:00 committed by GitHub
commit 00d6b03020
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 60 additions and 37 deletions

View File

@ -33,6 +33,12 @@ const state = reactive({
const emit = defineEmits(['onChangeYAxisForm'])
const splitLineStyle = [
{ label: t('chart.line_type_solid'), value: 'solid' },
{ label: t('chart.line_type_dashed'), value: 'dashed' },
{ label: t('chart.line_type_dotted'), value: 'dotted' }
]
watch(
() => props.form,
() => {
@ -284,10 +290,26 @@ onMounted(() => {
is-custom
/>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-select
:disabled="!state.axisForm.splitLine.show"
style="width: 62px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.style"
@change="changeAxisStyle('splitLine.lineStyle.style')"
>
<el-option
v-for="option in splitLineStyle"
:key="option.value"
:value="option.value"
:label="option.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
<el-input-number
:disabled="!state.axisForm.splitLine.show"
style="width: 108px"
style="width: 74px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.width"
:min="1"

View File

@ -316,10 +316,26 @@ onMounted(() => {
is-custom
/>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-select
:disabled="!state.axisForm.splitLine.show"
style="width: 62px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.style"
@change="changeAxisStyle('splitLine.lineStyle.style')"
>
<el-option
v-for="option in splitLineStyle"
:key="option.value"
:value="option.value"
:label="option.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
<el-input-number
:disabled="!state.axisForm.splitLine.show"
style="width: 108px"
style="width: 74px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.width"
:min="1"
@ -330,22 +346,6 @@ onMounted(() => {
/>
</el-form-item>
</div>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-select
:disabled="!state.axisForm.splitLine.show"
style="width: 108px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.style"
@change="changeAxisStyle('splitLine.lineStyle')"
>
<el-option
v-for="option in splitLineStyle"
:key="option.value"
:value="option.value"
:label="option.label"
></el-option>
</el-select>
</el-form-item>
</div>
<el-divider class="m-divider" :class="'m-divider--' + themes" />
<el-form-item

View File

@ -298,10 +298,26 @@ onMounted(() => {
is-custom
/>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-select
:disabled="!state.axisForm.splitLine.show"
style="width: 62px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.style"
@change="changeAxisStyle('splitLine.lineStyle.style')"
>
<el-option
v-for="option in splitLineStyle"
:key="option.value"
:value="option.value"
:label="option.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
<el-input-number
:disabled="!state.axisForm.splitLine.show"
style="width: 108px"
style="width: 74px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.width"
:min="1"
@ -312,22 +328,6 @@ onMounted(() => {
/>
</el-form-item>
</div>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-select
:disabled="!state.axisForm.splitLine.show"
style="width: 108px"
:effect="props.themes"
v-model="state.axisForm.splitLine.lineStyle.style"
@change="changeAxisStyle('splitLine.lineStyle')"
>
<el-option
v-for="option in splitLineStyle"
:key="option.value"
:value="option.value"
:label="option.label"
></el-option>
</el-select>
</el-form-item>
</div>
<el-divider
v-if="showProperty('axisLabel')"

View File

@ -530,7 +530,8 @@ export function getYAxisExt(chart: Chart) {
line: {
style: {
stroke: yAxis.splitLine.lineStyle.color,
lineWidth: yAxis.splitLine.lineStyle.width
lineWidth: yAxis.splitLine.lineStyle.width,
lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
}
}
}
@ -780,7 +781,7 @@ export function getAnalyseHorizontal(chart: Chart) {
return assistLine
}
function getLineDash(type) {
export function getLineDash(type) {
switch (type) {
case 'solid':
return [0, 0]