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

fix: [AntV组合图] 柱状图不能设置标签样式

Browse Source
This commit is contained in:
ulleo 2023-09-06 16:05:29 +08:00
parent 7794cc5150
commit 3ba69be557
2 changed files with 65 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,34 @@
<el-color-picker v-model="labelForm.color" 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.position"
: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>
<!-- <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">
@ -125,7 +153,12 @@ export default {
],
predefineColors: COLOR_PANEL,
values: null,
busiType: 'labelAxis'
busiType: 'labelAxis',
labelPositionV: [
{name: this.$t('chart.text_pos_top'), value: 'top'},
{name: this.$t('chart.center'), value: 'middle'},
{name: this.$t('chart.text_pos_bottom'), value: 'bottom'}
],
}
},
watch: {

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

@ -36,7 +36,13 @@ import {Mix} from '@antv/g2plot'
import {uuid, hexColorToRGBA} from '@/utils/chartmix'
import ViewTrackBar from '@/components/views/ViewTrackBar'
import {getRemark} from "@/components/views/utils";
import {DEFAULT_TITLE_STYLE, DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_STYLE, transAxisPosition, getLineDash} from '@/utils/map';
import {
DEFAULT_TITLE_STYLE,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
transAxisPosition,
getLineDash
} from '@/utils/map';
import ChartTitleUpdate from '@/components/views/ChartTitleUpdate';
import _ from 'lodash';
import {clear} from 'size-sensor'
@ -294,6 +300,7 @@ export default {
let customAttr = undefined;
let colors = undefined;
let labelSetting = undefined;
let labelPosition = 'middle';
if (this.chart.customAttr) {
customAttr = JSON.parse(this.chart.customAttr);
if (customAttr) {
@ -302,15 +309,12 @@ export default {
}
if (customAttr.label) {
labelSetting = customAttr.label.show ? {
callback: function (x) {
return {
style: {
fill: customAttr.label.color,
fontSize: parseInt(customAttr.label.fontSize),
},
};
style: {
fill: customAttr.label.color,
fontSize: parseInt(customAttr.label.fontSize),
},
} : false
labelPosition = customAttr.label.position;
}
}
}
@ -330,8 +334,16 @@ export default {
names.push(t.name);
const _chartType = this.getChartType(yaxisList[_index].chartType);
if (_chartType === "column") {
_labelSetting.position = labelPosition;
} else {
_labelSetting.position = undefined;
}
return {
type: this.getChartType(yaxisList[_index].chartType),
type: _chartType,
name: t.name,
options: {
data: _.map(t.data, (v) => {
@ -374,8 +386,17 @@ export default {
names.push(t.name);
const _chartType = this.getChartType(yaxisExtList[_index].chartType);
if (_chartType === "column") {
_labelSetting.position = labelPosition;
} else {
_labelSetting.position = undefined;
}
return {
type: this.getChartType(yaxisExtList[_index].chartType),
type: _chartType,
name: t.name,
options: {
data: _.map(t.data, (v) => {
@ -444,7 +465,6 @@ export default {
item.value = valueFormatter(item.data.value, yaxisExtList[item.data.i].formatterCfg)
}
})
console.log(originalItems)
return _.filter(originalItems, (item) => {
const v = item.data.key;
if (item.title === v && item.title === item.value && item.name === "key" || !names.includes(item.name)) {