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

feat(视图): AntV组合图插件标签设置支持主副轴标签区分设置

Browse Source 
#8328
This commit is contained in:
ulleo 2024-03-28 13:54:30 +08:00
parent 27038f2b6f
commit df3353b972
3 changed files with 76 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LabelSelector.vue
View File

@ -2,6 +2,9 @@
<div style="width: 100%;">
<el-col>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-divider content-position="left"><span style="font-size: 12px">主轴标签</span></el-divider>
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
@ -44,39 +47,52 @@
/>
</el-select>
</el-form-item>
<!-- <el-form-item :label="$t('chart.label')" class="form-item">
<el-select v-model="values" :placeholder="$t('commons.please_select')" multiple collapse-tags
@change="changeFields">
<el-option-group
v-for="group in fieldOptions"
:key="group.label"
:label="group.label"
>
<el-option
v-for="item in group.options"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
{{ $t('plugin_view_chartmix.tooltip_format_tip') }}
</div>
<i class="el-icon-info" style="cursor: pointer;"/>
</el-tooltip>
</span>
</span>
<el-input v-model="labelForm.labelTemplate" type="textarea" :placeholder="defaultPlaceholder"
:autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr"/>
</el-form-item>-->
</div>
<el-divider content-position="left"><span style="font-size: 12px">副轴标签</span></el-divider>
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.subShow" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.subShow">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.subFontSize" :placeholder="$t('chart.text_fontsize')" size="mini"
@change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value"/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.subColor" class="color-picker-style" :predefine="predefineColors"
@change="changeLabelAttr"/>
</el-form-item>
<el-form-item
class="form-item"
>
<template #label>
{{ $t('chart.label_position') }}
<el-tooltip
effect="dark"
content="仅对柱状图生效"
>
<i
class="el-icon-info"
style="cursor: pointer;"
/>
</el-tooltip>
</template>
<el-select
v-model="labelForm.subPosition"
:placeholder="$t('chart.label_position')"
@change="changeLabelAttr"
>
<el-option
v-for="option in labelPositionV"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
</div>
</el-form>
@ -85,7 +101,7 @@
</template>
<script>
import {COLOR_PANEL, DEFAULT_LABEL, getDefaultTemplate} from '@/utils/map'
import {COLOR_PANEL, DEFAULT_LABEL, getDefaultTemplate} from '../../utils/map'
export default {
name: 'LabelSelector',
@ -195,6 +211,13 @@ export default {
if (!this.labelForm.labelLine) {
this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
}
if (this.labelForm.subShow === undefined) {
this.labelForm.subShow = DEFAULT_LABEL.subShow
this.labelForm.subPosition = DEFAULT_LABEL.subPosition
this.labelForm.subColor = DEFAULT_LABEL.subColor
this.labelForm.subFontSize = DEFAULT_LABEL.subFontSize
}
if (!customAttr.label.initialized) {
this.changeLabelAttr();
}
@ -270,6 +293,7 @@ export default {
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.form-item ::v-deep .el-radio__label {
font-size: 12px;
}

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

@ -60,6 +60,10 @@ export const DEFAULT_LABEL = {
position: 'middle',
color: '#000000',
fontSize: '10',
subShow: true,
subPosition: 'middle',
subColor: '#000000',
subFontSize: '10',
formatter: '{c}',
gaugeFormatter: '{value}',
labelLine: {

17
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
View File

@ -39,7 +39,8 @@ import {
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
transAxisPosition,
getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE,
DEFAULT_LABEL
} from '../../../utils/map';
import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
import {map, filter, join, flatten, cloneDeep} from 'lodash-es';
@ -279,7 +280,9 @@ export default {
let colors = undefined;
let alpha = DEFAULT_COLOR_CASE.alpha;
let labelSetting = undefined;
let labelPosition = 'middle';
let labelPosition = DEFAULT_LABEL.position;
let subLabelSetting = undefined;
let subLabelPosition = DEFAULT_LABEL.subPosition;
if (this.chart.customAttr) {
customAttr = JSON.parse(this.chart.customAttr);
if (customAttr) {
@ -296,6 +299,14 @@ export default {
},
} : false
labelPosition = customAttr.label.position;
subLabelSetting = customAttr.label.subShow ? {
style: {
fill: customAttr.label.subColor,
fontSize: parseInt(customAttr.label.subFontSize),
},
} : false
subLabelPosition = customAttr.label.subPosition;
}
}
}
@ -348,7 +359,7 @@ export default {
}
) : [];
const yExtData = [this.getYExtData(flatten(yExtChartData), labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)];
const yExtData = [this.getYExtData(flatten(yExtChartData), subLabelSetting, subLabelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)];
const params = {
tooltip: false,