Merge remote-tracking branch 'origin/dev' into dev

# Conflicts: # frontend/src/lang/en.js # frontend/src/lang/tw.js # frontend/src/lang/zh.js
2026-05-24 06:18:10 +08:00 · 2022-01-12 11:17:01 +08:00
parent 9c1a055b3f 96f4c999d0
commit 95186bd330
31 changed files with 521 additions and 213 deletions
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -3,6 +3,10 @@ import {
  HYPERLINKS
 } from '@/components/canvas/custom-component/component-list'

+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
+
 export function deepCopy(target) {
  if (typeof target === 'object') {
    const result = Array.isArray(target) ? [] : {}
@@ -62,25 +66,10 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
 export function panelInit(componentDatas) {
  componentDatas.forEach(item => {
    if (item.component && item.component === 'de-date') {
-      if (item.serviceName === 'timeDateWidget' && item.options.attrs && !item.options.attrs.default) {
-        item.options.attrs.default = {
-          isDynamic: false,
-          dkey: 0,
-          dynamicPrefix: 1,
-          dynamicInfill: 'day',
-          dynamicSuffix: 'before'
-        }
-      }
-      if (item.serviceName === 'timeDateRangeWidget' && item.options.attrs && !item.options.attrs.default) {
-        item.options.attrs.default = {
-          isDynamic: false,
-          dkey: 0,
-          sDynamicPrefix: 1,
-          sDynamicInfill: 'day',
-          sDynamicSuffix: 'before',
-          eDynamicPrefix: 1,
-          eDynamicInfill: 'day',
-          eDynamicSuffix: 'after'
+      if (item.options.attrs && !item.options.attrs.default) {
+        const widget = ApplicationContext.getService(item.serviceName)
+        if (widget && widget.defaultSetting) {
+          item.options.attrs.default = widget.defaultSetting()
        }
      }
    }
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -72,9 +72,7 @@ export default {
      this.setCondition()
    },
    'defaultValueStr': function(value, old) {
-      if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') &&
-          this.element.options.attrs.default.isDynamic) {
-        // 如果设置了动态时间 不做任何操作
+      if (this.element.options.attrs.default.isDynamic) {
        return
      }
      if (value === old) return
@@ -82,13 +80,10 @@ export default {
      this.dateChange(value)
    },
    'defaultoptions': function(val, old) {
-      // console.log('default chaneg')
-      if (this.element.serviceName !== 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') {
-        if (!this.element.options.attrs.default.isDynamic) {
-          this.values = this.fillValueDerfault()
-          this.dateChange(this.values)
-          return
-        }
+      if (!this.element.options.attrs.default.isDynamic) {
+        this.values = this.fillValueDerfault()
+        this.dateChange(this.values)
+        return
      }
      if (val === old) return
      const widget = ApplicationContext.getService(this.element.serviceName)
@@ -97,9 +92,7 @@ export default {
    }
  },
  created() {
-    if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') && this
-      .element.options.attrs.default && this.element.options
-      .attrs.default.isDynamic) {
+    if (this.element.options.attrs.default && this.element.options.attrs.default.isDynamic) {
      if (this.element.options.attrs.default) {
        const widget = ApplicationContext.getService(this.element.serviceName)
        this.values = widget.dynamicDateFormNow(this.element)
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -80,6 +80,9 @@ class TimeDateRangeServiceImpl extends WidgetService {
      return field['deType'] === 1
    })
  }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
  getStartDayOfWeek() {
    var now = new Date() // 当前日期
    var nowDayOfWeek = now.getDay()
@@ -159,18 +162,10 @@ class TimeDateRangeServiceImpl extends WidgetService {
      const nowYear = now.getFullYear()
      const nowDate = now.getDate()

-      const tarYear = nowYear
      if (dynamicSuffix === 'before') {
-        const deffMonth = nowMonth - dynamicPrefix
-        let diffYear = deffMonth / 12
-        if (deffMonth < 0) {
-          diffYear -= 1
-        }
-        return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+        return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
      } else {
-        const deffMonth = nowMonth + dynamicPrefix
-        const diffYear = deffMonth / 12
-        return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+        return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
      }
    }
    if (dynamicInfill === 'year') {
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -1,4 +1,6 @@
-import { WidgetService } from '../service/WidgetService'
+import {
+  WidgetService
+} from '../service/WidgetService'

 const leftPanel = {
  icon: 'iconfont icon-ri',
@@ -19,7 +21,23 @@ const dialogPanel = {
        dkey: 0,
        dynamicPrefix: 1,
        dynamicInfill: 'day',
-        dynamicSuffix: 'before'
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_time.fix' }, { value: true, text: 'dynamic_time.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_time.today' },
+          { value: 1, text: 'dynamic_time.yesterday' },
+          { value: 2, text: 'dynamic_time.firstOfMonth' },
+          { value: 3, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'day', text: 'dynamic_time.date' },
+            { value: 'week', text: 'dynamic_time.week' },
+            { value: 'month', text: 'dynamic_time.month' },
+            { value: 'year', text: 'dynamic_time.year' }
+          ],
+          limits: [1, 12]
+        }
      }
    },
    value: ''
@@ -45,7 +63,9 @@ const drawPanel = {

 class TimeDateServiceImpl extends WidgetService {
  constructor(options = {}) {
-    Object.assign(options, { name: 'timeDateWidget' })
+    Object.assign(options, {
+      name: 'timeDateWidget'
+    })
    super(options)
    this.filterDialog = true
    this.showSwitch = false
@@ -71,6 +91,9 @@ class TimeDateServiceImpl extends WidgetService {
      return field['deType'] === 1
    })
  }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
  dynamicDateFormNow(element) {
    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null

@@ -111,18 +134,10 @@ class TimeDateServiceImpl extends WidgetService {
        const nowYear = now.getFullYear()
        const nowDate = now.getDate()

-        const tarYear = nowYear
        if (dynamicSuffix === 'before') {
-          const deffMonth = nowMonth - dynamicPrefix
-          let diffYear = deffMonth / 12
-          if (deffMonth < 0) {
-            diffYear -= 1
-          }
-          return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
+          return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
        } else {
-          const deffMonth = nowMonth + dynamicPrefix
-          const diffYear = deffMonth / 12
-          return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
+          return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
        }
      }
      if (dynamicInfill === 'year') {
@@ -136,5 +151,7 @@ class TimeDateServiceImpl extends WidgetService {
    }
  }
 }
-const timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' })
+const timeDateServiceImpl = new TimeDateServiceImpl({
+  name: 'timeDateWidget'
+})
 export default timeDateServiceImpl
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -13,7 +13,27 @@ const dialogPanel = {
      placeholder: 'deyearmonth.placeholder',
      viewIds: [],
      fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'month',
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_month.fix' }, { value: true, text: 'dynamic_month.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_month.current' },
+          { value: 1, text: 'dynamic_month.last' },
+          { value: 2, text: 'dynamic_month.firstOfYear' },
+          { value: 3, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'month', text: 'dynamic_time.month' }
+          ],
+          limits: [0, 10]
+        }
+      }
    },
    value: ''
  },
@@ -64,6 +84,39 @@ class TimeMonthServiceImpl extends WidgetService {
      return field['deType'] === 1
    })
  }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
+  dynamicDateFormNow(element) {
+    const now = new Date()
+    const nowMonth = now.getMonth()
+    const nowYear = now.getFullYear()
+    const nowDate = now.getDate()
+    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
+
+    if (element.options.attrs.default.dkey === 0) {
+      return Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      return new Date(nowYear, nowMonth - 1, nowDate).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      return new Date(nowYear, 0, 1).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 3) {
+      const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      if (dynamicSuffix === 'before') {
+        return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
+      } else {
+        return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
+      }
+    }
+  }
 }
 const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -13,7 +13,26 @@ const dialogPanel = {
      placeholder: 'deyear.placeholder',
      viewIds: [],
      fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'year',
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_year.fix' }, { value: true, text: 'dynamic_year.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_year.current' },
+          { value: 1, text: 'dynamic_year.last' },
+          { value: 2, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'year', text: 'dynamic_time.year' }
+          ],
+          limits: [0, 10]
+        }
+      }
    },
    value: ''
  },
@@ -65,6 +84,36 @@ class TimeYearServiceImpl extends WidgetService {
      return field['deType'] === 1
    })
  }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
+  dynamicDateFormNow(element) {
+    if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
+
+    if (element.options.attrs.default.dkey === 0) {
+      return Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      const now = new Date()
+      const nowYear = now.getFullYear()
+      const nowMonth = now.getMonth()
+      const nowDate = now.getDate()
+      return new Date(nowYear - 1, nowMonth, nowDate).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      const nowYear = now.getFullYear()
+      const nowDate = now.getDate()
+
+      return new Date(dynamicSuffix === 'before' ? (nowYear - dynamicPrefix) : (nowYear + dynamicPrefix), nowMonth, nowDate).getTime()
+    }
+  }
 }
 const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -131,6 +131,7 @@ export default {
    default_login: 'Normal'
  },
  commons: {
+    apply: 'Apply',
    search: 'Search',
    folder: 'Folder',
    no_target_permission: 'No permission',
@@ -437,7 +438,10 @@ export default {
    background: 'Background color',
    custom: 'Custom color',
    otherSave: 'Theme Save as',
-    info: 'Theme info'
+    info: 'Theme info',
+    add: 'Add Theme',
+    please_input_name: 'Please enter a name',
+    name_repeat: 'Name already exists'
  },
  tagsView: {
    refresh: 'Refresh',
@@ -1759,6 +1763,19 @@ export default {
    cquarter: 'This Quarter',
    cyear: 'This Year'
  },
+  dynamic_year: {
+    fix: 'Fixed Year',
+    dynamic: 'Dynamic Year',
+    current: 'This Year',
+    last: 'Last Year'
+  },
+  dynamic_month: {
+    fix: 'Fixed Month',
+    dynamic: 'Dynamic Month',
+    current: 'This Month',
+    last: 'Last Month',
+    firstOfYear: 'First month of this year'
+  },
  wizard: {
    welcome_title: 'Welcome To Use DataEase',
    welcome_hint: 'Open source data visual analysis tool available to everyone',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -131,6 +131,7 @@ export default {
    default_login: '普通登錄'
  },
  commons: {
+    apply: '應用',
    search: '搜索',
    folder: '目錄',
    no_target_permission: '沒有權限',
@@ -437,7 +438,10 @@ export default {
    background: '背景顏色',
    custom: '自定義顏色',
    otherSave: '主題另存為',
-    info: '主題信息'
+    info: '主題信息',
+    add: '新增主題',
+    please_input_name: '請輸入名稱',
+    name_repeat: '名稱已存在'
  },
  tagsView: {
    refresh: '刷新',
@@ -1771,6 +1775,19 @@ export default {
    cquarter: '本季',
    cyear: '本年'
  },
+  dynamic_year: {
+    fix: '固定年份',
+    dynamic: '動態年份',
+    current: '當年',
+    last: '去年'
+  },
+  dynamic_month: {
+    fix: '固定年月',
+    dynamic: '動態年月',
+    current: '本月',
+    last: '上月',
+    firstOfYear: '當年首月'
+  },
  wizard: {
    welcome_title: '欢迎使用DataEase',
    welcome_hint: '人人可用的开源数据可视化分析工具',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -131,6 +131,7 @@ export default {
    default_login: '普通登录'
  },
  commons: {
+    apply: '应用',
    search: '搜索',
    folder: '目录',
    no_target_permission: '没有权限',
@@ -438,7 +439,10 @@ export default {
    background: '背景颜色',
    custom: '自定义颜色',
    otherSave: '主题另存为',
-    info: '主题信息'
+    info: '主题信息',
+    add: '新增主题',
+    please_input_name: '请输入名称',
+    name_repeat: '名称已存在'
  },
  tagsView: {
    refresh: '刷新',
@@ -1781,6 +1785,19 @@ export default {
    cquarter: '本季',
    cyear: '本年'
  },
+  dynamic_year: {
+    fix: '固定年份',
+    dynamic: '动态年份',
+    current: '当年',
+    last: '去年'
+  },
+  dynamic_month: {
+    fix: '固定年月',
+    dynamic: '动态年月',
+    current: '当月',
+    last: '上月',
+    firstOfYear: '当年首月'
+  },
  wizard: {
    welcome_title: '欢迎使用DataEase',
    welcome_hint: '人人可用的开源数据可视化分析工具',
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -13,11 +13,11 @@ export const DEFAULT_SIZE = {
  barDefault: true,
  barWidth: 40,
  barGap: 0.4,
-  lineWidth: 1,
+  lineWidth: 2,
  lineType: 'solid',
  lineSymbol: 'circle',
  lineSymbolSize: 4,
-  lineSmooth: false,
+  lineSmooth: true,
  lineArea: false,
  pieInnerRadius: 0,
  pieOuterRadius: 80,
--- a/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -5,7 +5,7 @@ import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 export function baseLiquid(plot, container, chart) {
  let value = 0
  const colors = []
-  let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title
+  let max, radius, bgColor, shape, labelContent, title
  if (chart.data) {
    if (chart.data.series.length > 0) {
      value = chart.data.series[0].data[0]
@@ -26,10 +26,6 @@ export function baseLiquid(plot, container, chart) {
      const size = JSON.parse(JSON.stringify(customAttr.size))
      max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax
      radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100)
-      outlineBorder = parseInt(size.liquidOutlineBorder ? size.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder)
-      outlineDistance = parseInt((size.liquidOutlineDistance || size.liquidOutlineDistance === 0) ? size.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance)
-      waveLength = parseInt(size.liquidWaveLength ? size.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength)
-      waveCount = parseInt(size.liquidWaveCount ? size.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount)
      shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape
    }
    // label
@@ -86,14 +82,6 @@ export function baseLiquid(plot, container, chart) {
    percent: (parseFloat(value) / parseFloat(max)),
    radius: radius,
    shape: shape,
-    outline: {
-      border: outlineBorder,
-      distance: outlineDistance
-    },
-    wave: {
-      length: waveLength,
-      count: waveCount
-    },
    statistic: {
      // title: title,
      content: labelContent
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -6,7 +6,7 @@
      id="label-content"
      :style="content_class"
    >
-      <span v-if="quotaShow" :style="label_class">
+      <span :style="label_class">
        <p v-for="item in chart.data.series" :key="item.name" :style="label_content_class">
          {{ item.data[0] }}
        </p>
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -17,7 +17,7 @@
          <el-form-item :label="$t('chart.text_color')" class="form-item">
            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
          </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
            </el-select>
@@ -84,27 +84,35 @@ export default {
      labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
      fontSize: [],
      isSetting: false,
-      labelPosition: [
+      labelPosition: [],
+      labelPositionPie: [
        { name: this.$t('chart.inside'), value: 'inside' },
-        { name: this.$t('chart.outside'), value: 'outside' },
-        { name: this.$t('chart.center'), value: 'center' },
-        { name: this.$t('chart.text_pos_top'), value: 'top' },
-        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
+        { name: this.$t('chart.outside'), value: 'outside' }
+      ],
+      labelPositionH: [
        { name: this.$t('chart.text_pos_left'), value: 'left' },
+        { name: this.$t('chart.center'), value: 'inside' },
        { name: this.$t('chart.text_pos_right'), value: 'right' }
      ],
+      labelPositionV: [
+        { name: this.$t('chart.text_pos_top'), value: 'top' },
+        { name: this.$t('chart.center'), value: 'inside' },
+        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
+      ],
      predefineColors: COLOR_PANEL
    }
  },
  watch: {
    'chart': {
      handler: function() {
+        this.initOptions()
        this.initData()
      }
    }
  },
  mounted() {
    this.init()
+    this.initOptions()
    this.initData()
  },
  methods: {
@@ -140,6 +148,18 @@ export default {
        this.isSetting = false
      }
      this.$emit('onLabelChange', this.labelForm)
+    },
+    initOptions() {
+      const type = this.chart.type
+      if (type) {
+        if (type.includes('horizontal') || type === 'funnel') {
+          this.labelPosition = this.labelPositionH
+        } else if (type.includes('pie')) {
+          this.labelPosition = this.labelPositionPie
+        } else {
+          this.labelPosition = this.labelPositionV
+        }
+      }
    }
  }
 }
--- a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -17,7 +17,7 @@
          <el-form-item :label="$t('chart.text_color')" class="form-item">
            <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
          </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
            </el-select>
@@ -62,29 +62,35 @@ export default {
      labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
      fontSize: [],
      isSetting: false,
-      labelPosition: [
-        { name: this.$t('chart.inside'), value: 'middle' },
-        { name: this.$t('chart.outside'), value: 'outside' },
-        { name: this.$t('chart.center'), value: 'center' },
-        { name: this.$t('chart.text_pos_top'), value: 'top' },
-        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
+      labelPosition: [],
+      labelPositionPie: [
+        { name: this.$t('chart.inside'), value: 'inner' },
+        { name: this.$t('chart.outside'), value: 'outer' }
+      ],
+      labelPositionH: [
        { name: this.$t('chart.text_pos_left'), value: 'left' },
+        { name: this.$t('chart.center'), value: 'middle' },
        { name: this.$t('chart.text_pos_right'), value: 'right' }
      ],
+      labelPositionV: [
+        { name: this.$t('chart.text_pos_top'), value: 'top' },
+        { name: this.$t('chart.center'), value: 'middle' },
+        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
+      ],
      predefineColors: COLOR_PANEL
    }
  },
  watch: {
    'chart': {
      handler: function() {
-        this.initLabelPosition()
+        this.initOptions()
        this.initData()
      }
    }
  },
  mounted() {
    this.init()
-    this.initLabelPosition()
+    this.initOptions()
    this.initData()
  },
  methods: {
@@ -121,22 +127,16 @@ export default {
      }
      this.$emit('onLabelChange', this.labelForm)
    },
-    initLabelPosition() {
-      if (this.chart && this.chart.type && this.chart.type.includes('pie')) {
-        this.labelPosition = [
-          { name: this.$t('chart.inside'), value: 'inner' },
-          { name: this.$t('chart.outside'), value: 'outer' }
-        ]
-      } else {
-        this.labelPosition = [
-          { name: this.$t('chart.inside'), value: 'middle' },
-          { name: this.$t('chart.outside'), value: 'outside' },
-          { name: this.$t('chart.center'), value: 'center' },
-          { name: this.$t('chart.text_pos_top'), value: 'top' },
-          { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
-          { name: this.$t('chart.text_pos_left'), value: 'left' },
-          { name: this.$t('chart.text_pos_right'), value: 'right' }
-        ]
+    initOptions() {
+      const type = this.chart.type
+      if (type) {
+        if (type.includes('horizontal') || type === 'funnel') {
+          this.labelPosition = this.labelPositionH
+        } else if (type.includes('pie')) {
+          this.labelPosition = this.labelPositionPie
+        } else {
+          this.labelPosition = this.labelPositionV
+        }
      }
    }
  }
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -128,9 +128,6 @@
      </el-form>

      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -125,9 +125,6 @@
      </el-form>

      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -244,18 +241,6 @@
        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
-        </el-form-item>
      </el-form>
    </el-col>
  </div>
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -196,9 +196,9 @@
                :options="chartGroupTreeAvailable"
                :normalizer="normalizer"
                :placeholder="$t('chart.select_group')"
-                :noChildrenText="$t('commons.treeselect.no_children_text')"
-                :noOptionsText="$t('commons.treeselect.no_options_text')"
-                :noResultsText="$t('commons.treeselect.no_results_text')"
+                :no-children-text="$t('commons.treeselect.no_children_text')"
+                :no-options-text="$t('commons.treeselect.no_options_text')"
+                :no-results-text="$t('commons.treeselect.no_results_text')"
              />
            </el-form-item>
          </el-col>
@@ -773,6 +773,7 @@ export default {
      view.customFilter = JSON.stringify([])
      view.drillFields = JSON.stringify([])
      view.extBubble = JSON.stringify([])
+      this.setChartDefaultOptions(view)
      const _this = this
      post('/chart/view/save', view).then(response => {
        this.closeCreateChart()
@@ -788,6 +789,33 @@ export default {
      })
    },

+    setChartDefaultOptions(view) {
+      const type = view.type
+      const attr = JSON.parse(view.customAttr)
+      if (type.includes('pie')) {
+        if (view.render === 'echarts') {
+          attr.label.position = 'inside'
+        } else {
+          attr.label.position = 'inner'
+        }
+      } else if (type.includes('line')) {
+        attr.label.position = 'top'
+      } else if (type.includes('treemap')) {
+        if (view.render === 'echarts') {
+          attr.label.position = 'inside'
+        } else {
+          attr.label.position = 'middle'
+        }
+      } else {
+        if (view.render === 'echarts') {
+          attr.label.position = 'inside'
+        } else {
+          attr.label.position = 'middle'
+        }
+      }
+      view.customAttr = JSON.stringify(attr)
+    },
+
    getTable(table) {
      this.table = JSON.parse(JSON.stringify(table))
    },
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -141,7 +141,7 @@
                                class="render-select"
                                style="width: 100px"
                                size="mini"
-                                @change="calcData(true,'chart',true,true)"
+                                @change="changeChartType()"
                              >
                                <el-option
                                  v-for="item in renderOptions"
@@ -158,7 +158,7 @@
                                v-model="view.type"
                                style="width: 100%"
                                :disabled="!hasDataPermission('manage',param.privileges)"
-                                @change="calcData(true,'chart',true,true)"
+                                @change="changeChartType()"
                              >
                                <chart-type :chart="view" style="height: 480px" />
                              </el-radio-group>
@@ -230,11 +230,11 @@
                        :options="places"
                        :placeholder="$t('chart.select_map_range')"
                        :normalizer="normalizer"
+                        :no-children-text="$t('commons.treeselect.no_children_text')"
+                        :no-options-text="$t('commons.treeselect.no_options_text')"
+                        :no-results-text="$t('commons.treeselect.no_results_text')"
                        @input="calcData"
                        @deselect="calcData"
-                        :noChildrenText="$t('commons.treeselect.no_children_text')"
-                        :noOptionsText="$t('commons.treeselect.no_options_text')"
-                        :noResultsText="$t('commons.treeselect.no_results_text')"
                      />
                    </span>
                  </el-row>
@@ -1420,6 +1420,7 @@ export default {
      const view = this.buildParam(true, 'chart', false, false)
      if (!view) return
      post('/chart/view/save', view).then(response => {
+        this.getChart(response.data.id)
        this.hasEdit = false
        this.refreshGroup(view)
        this.closeChangeChart()
@@ -2065,6 +2066,36 @@ export default {

    reset() {
      this.getData(this.param.id)
+    },
+
+    changeChartType() {
+      this.setChartDefaultOptions()
+      this.calcData(true, 'chart', true, true)
+    },
+
+    setChartDefaultOptions() {
+      const type = this.view.type
+      if (type.includes('pie')) {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'inner'
+        }
+      } else if (type.includes('line')) {
+        this.view.customAttr.label.position = 'top'
+      } else if (type.includes('treemap')) {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'middle'
+        }
+      } else {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'middle'
+        }
+      }
    }
  }
 }
--- a/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue
@@ -1,43 +1,89 @@
 <template>
-  <div v-if="element">
+  <div v-if="element" class="default-value-div">
    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">

      <el-form-item :label="$t('dynamic_time.set_default')">
        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
-          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
-          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
+
+          <el-radio
+            v-for="(item, index) in defaultSetting.radioOptions"
+            :key="index"
+            :label="item.value"
+          >
+            {{ $t(item.text) }}
+          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">

-        <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
-          <el-option :label="$t('dynamic_time.today')" :value="0" />
-          <el-option :label="$t('dynamic_time.yesterday')" :value="1" />
-          <el-option :label="$t('dynamic_time.firstOfMonth')" :value="2" />
-          <el-option :label="$t('dynamic_time.custom')" :value="3" />
+        <el-select
+          v-model="element.options.attrs.default.dkey"
+          placeholder=""
+          class="relative-time"
+          @change="dkeyChange"
+        >
+          <el-option
+            v-for="(item, index) in defaultSetting.relativeOptions"
+            :key="item.value + index"
+            :label="$t(item.text)"
+            :value="item.value"
+          />
+
        </el-select>

      </el-form-item>

      <div class="inline">

-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="">
-          <el-input v-model="element.options.attrs.default.dynamicPrefix" type="number" size="mini" :min="1" :max="10" @input="dynamicPrefixChange" />
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          label=""
+        >
+          <el-input
+            v-model="element.options.attrs.default.dynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="12"
+            @input="dynamicPrefixChange"
+          />
        </el-form-item>

-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
-          <el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
-            <el-option :label="$t('dynamic_time.date')" value="day" />
-            <el-option :label="$t('dynamic_time.week')" value="week" />
-            <el-option :label="$t('dynamic_time.month')" value="month" />
-            <el-option :label="$t('dynamic_time.year')" value="year" />
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.dynamicInfill"
+            size="mini"
+            placeholder=""
+            :disabled="defaultSetting.custom && defaultSetting.custom.unitsOptions && defaultSetting.custom.unitsOptions.length === 1"
+            @change="dynamicInfillChange"
+          >
+            <el-option
+              v-for="(item, index) in defaultSetting.custom.unitsOptions"
+              :key="item.value + index"
+              :label="$t(item.text)"
+              :value="item.value"
+            />
+
          </el-select>
        </el-form-item>

-        <el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          label=""
+          class="no-label-item"
+        >

-          <el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
+          <el-select
+            v-model="element.options.attrs.default.dynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
            <el-option :label="$t('dynamic_time.before')" value="before" />
            <el-option :label="$t('dynamic_time.after')" value="after" />
          </el-select>
@@ -48,7 +94,7 @@
      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
        <el-date-picker
          v-model="dval"
-          type="date"
+          :type="element.options.attrs.type"
          disabled
          placeholder=""
          class="relative-time"
@@ -71,7 +117,9 @@
 </template>

 <script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
 export default {
  name: 'DeDateDefault',
  props: {
@@ -86,6 +134,13 @@ export default {
      dval: null
    }
  },
+  computed: {
+    defaultSetting() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      const setting = widget.defaultSetting()
+      return setting
+    }
+  },
  created() {
    this.setDval()
  },
@@ -117,17 +172,27 @@ export default {
    }
  }
 }
+
 </script>

 <style lang="scss" scoped>
-.inline {
-  display: flex;
-  >>>.el-input--mini {
-      min-width: 70px;
+  .inline {
+    display: flex;
+
+  }
+
+  .inline {
+    .el-form-item {
+      margin-bottom: 5px !important;
+
+      .el-form-item__content>.el-input--mini {
+        min-width: 70px;
+      }
+    }
+  }
+
+  .relative-time {
+    width: 100% !important;
  }
-}
-.relative-time {
-    width: 100%;
-}

 </style>
--- a/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
+++ b/frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue
@@ -223,21 +223,20 @@ export default {
  .inline-first,
  .inline {
    display: flex;
-
-    >>>.el-input--mini {
-      min-width: 70px;
-    }
-
  }

  .inline-first {
    .el-form-item {
      margin-bottom: 5px !important;
+
+      .el-form-item__content>.el-input--mini {
+        min-width: 70px;
+      }
    }
  }

  .relative-time {
-    width: 100%;
+    width: 100% !important;
  }

 </style>
--- a/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
@@ -3,11 +3,11 @@
    <el-col :span="24">
      <div class="filter-content">
        <el-card
-          v-if="element.serviceName && element.serviceName !== 'timeDateWidget' && element.serviceName !== 'timeDateRangeWidget'"
+          v-if="element.component && element.component !== 'de-date'"
          class="box-card"
        >
          <div style="margin-bottom: 10px;">
-            <span>默认值设置</span>
+            <span>{{ $t('dynamic_time.set_default') }}</span>
          </div>
          <div class="custom-component-class">
            <component
@@ -22,13 +22,13 @@

        </el-card>

-        <el-card v-if="element.serviceName && element.serviceName === 'timeDateWidget'" class="box-card">
-          <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
+        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName !== 'timeDateRangeWidget'" class="box-card">
+          <de-date-default v-if="element.component === 'de-date' && element.serviceName !== 'timeDateRangeWidget'" :element="element" />
        </el-card>

-        <el-card v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
+        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
          <de-date-range-default
-            v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'"
+            v-if="element.component === 'de-date' && element.serviceName === 'timeDateRangeWidget'"
            :element="element"
          />
        </el-card>
@@ -78,6 +78,8 @@ export default {
  .box-card {
    width: 100%;
    height: 100%;
+    max-height: 100%;
+    overflow-y: scroll;
  }

 </style>