提交 50c544fb authored 作者: junjie's avatar junjie

feat(视图): 标题增加字体样式

上级 9987ba38
...@@ -730,7 +730,9 @@ export default { ...@@ -730,7 +730,9 @@ export default {
axis_type_dotted: 'Dotted', axis_type_dotted: 'Dotted',
axis_label_show: 'Label Show', axis_label_show: 'Label Show',
axis_label_color: 'Label Color', axis_label_color: 'Label Color',
axis_label_fontsize: 'Label Fontsize' axis_label_fontsize: 'Label Fontsize',
text_style: 'Font Style',
bolder: 'Bolder'
}, },
dataset: { dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
...@@ -772,7 +772,9 @@ export default { ...@@ -772,7 +772,9 @@ export default {
axis_type_dotted: '點', axis_type_dotted: '點',
axis_label_show: '標簽顯示', axis_label_show: '標簽顯示',
axis_label_color: '標簽顏色', axis_label_color: '標簽顏色',
axis_label_fontsize: '標簽大小' axis_label_fontsize: '標簽大小',
text_style: '字體樣式',
bolder: '加粗'
}, },
dataset: { dataset: {
sheet_warn: '有多個sheet頁面,默認抽取第一個', sheet_warn: '有多個sheet頁面,默認抽取第一個',
......
...@@ -730,7 +730,9 @@ export default { ...@@ -730,7 +730,9 @@ export default {
axis_type_dotted: '点', axis_type_dotted: '点',
axis_label_show: '标签显示', axis_label_show: '标签显示',
axis_label_color: '标签颜色', axis_label_color: '标签颜色',
axis_label_fontsize: '标签大小' axis_label_fontsize: '标签大小',
text_style: '字体样式',
bolder: '加粗'
}, },
dataset: { dataset: {
sheet_warn: '有多个 Sheet 页,默认抽取第一个', sheet_warn: '有多个 Sheet 页,默认抽取第一个',
......
...@@ -63,7 +63,8 @@ export const DEFAULT_TITLE_STYLE = { ...@@ -63,7 +63,8 @@ export const DEFAULT_TITLE_STYLE = {
color: '#303133', color: '#303133',
hPosition: 'center', hPosition: 'center',
vPosition: 'top', vPosition: 'top',
isItalic: false isItalic: false,
isBolder: false
} }
export const DEFAULT_LEGEND_STYLE = { export const DEFAULT_LEGEND_STYLE = {
show: true, show: true,
......
...@@ -11,6 +11,7 @@ export function componentStyle(chart_option, chart) { ...@@ -11,6 +11,7 @@ export function componentStyle(chart_option, chart) {
style.fontSize = customStyle.text.fontSize style.fontSize = customStyle.text.fontSize
style.color = customStyle.text.color style.color = customStyle.text.color
customStyle.text.isItalic ? style.fontStyle = 'italic' : style.fontStyle = 'normal' customStyle.text.isItalic ? style.fontStyle = 'italic' : style.fontStyle = 'normal'
customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
chart_option.title.textStyle = style chart_option.title.textStyle = style
} }
if (customStyle.legend) { if (customStyle.legend) {
......
...@@ -44,8 +44,9 @@ ...@@ -44,8 +44,9 @@
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button> <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_italic')" class="form-item"> <el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox> <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
......
...@@ -50,7 +50,8 @@ export default { ...@@ -50,7 +50,8 @@ export default {
fontSize: '18px', fontSize: '18px',
color: '#303133', color: '#303133',
textAlign: 'left', textAlign: 'left',
fontStyle: 'normal' fontStyle: 'normal',
fontWeight: 'normal'
}, },
content_class: { content_class: {
display: 'flex', display: 'flex',
...@@ -136,6 +137,7 @@ export default { ...@@ -136,6 +137,7 @@ export default {
this.title_class.color = customStyle.text.color this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal' this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
} }
if (customStyle.background) { if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha) this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
......
...@@ -60,7 +60,8 @@ export default { ...@@ -60,7 +60,8 @@ export default {
fontSize: '18px', fontSize: '18px',
color: '#303133', color: '#303133',
textAlign: 'left', textAlign: 'left',
fontStyle: 'normal' fontStyle: 'normal',
fontWeight: 'normal'
}, },
bg_class: { bg_class: {
background: hexColorToRGBA('#ffffff', 0) background: hexColorToRGBA('#ffffff', 0)
...@@ -175,6 +176,7 @@ export default { ...@@ -175,6 +176,7 @@ export default {
this.title_class.color = customStyle.text.color this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal' this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
} }
if (customStyle.background) { if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha) this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论