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

470f8cdd · junjie · fcd4ca8f · 470f8cdd · 470f8cdd · 470f8cdd
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -679,7 +679,9 @@ export default {
    desc: '降序',
    sort: '排序',
    filter: '过滤',
-    none: '无'
+    none: '无',
+    background: '背景',
+    alpha: '透明度'
  },
  dataset: {
    datalist: '数据集',

--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -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: {

--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
+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)
+    }
  }
 }
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -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)

--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+<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>
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
 <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;

--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
 <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;

--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
 <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;

--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
 <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;

--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
 <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;

--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
 <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;

--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
 <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;

--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
 <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;

--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -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 => {

--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -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()
    }
  }
 }