Skip to content

D
dataease
提交 f098f651 authored 作者: junjie's avatar junjie
浏览文件
操作

feat: 轴线支持线条和标签设置

上级 1051f590
隐藏空白字符变更
内嵌 并排
正在显示 包含 165 行增加 和 7 行删除
frontend/src/lang/en.js
浏览文件 @ f098f651
......@@ -720,7 +720,17 @@ export default {
chart_error_tips: 'Please contact admin ',
title_cannot_empty: 'Title can not be empty',
table_title_height: 'Table header height',
table_item_height: 'Table row height'
table_item_height: 'Table row height',
axis_show: 'Axis Show',
axis_color: 'Axis Color',
axis_width: 'Axis Width',
axis_type: 'Axis Type',
axis_type_solid: 'Solid',
axis_type_dashed: 'Dashed',
axis_type_dotted: 'Dotted',
axis_label_show: 'Label Show',
axis_label_color: 'Label Color',
axis_label_fontsize: 'Label Fontsize'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
frontend/src/lang/tw.js
浏览文件 @ f098f651
......@@ -762,7 +762,17 @@ export default {
chart_error_tips: '如有疑問請聯系管理員',
title_cannot_empty: '標題不能為空',
table_title_height: '表頭行高',
table_item_height: '表格行高'
table_item_height: '表格行高',
axis_show: '軸線顯示',
axis_color: '軸線顏色',
axis_width: '軸線寬度',
axis_type: '軸線類型',
axis_type_solid: '實線',
axis_type_dashed: '虛線',
axis_type_dotted: '點',
axis_label_show: '標簽顯示',
axis_label_color: '標簽顏色',
axis_label_fontsize: '標簽大小'
},
dataset: {
sheet_warn: '有多個sheet頁面，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ f098f651
......@@ -720,7 +720,17 @@ export default {
chart_error_tips: '如有疑问请联系管理员',
title_cannot_empty: '标题不能为空',
table_title_height: '表头行高',
table_item_height: '表格行高'
table_item_height: '表格行高',
axis_show: '轴线显示',
axis_color: '轴线颜色',
axis_width: '轴线宽度',
axis_type: '轴线类型',
axis_type_solid: '实线',
axis_type_dashed: '虚线',
axis_type_dotted: '点',
axis_label_show: '标签显示',
axis_label_color: '标签颜色',
axis_label_fontsize: '标签大小'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ f098f651
......@@ -81,8 +81,19 @@ export const DEFAULT_XAXIS_STYLE = {
position: 'bottom',
name: '',
axisLabel: {
show: true,
color: '#333333',
fontSize: '12',
rotate: 0,
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
}
}
export const DEFAULT_YAXIS_STYLE = {
......@@ -90,8 +101,19 @@ export const DEFAULT_YAXIS_STYLE = {
position: 'left',
name: '',
axisLabel: {
show: true,
color: '#333333',
fontSize: '12',
rotate: 0,
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
}
}
export const DEFAULT_BACKGROUND_COLOR = {
......
frontend/src/views/chart/chart/common/common.js
浏览文件 @ f098f651
......@@ -26,12 +26,14 @@ export function componentStyle(chart_option, chart) {
chart_option.xAxis.position = customStyle.xAxis.position
chart_option.xAxis.name = customStyle.xAxis.name
chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
chart_option.xAxis.splitLine = customStyle.xAxis.splitLine
}
if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
chart_option.yAxis.show = customStyle.yAxis.show
chart_option.yAxis.position = customStyle.yAxis.position
chart_option.yAxis.name = customStyle.yAxis.name
chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
}
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
......
frontend/src/views/chart/components/component-style/XAxisSelector.vue
浏览文件 @ f098f651
......@@ -24,6 +24,40 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
</el-form-item>
......@@ -58,7 +92,8 @@ export default {
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false
isSetting: false,
fontSize: []
}
},
watch: {
......@@ -74,14 +109,28 @@ export default {
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
}
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeXAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
......@@ -93,6 +142,9 @@ export default {
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item{
padding: 6px;
border: none;
......
frontend/src/views/chart/components/component-style/YAxisSelector.vue
浏览文件 @ f098f651
......@@ -24,6 +24,40 @@
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
</el-form-item>
......@@ -58,7 +92,8 @@ export default {
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false
isSetting: false,
fontSize: []
}
},
watch: {
......@@ -74,14 +109,28 @@ export default {
}
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
}
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeYAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
......@@ -93,6 +142,9 @@ export default {
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item{
padding: 6px;
border: none;
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ f098f651
......@@ -208,10 +208,10 @@
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-tab-pane>
</el-tabs>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论