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

feat(视图): 增加背景设置，样式等调整

Browse Source
This commit is contained in:
junjie 2021-03-24 13:32:29 +08:00
parent fcd4ca8f2d
commit 470f8cddae
15 changed files with 178 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -679,7 +679,9 @@ export default {
desc: '降序',
sort: '排序',
filter: '过滤',
none: '无'
none: '无',
background: '背景',
alpha: '透明度'
},
dataset: {
datalist: '数据集',

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

@ -71,6 +71,10 @@ export const DEFAULT_YAXIS_STYLE = {
formatter: '{value}'
}
}
export const DEFAULT_BACKGROUND_COLOR = {
color: '#ffffff',
alpha: 0
}
// chart config
export const BASE_BAR = {
title: {

5
frontend/src/views/chart/chart/common/common.js
View File

@ -1,3 +1,5 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
export function componentStyle(chart_option, chart) {
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
@ -31,5 +33,8 @@ export function componentStyle(chart_option, chart) {
chart_option.yAxis.name = customStyle.yAxis.name
chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
}
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}

2
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -53,7 +53,7 @@ export default {
chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
} else if (chart.type === 'bar-horizontal') {
chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
} else if (chart.type === 'bar-horizontal-stack') {
} else if (chart.type === 'bar-stack-horizontal') {
chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
} else if (chart.type === 'line') {
chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)

90
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color')" class="form-item">
<colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.alpha')" class="form-item">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
export default {
name: 'BackgroundColorSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR))
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.background) {
this.colorForm = customStyle.background
}
}
}
}
},
mounted() {
},
methods: {
changeBackgroundStyle() {
this.$emit('onChangeBackgroundForm', this.colorForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>

8
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -33,7 +33,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="legendForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLegendStyle" />
<colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
@ -121,6 +121,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

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

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -17,7 +17,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="titleForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTitleStyle" />
<colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
@ -100,6 +100,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

6
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -78,6 +78,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

6
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -78,6 +78,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

6
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -130,6 +130,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

18
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -17,7 +17,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="labelForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLabelAttr" />
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
</el-form-item>
<el-form-item :label="$t('chart.label_position')" class="form-item">
<el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
@ -29,7 +29,7 @@
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr"/>
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
@ -92,10 +92,14 @@ export default {
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;

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

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -134,6 +134,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

8
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
@ -23,7 +23,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="tooltipForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTooltipAttr" />
<colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
</el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
@ -92,6 +92,10 @@ export default {
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;

12
frontend/src/views/chart/group/Group.vue
View File

@ -149,7 +149,7 @@
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span>({{ data.type }})</span>
<span><svg-icon :icon-class="data.type" /></span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
@ -217,7 +217,10 @@ import {
DEFAULT_LEGEND_STYLE,
DEFAULT_SIZE,
DEFAULT_TITLE_STYLE,
DEFAULT_TOOLTIP
DEFAULT_TOOLTIP,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
DEFAULT_BACKGROUND_COLOR
} from '../chart/chart'
export default {
@ -520,7 +523,10 @@ export default {
})
view.customStyle = JSON.stringify({
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
})
view.customFilter = JSON.stringify({})
post('/chart/view/save', view).then(response => {

21
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -87,7 +87,7 @@
<el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
<el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
<el-radio value="bar-horizontal-stack" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
<el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
<el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
@ -114,6 +114,7 @@
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-tab-pane>
</el-tabs>
</div>
@ -192,7 +193,10 @@ import {
DEFAULT_TITLE_STYLE,
DEFAULT_LEGEND_STYLE,
DEFAULT_LABEL,
DEFAULT_TOOLTIP
DEFAULT_TOOLTIP,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
DEFAULT_BACKGROUND_COLOR
} from '../chart/chart'
import ColorSelector from '../components/shape-attr/ColorSelector'
import SizeSelector from '../components/shape-attr/SizeSelector'
@ -202,10 +206,11 @@ import LegendSelector from '../components/component-style/LegendSelector'
import TooltipSelector from '../components/shape-attr/TooltipSelector'
import XAxisSelector from '../components/component-style/XAxisSelector'
import YAxisSelector from '../components/component-style/YAxisSelector'
import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
export default {
name: 'ChartEdit',
components: { FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
components: { BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
@ -225,7 +230,10 @@ export default {
},
customStyle: {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE
legend: DEFAULT_LEGEND_STYLE,
xAxis: DEFAULT_XAXIS_STYLE,
yAxis: DEFAULT_YAXIS_STYLE,
background: DEFAULT_BACKGROUND_COLOR
},
customFilter: []
},
@ -477,6 +485,11 @@ export default {
onChangeYAxisForm(val) {
this.view.customStyle.yAxis = val
this.save()
},
onChangeBackgroundForm(val) {
this.view.customStyle.background = val
this.save()
}
}
}