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

frontend/src/lang/zh.js

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

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: {

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)
+    }
   }
 }

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)

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>

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;

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;

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;

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;

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;

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;

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;

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;

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 => {

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()
     }
   }
 }