dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(视图): 支持字体、间距、阴影

Browse Source
This commit is contained in:
junjun 2022-07-26 10:34:23 +08:00
parent 0faf625908
commit 0b6a14d7f7
13 changed files with 410 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/lang/en.js
View File

@ -1173,7 +1173,16 @@ export default {
conditions_can_not_empty: 'Conditions can not be empty，if unnecessary，please delete the field',
remark: 'Remark',
remark_edit: 'Edit Remark',
remark_bg_color: 'Background Fill'
remark_bg_color: 'Background Fill',
quota_font_family: 'Value Font Family',
quota_text_style: 'Value Style',
quota_letter_space: 'Value Letter Space',
dimension_font_family: 'Name Font Family',
dimension_text_style: 'Name Style',
dimension_letter_space: 'Name Letter Space',
font_family: 'Font Family',
letter_space: 'Letter Space',
font_shadow: 'Font Shadow'
},
dataset: {
parse_filed: 'Parse Field',

11
frontend/src/lang/tw.js
View File

@ -1172,7 +1172,16 @@ export default {
conditions_can_not_empty: '字段的條件不能為空，若無條件，請直接刪除該字段',
remark: '備註',
remark_edit: '編輯備註',
remark_bg_color: '背景填充'
remark_bg_color: '背景填充',
quota_font_family: '值字體',
quota_text_style: '值樣式',
quota_letter_space: '值字間距',
dimension_font_family: '名稱字體',
dimension_text_style: '名稱樣式',
dimension_letter_space: '名稱字間距',
font_family: '字體',
letter_space: '字間距',
font_shadow: '字體陰影'
},
dataset: {
parse_filed: '解析字段',

11
frontend/src/lang/zh.js
View File

@ -1174,7 +1174,16 @@ export default {
conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
remark: '备注',
remark_edit: '编辑备注',
remark_bg_color: '背景填充'
remark_bg_color: '背景填充',
quota_font_family: '值字体',
quota_text_style: '值样式',
quota_letter_space: '值字间距',
dimension_font_family: '名称字体',
dimension_text_style: '名称样式',
dimension_letter_space: '名称字间距',
font_family: '字体',
letter_space: '字间距',
font_shadow: '字体阴影'
},
dataset: {
parse_filed: '解析字段',

44
frontend/src/views/chart/chart/chart.js
View File

@ -61,6 +61,16 @@ export const DEFAULT_SIZE = {
spaceSplit: 10,
dimensionShow: true,
quotaShow: true,
quotaFontFamily: 'Microsoft YaHei',
quotaFontIsBolder: false,
quotaFontIsItalic: false,
quotaLetterSpace: 0,
quotaFontShadow: false,
dimensionFontFamily: 'Microsoft YaHei',
dimensionFontIsBolder: false,
dimensionFontIsItalic: false,
dimensionLetterSpace: 0,
dimensionFontShadow: false,
scatterSymbol: 'circle',
scatterSymbolSize: 20,
treemapWidth: 80,
@ -147,7 +157,10 @@ export const DEFAULT_TITLE_STYLE = {
isBolder: true,
remarkShow: false,
remark: '',
remarkBackgroundColor: '#ffffffff'
remarkBackgroundColor: '#ffffffff',
fontFamily: 'Microsoft YaHei',
letterSpace: '0',
fontShadow: false
}
export const DEFAULT_TITLE_STYLE_DARK = {
@ -157,7 +170,13 @@ export const DEFAULT_TITLE_STYLE_DARK = {
hPosition: 'left',
vPosition: 'top',
isItalic: false,
isBolder: true
isBolder: true,
remarkShow: false,
remark: '',
remarkBackgroundColor: '#ffffffff',
fontFamily: 'Microsoft YaHei',
letterSpace: '0',
fontShadow: false
}
export const DEFAULT_LEGEND_STYLE = {
@ -968,3 +987,24 @@ export const BASE_ECHARTS_SELECT = {
shadowBlur: 2
}
}
export const CHART_FONT_FAMILY = [
{ name: '微软雅黑', value: 'Microsoft YaHei' },
{ name: '宋体', value: 'SimSun' },
{ name: '黑体', value: 'SimHei' },
{ name: '楷体', value: 'KaiTi' }
]
export const CHART_FONT_LETTER_SPACE = [
{ name: '0px', value: '0' },
{ name: '1px', value: '1' },
{ name: '2px', value: '2' },
{ name: '3px', value: '3' },
{ name: '4px', value: '4' },
{ name: '5px', value: '5' },
{ name: '6px', value: '6' },
{ name: '7px', value: '7' },
{ name: '8px', value: '8' },
{ name: '9px', value: '9' },
{ name: '10px', value: '10' }
]

148
frontend/src/views/chart/chart/util.js
View File

@ -66,7 +66,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -108,7 +111,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -153,7 +159,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -175,8 +184,16 @@ export const TYPE_CONFIGS = [
],
'size-selector-ant-v': [
'quotaFontSize',
'quotaFontFamily',
'quotaFontStyle',
'quotaLetterSpace',
'quotaFontShadow',
'dimensionShow',
'dimensionFontSize',
'dimensionFontFamily',
'dimensionFontStyle',
'dimensionLetterSpace',
'dimensionFontShadow',
'spaceSplit'
],
'title-selector-ant-v': [
@ -187,7 +204,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -209,8 +229,16 @@ export const TYPE_CONFIGS = [
],
'size-selector-ant-v': [
'quotaFontSize',
'quotaFontFamily',
'quotaFontStyle',
'quotaLetterSpace',
'quotaFontShadow',
'dimensionShow',
'dimensionFontSize',
'dimensionFontFamily',
'dimensionFontStyle',
'dimensionLetterSpace',
'dimensionFontShadow',
'spaceSplit'
],
'title-selector-ant-v': [
@ -221,7 +249,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -261,7 +292,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -299,7 +333,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -368,7 +405,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -445,7 +485,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -522,7 +565,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -598,7 +644,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -667,7 +716,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -735,7 +787,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -811,7 +866,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -866,7 +924,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -921,7 +982,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -977,7 +1041,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -1030,7 +1097,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -1070,7 +1140,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -1138,7 +1211,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -1188,7 +1264,10 @@ export const TYPE_CONFIGS = [
'hPosition',
'isItalic',
'isBolder',
'remarkShow'
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
@ -1295,8 +1374,16 @@ export const TYPE_CONFIGS = [
],
'size-selector': [
'quotaFontSize',
'quotaFontFamily',
'quotaFontStyle',
'quotaLetterSpace',
'quotaFontShadow',
'dimensionShow',
'dimensionFontSize',
'dimensionFontFamily',
'dimensionFontStyle',
'dimensionLetterSpace',
'dimensionFontShadow',
'spaceSplit'
],
'title-selector': [
@ -1305,9 +1392,11 @@ export const TYPE_CONFIGS = [
'fontSize',
'color',
'hPosition',
'vPosition',
'isItalic',
'isBolder'
'isBolder',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
@ -1329,8 +1418,16 @@ export const TYPE_CONFIGS = [
],
'size-selector': [
'quotaFontSize',
'quotaFontFamily',
'quotaFontStyle',
'quotaLetterSpace',
'quotaFontShadow',
'dimensionShow',
'dimensionFontSize',
'dimensionFontFamily',
'dimensionFontStyle',
'dimensionLetterSpace',
'dimensionFontShadow',
'spaceSplit'
],
'title-selector': [
@ -1340,7 +1437,10 @@ export const TYPE_CONFIGS = [
'color',
'hPosition',
'isItalic',
'isBolder'
'isBolder',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},

7
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -4,7 +4,7 @@
<span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
<title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
</div>
</span>
<div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
@ -27,6 +27,7 @@ import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export default {
name: 'ChartComponentG2',
@ -322,6 +323,10 @@ export default {
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
}
if (customStyle.background) {
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

7
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -4,7 +4,7 @@
<span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
<title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
</div>
</span>
<div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
@ -40,6 +40,7 @@ import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export default {
name: 'ChartComponentS2',
@ -322,6 +323,10 @@ export default {
if (this.$refs.title) {
this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
}
this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
}
if (customStyle.background) {
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

23
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -16,6 +16,11 @@
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
<el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -42,6 +47,14 @@
<el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
<el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
</el-col>
@ -49,7 +62,7 @@
</template>
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
@ -77,7 +90,9 @@ export default {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
fontFamily: CHART_FONT_FAMILY,
fontLetterSpace: CHART_FONT_LETTER_SPACE
}
},
watch: {
@ -108,6 +123,10 @@ export default {
}
if (customStyle.text) {
this.titleForm = customStyle.text
this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
}
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title

59
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
View File

@ -16,6 +16,11 @@
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
<el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -35,25 +40,33 @@
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
<el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
<el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
<el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<span v-show="titleForm.remarkShow">
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
<el-button
:title="$t('chart.edit')"
icon="el-icon-edit"
type="text"
size="small"
@click="editRemark"
/>
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
<el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
<el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
</el-form-item>
</span>
<span v-show="titleForm.remarkShow">
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
<el-button
:title="$t('chart.edit')"
icon="el-icon-edit"
type="text"
size="small"
@click="editRemark"
/>
</el-form-item>
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
<el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
</el-form-item>
</span>
</div>
</el-form>
</el-col>
@ -78,14 +91,12 @@
</template>
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
export default {
name: 'TitleSelectorAntV',
components: { RemarkEditor },
props: {
param: {
type: Object,
@ -110,7 +121,9 @@ export default {
isSetting: false,
predefineColors: COLOR_PANEL,
showEditRemark: false,
tmpRemark: ''
tmpRemark: '',
fontFamily: CHART_FONT_FAMILY,
fontLetterSpace: CHART_FONT_LETTER_SPACE
}
},
computed: {
@ -144,6 +157,10 @@ export default {
this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
}
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title

22
frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -3,7 +3,7 @@
<span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
</div>
</span>
<div
@ -30,6 +30,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export default {
name: 'LabelNormal',
@ -157,8 +158,21 @@ export default {
if (customAttr.size) {
this.dimensionShow = customAttr.size.dimensionShow
this.quotaShow = customAttr.size.quotaShow
this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
if (!this.dimensionShow) {
this.label_space.marginTop = '0px'
} else {
@ -175,6 +189,10 @@ export default {
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
@ -239,7 +257,7 @@ export default {
},
resultFormat() {
if(!this.chart.data)return
if (!this.chart.data) return
const value = this.chart.data.series[0].data[0]
let yAxis = []
try {

20
frontend/src/views/chart/components/normal/LabelNormalText.vue
View File

@ -4,7 +4,7 @@
<span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
</div>
</span>
<div
@ -31,6 +31,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
export default {
name: 'LabelNormalText',
@ -172,8 +173,21 @@ export default {
if (customAttr.size) {
this.dimensionShow = customAttr.size.dimensionShow
this.quotaShow = customAttr.size.quotaShow
this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
if (!this.dimensionShow) {
this.label_space.marginTop = '0px'
} else {
@ -190,6 +204,10 @@ export default {
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

55
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -132,12 +132,30 @@
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
</el-form-item>
<!--gauge-end-->
<!--text&label-end-->
<!--text&label-start-->
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
<el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
<el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
<el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
<el-divider v-if="showProperty('dimensionShow')" />
<el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
@ -146,6 +164,24 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
<el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
<el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
<el-divider v-if="showProperty('spaceSplit')" />
<el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
</el-form-item>
@ -265,7 +301,7 @@
</template>
<script>
import { DEFAULT_SIZE } from '../../chart/chart'
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
export default {
name: 'SizeSelector',
props: {
@ -312,7 +348,9 @@ export default {
{ name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
{ name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
],
fontSize: []
fontSize: [],
fontFamily: CHART_FONT_FAMILY,
fontLetterSpace: CHART_FONT_LETTER_SPACE
}
},
watch: {
@ -352,6 +390,17 @@ export default {
this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
}
}
},

54
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
View File

@ -321,11 +321,30 @@
<!--gauge-end-->
<el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<!--text&label-start-->
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
<el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
<el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
<el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
<el-divider v-if="showProperty('dimensionShow')" />
<el-form-item
v-show="showProperty('dimensionShow')"
:label="$t('chart.dimension_show')"
@ -346,6 +365,24 @@
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
<el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
<el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
<el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
<el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
<el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
<el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
</el-form-item>
<el-divider v-if="showProperty('spaceSplit')" />
<el-form-item
v-show="showProperty('spaceSplit')"
:label="$t('chart.space_split')"
@ -433,7 +470,7 @@
</template>
<script>
import { DEFAULT_SIZE } from '../../chart/chart'
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
export default {
name: 'SizeSelectorAntV',
@ -482,7 +519,9 @@ export default {
{ name: this.$t('chart.table_align_left'), value: 'left' },
{ name: this.$t('chart.table_align_center'), value: 'center' },
{ name: this.$t('chart.table_align_right'), value: 'right' }
]
],
fontFamily: CHART_FONT_FAMILY,
fontLetterSpace: CHART_FONT_LETTER_SPACE
}
},
watch: {
@ -530,6 +569,17 @@ export default {
this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
}
}
},