提交 470f8cdd authored 作者: junjie's avatar junjie

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

上级 fcd4ca8f
...@@ -679,7 +679,9 @@ export default { ...@@ -679,7 +679,9 @@ export default {
desc: '降序', desc: '降序',
sort: '排序', sort: '排序',
filter: '过滤', filter: '过滤',
none: '无' none: '无',
background: '背景',
alpha: '透明度'
}, },
dataset: { dataset: {
datalist: '数据集', datalist: '数据集',
......
...@@ -71,6 +71,10 @@ export const DEFAULT_YAXIS_STYLE = { ...@@ -71,6 +71,10 @@ export const DEFAULT_YAXIS_STYLE = {
formatter: '{value}' formatter: '{value}'
} }
} }
export const DEFAULT_BACKGROUND_COLOR = {
color: '#ffffff',
alpha: 0
}
// chart config // chart config
export const BASE_BAR = { export const BASE_BAR = {
title: { title: {
......
import { hexColorToRGBA } from '@/views/chart/chart/util'
export function componentStyle(chart_option, chart) { export function componentStyle(chart_option, chart) {
if (chart.customStyle) { if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle) const customStyle = JSON.parse(chart.customStyle)
...@@ -31,5 +33,8 @@ export function componentStyle(chart_option, chart) { ...@@ -31,5 +33,8 @@ export function componentStyle(chart_option, chart) {
chart_option.yAxis.name = customStyle.yAxis.name chart_option.yAxis.name = customStyle.yAxis.name
chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
} }
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
} }
} }
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart) chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
} else if (chart.type === 'bar-horizontal') { } else if (chart.type === 'bar-horizontal') {
chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart) 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) chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
} else if (chart.type === 'line') { } else if (chart.type === 'line') {
chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart) chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
......
<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>
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_color')" class="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>
<el-form-item :label="$t('chart.text_h_position')" class="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"> <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
...@@ -121,6 +121,10 @@ export default { ...@@ -121,6 +121,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_color')" class="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>
<el-form-item :label="$t('chart.text_h_position')" class="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"> <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
...@@ -100,6 +100,10 @@ export default { ...@@ -100,6 +100,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -78,6 +78,10 @@ export default { ...@@ -78,6 +78,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -78,6 +78,10 @@ export default { ...@@ -78,6 +78,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -130,6 +130,10 @@ export default { ...@@ -130,6 +130,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_color')" class="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>
<el-form-item :label="$t('chart.label_position')" class="form-item"> <el-form-item :label="$t('chart.label_position')" class="form-item">
<el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr"> <el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="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-item>
</el-form> </el-form>
</el-col> </el-col>
...@@ -92,10 +92,14 @@ export default { ...@@ -92,10 +92,14 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
} width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
line-height: 38px; line-height: 38px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -134,6 +134,10 @@ export default { ...@@ -134,6 +134,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
<template> <template>
<div> <div>
<div> <div style="width: 100%">
<el-popover <el-popover
placement="right" placement="right"
width="400" width="400"
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_color')" class="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>
<el-form-item :label="$t('chart.content_formatter')" class="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" /> <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 { ...@@ -92,6 +92,10 @@ export default {
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
......
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
> >
<span slot-scope="{ node, data }" class="custom-tree-node"> <span slot-scope="{ node, data }" class="custom-tree-node">
<span> <span>
<span>({{ data.type }})</span> <span><svg-icon :icon-class="data.type" /></span>
<span style="margin-left: 6px">{{ data.name }}</span> <span style="margin-left: 6px">{{ data.name }}</span>
</span> </span>
<span> <span>
...@@ -217,7 +217,10 @@ import { ...@@ -217,7 +217,10 @@ import {
DEFAULT_LEGEND_STYLE, DEFAULT_LEGEND_STYLE,
DEFAULT_SIZE, DEFAULT_SIZE,
DEFAULT_TITLE_STYLE, DEFAULT_TITLE_STYLE,
DEFAULT_TOOLTIP DEFAULT_TOOLTIP,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
DEFAULT_BACKGROUND_COLOR
} from '../chart/chart' } from '../chart/chart'
export default { export default {
...@@ -520,7 +523,10 @@ export default { ...@@ -520,7 +523,10 @@ export default {
}) })
view.customStyle = JSON.stringify({ view.customStyle = JSON.stringify({
text: DEFAULT_TITLE_STYLE, 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({}) view.customFilter = JSON.stringify({})
post('/chart/view/save', view).then(response => { post('/chart/view/save', view).then(response => {
......
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio> <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-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" 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> <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
</div> </div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;"> <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
...@@ -114,6 +114,7 @@ ...@@ -114,6 +114,7 @@
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" /> <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" /> <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" /> <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-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -192,7 +193,10 @@ import { ...@@ -192,7 +193,10 @@ import {
DEFAULT_TITLE_STYLE, DEFAULT_TITLE_STYLE,
DEFAULT_LEGEND_STYLE, DEFAULT_LEGEND_STYLE,
DEFAULT_LABEL, DEFAULT_LABEL,
DEFAULT_TOOLTIP DEFAULT_TOOLTIP,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
DEFAULT_BACKGROUND_COLOR
} from '../chart/chart' } from '../chart/chart'
import ColorSelector from '../components/shape-attr/ColorSelector' import ColorSelector from '../components/shape-attr/ColorSelector'
import SizeSelector from '../components/shape-attr/SizeSelector' import SizeSelector from '../components/shape-attr/SizeSelector'
...@@ -202,10 +206,11 @@ import LegendSelector from '../components/component-style/LegendSelector' ...@@ -202,10 +206,11 @@ import LegendSelector from '../components/component-style/LegendSelector'
import TooltipSelector from '../components/shape-attr/TooltipSelector' import TooltipSelector from '../components/shape-attr/TooltipSelector'
import XAxisSelector from '../components/component-style/XAxisSelector' import XAxisSelector from '../components/component-style/XAxisSelector'
import YAxisSelector from '../components/component-style/YAxisSelector' import YAxisSelector from '../components/component-style/YAxisSelector'
import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
export default { export default {
name: 'ChartEdit', 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() { data() {
return { return {
table: {}, table: {},
...@@ -225,7 +230,10 @@ export default { ...@@ -225,7 +230,10 @@ export default {
}, },
customStyle: { customStyle: {
text: DEFAULT_TITLE_STYLE, 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: [] customFilter: []
}, },
...@@ -477,6 +485,11 @@ export default { ...@@ -477,6 +485,11 @@ export default {
onChangeYAxisForm(val) { onChangeYAxisForm(val) {
this.view.customStyle.yAxis = val this.view.customStyle.yAxis = val
this.save() this.save()
},
onChangeBackgroundForm(val) {
this.view.customStyle.background = val
this.save()
} }
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论