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

Merge pull request #9723 from ulleo/dev-v2

Browse Source 
feat(图表): 增加网格线类型设置
This commit is contained in:
ulleo 2024-05-20 14:25:20 +08:00 committed by GitHub
commit 04fa61be25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
core/core-frontend/src/store/modules/data-visualization/dvMain.ts
View File

@ -362,8 +362,15 @@ export const dvMainStore = defineStore('dataVisualization', {
}
//如果当前的组件是UserView 图表，则想canvasView中增加一项 UserView ID 和componentID保持一致
if (component.component === 'UserView') {
const defaultConfig = JSON.parse(JSON.stringify(BASE_VIEW_CONFIG))
if (component.innerType === 'bar-range') {
defaultConfig.customStyle.xAxis.axisLine.show = false
defaultConfig.customStyle.xAxis.splitLine.show = true
defaultConfig.customStyle.yAxis.axisLine.show = true
defaultConfig.customStyle.yAxis.splitLine.show = false
}
let newView = {
...JSON.parse(JSON.stringify(BASE_VIEW_CONFIG)),
...defaultConfig,
id: component.id,
type: component.innerType,
render: component.render

22
core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
View File

@ -52,6 +52,12 @@ const fontSizeList = computed(() => {
return arr
})
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' }
]
const isBarRangeTime = computed<boolean>(() => {
if (props.chart.type === 'bar-range') {
const tempYAxis = props.chart.yAxis[0]
@ -326,6 +332,22 @@ 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

22
core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
View File

@ -52,6 +52,12 @@ const fontSizeList = computed(() => {
return arr
})
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' }
]
const changeAxisStyle = prop => {
if (
state.axisForm.axisValue.splitCount &&
@ -303,6 +309,22 @@ 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

6
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@ -357,7 +357,8 @@ export function getXAxis(chart: Chart) {
line: {
style: {
stroke: a.splitLine.lineStyle.color,
lineWidth: a.splitLine.lineStyle.width
lineWidth: a.splitLine.lineStyle.width,
lineDash: getLineDash(a.splitLine.lineStyle.style)
}
}
}
@ -435,7 +436,8 @@ export function getYAxis(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)
}
}
}