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

feat: AntV轴分割线支持设置虚线

Browse Source
This commit is contained in:
ulleo 2023-12-07 14:52:54 +08:00
parent eed807dc09
commit c0552950f7
12 changed files with 275 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/frontend/src/lang/en.js
View File

@ -1221,6 +1221,9 @@ export default {
axis_width: 'Axis Width',
axis_type: 'Axis Type',
grid_show: 'Grid Show',
dash_show: 'Dash Show',
dash_width: 'Dash Width',
dash_offset: 'Dash Offset',
grid_color: 'Grid Color',
grid_width: 'Grid Width',
grid_type: 'Grid Type',

3
core/frontend/src/lang/tw.js
View File

@ -1219,6 +1219,9 @@ export default {
axis_width: '軸線寬度',
axis_type: '軸線類型',
grid_show: '網格線顯示',
dash_show: '虛線顯示',
dash_width: '虛線寬度',
dash_offset: '虛線間距',
grid_color: '網格線顏色',
grid_width: '網格線寬度',
grid_type: '網格線類型',

3
core/frontend/src/lang/zh.js
View File

@ -1219,6 +1219,9 @@ export default {
axis_width: '轴线宽度',
axis_type: '轴线类型',
grid_show: '网格线显示',
dash_show: '虚线显示',
dash_width: '虚线宽度',
dash_offset: '虚线间距',
grid_color: '网格线颜色',
grid_width: '网格线宽度',
grid_type: '网格线类型',

15
core/frontend/src/views/chart/chart/chart.js
View File

@ -328,6 +328,11 @@ export const DEFAULT_XAXIS_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {
@ -374,6 +379,11 @@ export const DEFAULT_YAXIS_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {
@ -420,6 +430,11 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
color: '#cccccc',
width: 1,
style: 'solid'
},
enableDash: false,
dashStyle: {
width: 4,
offset: 5
}
},
axisValue: {

21
core/frontend/src/views/chart/chart/common/common_antv.js
View File

@ -656,11 +656,16 @@ export function getXAxis(chart) {
},
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
@ -771,11 +776,16 @@ export function getYAxis(chart) {
},
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
@ -883,11 +893,16 @@ export function getYAxisExt(chart) {
},
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

43
core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue
View File

@ -201,6 +201,46 @@
@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 v-if="showProperty('axisForm')" />
<el-form-item
@ -412,6 +452,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))
}
}
}
},

42
core/frontend/src/views/chart/components/componentStyle/YAxisExtSelectorAntV.vue
View File

@ -195,6 +195,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 v-if="showProperty('axisLabel')" />
<el-form-item
@ -408,6 +447,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))
}
}
}
},

42
core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue
View File

@ -198,6 +198,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 v-if="showProperty('axisLabel')" />
<el-form-item
@ -408,6 +447,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))
}
}
}
},

42
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue
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))
}
}
}
},

42
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue
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))
}
}
}
},

10
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
View File

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

14
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
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