refactor(视图): 图形属性，增加配色方案功能

2021-03-17 16:12:30 +08:00 · 2021-03-17 16:12:30 +08:00 · 63fe122209
commit 63fe122209
parent 5f823af95a
6 changed files with 181 additions and 17 deletions
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -602,7 +602,19 @@ export default {
    std: '标准差',
    var_samp: '方差',
    quick_calc: '快速计算',
-    show_name_set: '显示名设置'
+    show_name_set: '显示名设置',
+    color: '颜色',
+    color_case: '配色方案',
+    pls_slc_color_case: '请选择配色方案',
+    color_default: '默认',
+    color_retro: '复古',
+    color_future: '未来',
+    color_gradual: '渐变',
+    color_business: '商务',
+    color_gentle: '柔和',
+    color_elegant: '淡雅',
+    color_technology: '科技',
+    color_simple: '简洁'
  },
  dataset: {
    datalist: '数据集',
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -1,3 +1,7 @@
+export const DEFAULT_COLOR_CASE = {
+  value: 'default',
+  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+}
 export const BASE_BAR = {
  title: {
    text: ''
@ -33,5 +37,5 @@ export const BASE_LINE = {
 }

 export default {
-  BASE_BAR, BASE_LINE
+  BASE_BAR, BASE_LINE, DEFAULT_COLOR_CASE
 }
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -40,6 +40,7 @@ export default {
        chart_option = JSON.parse(JSON.stringify(BASE_LINE))
      }
      // console.log(chart_option);
+      // 处理data
      if (chart.data) {
        chart_option.title.text = chart.title
        chart_option.xAxis.data = chart.data.x
@ -49,6 +50,12 @@ export default {
        })
      }
      // console.log(chart_option);
+      // 处理shape attr
+      if (chart.customAttr) {
+        if (chart.customAttr.color) {
+          chart_option.color = chart.customAttr.color.colors
+        }
+      }
      this.myEcharts(chart_option)
    },
    myEcharts(option) {
--- a/frontend/src/views/chart/components/ColorSelector.vue
+++ b/frontend/src/views/chart/components/ColorSelector.vue
@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <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_case')" class="form-item">
+              <el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
+                  <div style="float: left">
+                    <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
+                  </div>
+                  <span style="margin-left: 4px;">{{ option.name }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+      <!--todo other color attr-->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      colorCases: [
+        {
+          name: this.$t('chart.color_default'),
+          value: 'default',
+          colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        },
+        {
+          name: this.$t('chart.color_retro'),
+          value: 'retro',
+          colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_elegant'),
+          value: 'elegant',
+          colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
+        },
+        {
+          name: this.$t('chart.color_future'),
+          value: 'future',
+          colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
+        },
+        {
+          name: this.$t('chart.color_gradual'),
+          value: 'gradual',
+          colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
+        },
+        {
+          name: this.$t('chart.color_simple'),
+          value: 'simple',
+          colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
+        },
+        {
+          name: this.$t('chart.color_business'),
+          value: 'business',
+          colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
+        },
+        {
+          name: this.$t('chart.color_gentle'),
+          value: 'gentle',
+          colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
+        },
+        {
+          name: this.$t('chart.color_technology'),
+          value: 'technology',
+          colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
+        }
+      ],
+      colorForm: {
+        colorCase: 'default'
+      }
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        this.colorForm.colorCase = chart.customAttr.color.value
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeColorCase() {
+      const that = this
+      const items = this.colorCases.filter(ele => {
+        return ele.value === that.colorForm.colorCase
+      })
+      this.$emit('onColorChange', {
+        value: items[0].value,
+        colors: items[0].colors
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{font-size: 12px}
+</style>
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@ -211,6 +211,7 @@
 <script>
 import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
+import { DEFAULT_COLOR_CASE } from '../chart/chart'

 export default {
  name: 'Group',
@ -503,6 +504,10 @@ export default {
      view.name = this.table.name
      view.sceneId = this.currGroup.id
      view.tableId = this.table.id
+      view.type = 'bar'
+      view.customAttr = JSON.stringify({
+        color: DEFAULT_COLOR_CASE
+      })
      post('/chart/view/save', view).then(response => {
        this.selectTableFlag = false
        this.$store.dispatch('chart/setTableId', null)
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -79,14 +79,16 @@
          <el-row>
            <div class="chart-type">
              <!--TODO 这里要替换好看点的图标-->
-              <el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px"/></el-radio>
+              <el-radio v-model="view.type" label="bar"><i class="el-icon-platform-eleme" style="font-size: 20px" /></el-radio>
              <el-radio v-model="view.type" label="line">折线图</el-radio>
            </div>
          </el-row>
        </div>
        <div style="height: 45%;overflow:auto;border-top: 1px solid #e6e6e6">
          <el-tabs type="card" :stretch="true" class="tab-header">
-            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">TODO</el-tab-pane>
+            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
+              <color-selector :chart="chart" @onColorChange="onColorChange" />
+            </el-tab-pane>
            <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
          </el-tabs>
        </div>
@ -144,10 +146,13 @@ import draggable from 'vuedraggable'
 import DimensionItem from '../components/DimensionItem'
 import QuotaItem from '../components/QuotaItem'
 import ChartComponent from '../components/ChartComponent'
+// shape attr
+import { DEFAULT_COLOR_CASE } from '../chart/chart'
+import ColorSelector from '../components/ColorSelector'

 export default {
  name: 'ChartEdit',
-  components: { ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
  data() {
    return {
      table: {},
@ -158,7 +163,10 @@ export default {
        yaxis: [],
        show: true,
        type: 'bar',
-        title: ''
+        title: '',
+        customAttr: {
+          color: DEFAULT_COLOR_CASE
+        }
      },
      // 定义要被拖拽对象的数组
      arr1: [
@ -224,17 +232,6 @@ export default {
        this.quota = response.data.quota
      })
    },
-    get(id) {
-      if (id) {
-        post('/chart/view/get/' + id, null).then(response => {
-          this.view = response.data
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-        })
-      } else {
-        this.view = {}
-      }
-    },
    save() {
      const view = JSON.parse(JSON.stringify(this.view))
      view.id = this.view.id
@ -253,6 +250,7 @@ export default {
      })
      view.xaxis = JSON.stringify(view.xaxis)
      view.yaxis = JSON.stringify(view.yaxis)
+      view.customAttr = JSON.stringify(view.customAttr)
      post('/chart/view/save', view).then(response => {
        // this.get(response.data.id);
        this.getData(response.data.id)
@ -269,6 +267,7 @@ export default {
          this.view = response.data
          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+          this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
          // 将视图传入echart组件
          this.chart = response.data
        })
@ -365,6 +364,11 @@ export default {
      //   }
      // })
      this.save()
+    },
+
+    onColorChange(val) {
+      this.view.customAttr.color = val
+      this.save()
    }
  }
 }
@ -399,6 +403,7 @@ export default {
    border: solid 1px #eee;
    text-align: left;
    color: #606266;
+    background-color: rgba(35,46,64,.05);
    display: block;
  }

@ -408,6 +413,7 @@ export default {
    border: solid 1px #eee;
    text-align: left;
    color: #606266;
+    background-color: rgba(35,46,64,.05);
  }

  .item + .item {