From 7f9f2cfa4471e09b6df423a3623d8c9714d1fa56 Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Mon, 17 Mar 2025 16:41:53 +0800
Subject: [PATCH 1/5] =?UTF-8?q?-[=E5=85=B3=E8=81=94]=20#[1375481348194304]?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1375481348194304?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/statement/widgetconfigs/index.js   |   1 +
 .../others/autoexec-widget-config.vue         |  87 ++++++++++
 .../statement/widgets/define/autoexec.js      |  16 ++
 .../pages/report/statement/widgets/index.js   |   1 +
 .../widgets/others/autoexec-widget.vue        | 163 ++++++++++++++++++
 .../report/statement/widgets/widget-list.js   |   4 +-
 6 files changed, 271 insertions(+), 1 deletion(-)
 create mode 100644 src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
 create mode 100644 src/views/pages/report/statement/widgets/define/autoexec.js
 create mode 100644 src/views/pages/report/statement/widgets/others/autoexec-widget.vue

diff --git a/src/views/pages/report/statement/widgetconfigs/index.js b/src/views/pages/report/statement/widgetconfigs/index.js
index 2ac94919..d47dfe3a 100644
--- a/src/views/pages/report/statement/widgetconfigs/index.js
+++ b/src/views/pages/report/statement/widgetconfigs/index.js
@@ -26,3 +26,4 @@ export { default as wordcloudWidgetConfig } from './others/wordcloud-widget-conf
 export { default as pointWidgetConfig } from './others/point-widget-config.vue';
 export { default as customWidgetConfig } from './others/custom-widget-config.vue';
 export { default as timeWidgetConfig } from './others/time-widget-config.vue';
+export { default as autoexecWidgetConfig } from './others/autoexec-widget-config.vue';
diff --git a/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
new file mode 100644
index 00000000..95d2c2aa
--- /dev/null
+++ b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">{{ $t('page.fontsize') }}</label>
+      <div class="ivu-form-item-content">
+        <TsFormSelect
+          :value="config.fontsize"
+          :dataList="dataList"
+          transfer
+          border="border"
+          @on-change="val => {
+            setConfigValue('fontsize', val);
+          }"
+        ></TsFormSelect>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">{{ $t('page.fontcolor') }}</label>
+      <div class="ivu-form-item-content">
+        <ColorPicker
+          :value="config.fontcolor"
+          :transfer="true"
+          recommend
+          format="hex"
+          class="colorPicker"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="val => {
+            setConfigValue('fontcolor', val);
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+  },
+  props: {
+    config: { type: Object }
+  },
+  data() {
+    return {
+      dataList: [
+        {
+          text: '小（12像素)',
+          value: 12
+        },
+        {
+          text: '中（16像素）',
+          value: 16
+        },
+        {
+          text: '大（20像素）',
+          value: 20
+        }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {
+  },
+  watch: {
+  }
+};
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/pages/report/statement/widgets/define/autoexec.js b/src/views/pages/report/statement/widgets/define/autoexec.js
new file mode 100644
index 00000000..da930c67
--- /dev/null
+++ b/src/views/pages/report/statement/widgets/define/autoexec.js
@@ -0,0 +1,16 @@
+import { $t } from '@/resources/init.js';
+
+export default {
+  name: 'autoexec',
+  label: $t('page.autoexec'),
+  type: 'autoexec',
+  icon: 'tsfont-zidonghua',
+  widgetType: 'other',
+  hasCustomConfig: true,
+  width: 500,
+  height: 300,
+  padding: 5,
+  needData: true,
+  dataTypes: [{ value: 'dynamic', text: $t('term.report.datatype.dynamicdata') }], 
+  config: { backgroundColor: '', backgroundImage: '', fontsize: 13, color: '' }
+};
diff --git a/src/views/pages/report/statement/widgets/index.js b/src/views/pages/report/statement/widgets/index.js
index 2a70be22..f25de6d7 100644
--- a/src/views/pages/report/statement/widgets/index.js
+++ b/src/views/pages/report/statement/widgets/index.js
@@ -29,3 +29,4 @@ export { default as mapareawidget } from './geography/maparea-widget.vue';
 export { default as districtwidget } from './geography/district-widget.vue';
 export { default as pointwidget } from './others/point-widget.vue';
 export { default as timewidget } from './others/time-widget.vue';
+export { default as autoexecwidget } from './others/autoexec-widget.vue';
diff --git a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
new file mode 100644
index 00000000..8fb9957c
--- /dev/null
+++ b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :style="getTimeStyle">
+    <div class="progress flex-start align-center">
+      <div class="pr-xs">总进度</div>
+      <div style="flex: 1; width: 80%;">
+        <Progress
+          :percent="45"
+          :stroke-width="strokeWidth"
+          status="active"
+          text-inside
+        /></div>
+    </div>
+    <div v-if="dataList && dataList.length>0" class="job-detail">
+      <div
+        v-for="(item,index) in dataList"
+        :key="index"
+        class="item-list border-color"
+      >
+        <div
+          v-for="(litem,lindex) in item.children"
+          :key="lindex"
+          class="step-content"
+        >
+          <div class="step-node border-base radius-sm" :title="litem.name">
+            <span>{{ litem.name }}</span>
+          </div>
+        </div>
+        <span v-if="index < dataList.length-1" class="step_a tsfont-arrow-down text-success"></span>
+      </div>
+    </div>
+    <div class="action-group no-line">
+      <span class="block-item">
+        <span class="color-tip bg-gray"></span>
+        <span class="fz10">未开始</span></span>
+      <span class="block-item">
+        <span class="color-tip bg-info"></span>
+        <span class="fz10">进行中</span>
+      </span>
+      <span class="block-item">
+        <span class="color-tip bg-warning"></span>
+        <span class="fz10">已禁用</span>
+      </span>
+      <span class="block-item">
+        <span class="color-tip bg-error"></span>
+        <span class="fz10">失败</span>
+      </span>
+      <span class="block-item">
+        <span class="color-tip bg-success"></span>
+        <span class="fz10">成功</span>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { WidgetBase } from '../widget-base.js';
+import * as themes from '../../widgetthemes/index.js';
+export default {
+  name: '',
+  components: {},
+  extends: WidgetBase,
+  props: {
+  },
+  data() {
+    return {
+      strokeWidthMap: {
+        13: 10,
+        16: 14,
+        20: 18
+      },
+      dataList: [
+        {
+          children: [
+            {name: '步骤一', status: 'success'},
+            {name: '步骤二', status: 'success'},
+            {name: '步骤三', status: 'success'},
+            {name: '步骤四', status: 'success'}
+          ]
+        },
+        {
+          children: [
+            {name: '步骤一', status: 'success'},
+            {name: '步骤二', status: 'success'},
+            {name: '步骤三', status: 'success'},
+            {name: '步骤四', status: 'success'}
+          ]
+        }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+  
+  },
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {
+
+  },
+  destroyed() {},
+  methods: {
+    
+  },
+  filter: {},
+  computed: {
+    getTimeStyle() {
+      return {
+        fontSize: this.widget && this.widget.config && this.widget.config.fontsize ? `${this.widget.config.fontsize}px` : '13px',
+        color: this.canvas.config.theme && themes[this.canvas.config.theme] && themes[this.canvas.config.theme].labels && themes[this.canvas.config.theme].labels.fillColorDark
+      };
+    },
+    strokeWidth() {
+      return this.widget && this.widget.config && this.widget.config.fontsize ? this.strokeWidthMap[this.widget.config.fontsize] : 10; 
+    }
+  },
+  watch: {
+  }
+};
+</script>
+<style lang="less" scoped>
+.progress {
+  margin-bottom: 30px;
+}
+.color-tip {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  margin-right: 4px;
+}
+.job-detail{
+  width: 100%;
+  margin: 0 auto;
+}
+.item-list {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 30px;
+  .step-content {
+    position: relative;
+    display: inline-block;
+    width: 20%;
+    padding: 0 10px;
+    .step-node {
+      text-align: center;
+      line-height: 69px;
+      width: 100%;
+      height: 69px;
+      display: inline-block;
+    }
+  }
+}
+.step_a {
+  position: absolute;
+  left: 49%;
+  transform: translateY(-49%);
+  top: 85px;
+}
+</style>
diff --git a/src/views/pages/report/statement/widgets/widget-list.js b/src/views/pages/report/statement/widgets/widget-list.js
index 119a6d74..ea89bb85 100644
--- a/src/views/pages/report/statement/widgets/widget-list.js
+++ b/src/views/pages/report/statement/widgets/widget-list.js
@@ -37,6 +37,7 @@ import { default as heatmap } from './define/heatmap.js';
 import { default as wordcloud } from './define/wordcloud.js';
 import { default as columnline } from './define/columnline.js';
 import { default as time } from './define/time.js';
+import { default as autoexec } from './define/autoexec.js';
 
 export const WIDGETS = [
   text,
@@ -69,5 +70,6 @@ export const WIDGETS = [
   heatmap,
   wordcloud,
   columnline,
-  time
+  time,
+  autoexec
 ];
-- 
Gitee


From c99f2cd6c45c3e828cb41bc455b2a81c526824a3 Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Fri, 28 Mar 2025 10:44:48 +0800
Subject: [PATCH 2/5] =?UTF-8?q?[=E5=85=B3=E8=81=94]=20#[1375481348194304]?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1375481348194304?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customtemplate/customtemplate-viewer.vue  |  372 ++---
 .../original/columnline-widget-config.vue     |  214 ++-
 .../statement/statement-layout-edit.vue       |  265 ++--
 .../widgetborderconfigs/gradient-config.vue   |  113 ++
 .../statement/widgetborderconfigs/index.js    |    9 +-
 .../statement/widgetborders/border-list.js    |   78 +-
 .../statement/widgetborders/gradient.vue      |  200 +++
 .../report/statement/widgetborders/index.js   |    8 +-
 .../original/bar-widget-config.vue            |  448 +++---
 .../original/bullet-widget-config.vue         |  366 +++--
 .../original/column-widget-config.vue         |  415 ++---
 .../original/columnline-widget-config.vue     |  248 +--
 .../original/groupedcolumn-widget-config.vue  |  430 +++---
 .../original/line-widget-config.vue           |  427 ++---
 .../original/mline-widget-config.vue          |  532 +++----
 .../original/pie-widget-config.vue            |  338 ++--
 .../original/stackedbar-widget-config.vue     |  396 ++---
 .../original/stackedcolumn-widget-config.vue  |  468 +++---
 .../others/autoexec-widget-config.vue         |  160 +-
 .../others/time-widget-config.vue             |  157 +-
 .../report/statement/widgets/define/pie.js    |   77 +-
 .../widgets/others/autoexec-widget.vue        |  438 ++++--
 .../report/statement/widgets/widget-base.js   |  353 ++---
 .../statement/widgets/widget-handler.vue      |  920 +++++------
 .../report/statement/widgetthemes/dark.json   |   13 +-
 .../statement/widgetthemes/theme-dark1.json   | 1376 ++++++++---------
 .../statement/widgetthemes/theme-dark2.json   | 1376 ++++++++---------
 .../statement/widgetthemes/theme-dark3.json   | 1376 ++++++++---------
 .../statement/widgetthemes/theme-dark4.json   | 1376 ++++++++---------
 29 files changed, 6649 insertions(+), 6300 deletions(-)
 create mode 100644 src/views/pages/report/statement/widgetborderconfigs/gradient-config.vue
 create mode 100644 src/views/pages/report/statement/widgetborders/gradient.vue

diff --git a/src/resources/components/customtemplate/customtemplate-viewer.vue b/src/resources/components/customtemplate/customtemplate-viewer.vue
index 25c8b336..f16607e3 100644
--- a/src/resources/components/customtemplate/customtemplate-viewer.vue
+++ b/src/resources/components/customtemplate/customtemplate-viewer.vue
@@ -1,185 +1,187 @@
-<template>
-  <div>
-    <div v-if="!error" id="div">
-      <CustomtemplateViewer v-if="isReady"></CustomtemplateViewer>
-    </div>
-    <div v-else>{{ error }}</div>
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-import ViewUI from 'neatlogic-ui/iview/index.js';
-import TsFormInput from '@/resources/plugins/TsForm/TsFormInput';
-import TsFormCheckbox from '@/resources/plugins/TsForm/TsFormCheckbox';
-import TsFormRadio from '@/resources/plugins/TsForm/TsFormRadio';
-import TsFormSelect from '@/resources/plugins/TsForm/TsFormSelect';
-import TsFormSwitch from '@/resources/plugins/TsForm/TsFormSwitch';
-import TsTable from '@/resources/components/TsTable/TsTable.vue';
-import TsFormDatePicker from '@/resources/plugins/TsForm/TsFormDatePicker';
-import NoData from '@/resources/components/nodata/NoData.js';
-export default {
-  name: '',
-  components: {},
-  props: {
-    fileList: {type: Array, default: null}, //资源列表，包含附件id和附件名称
-    config: { type: [Object, String] }, //对应vue组件的配置信息
-    template: { type: String }, //模板内容
-    data: { type: [Object, Array] }, //数据
-    id: { type: Number }
-  },
-  data() {
-    return {
-      isReady: false,
-      error: null,
-      templateData: {}
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.init();
-  },
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    async init() {
-      this.templateData.components = {
-        ViewUI,
-        TsFormInput,
-        TsFormCheckbox,
-        TsFormRadio,
-        TsFormSelect,
-        TsFormSwitch,
-        TsFormDatePicker,
-        TsTable,
-        NoData
-      };
-      let data = {};
-      if (this.data) {
-        if (!(this.data instanceof Array)) {
-          Object.keys(this.data).forEach(key => {
-            data[key] = this.data[key];
-          });
-        } else {
-          console.log(JSON.stringify(this.data, null, 2));
-        }
-      }
-      if (this.id) {
-        await this.$api.autoexec.customtemplate.getCustomTemplateById(this.id).then(res => {
-          const customTemplateData = res.Return;
-          if (customTemplateData.template) {
-            this.templateData.template = customTemplateData.template;
-          }
-
-          if (customTemplateData.config) {
-            try {
-              // eslint-disable-next-line no-eval
-              const config = eval('(' + customTemplateData.config + ')');
-              if (config.data && typeof config.data == 'function') {
-                let configData = config.data();
-                Object.keys(configData).forEach(key => {
-                  if (!data.hasOwnProperty(key)) {
-                    data[key] = configData[key];
-                  }
-                });
-              }
-              if (config.methods) {
-                this.templateData.methods = {};
-                for (let name in config.methods) {
-                  this.templateData.methods[name] = config.methods[name];
-                }
-              }
-              if (config.computed) {
-                this.templateData.computed = {};
-                for (let name in config.computed) {
-                  this.templateData.computed[name] = config.computed[name];
-                }
-              }
-            } catch (e) {
-              console.error(e);
-            }
-          }
-        });
-      } else {
-        this.templateData.template = this.template;
-        if (this.config) {
-          let config = this.config;
-          if (typeof config == 'string') {
-          // eslint-disable-next-line no-eval
-            config = eval('(' + config + ')');
-          }
-          if (config.data && typeof config.data == 'function') {
-            let configData = config.data();
-            Object.keys(configData).forEach(key => {
-              if (!data.hasOwnProperty(key)) {
-                data[key] = configData[key];
-              }
-            });
-          }
-          if (config.methods) {
-            this.templateData.methods = {};
-            for (let name in config.methods) {
-              this.templateData.methods[name] = config.methods[name];
-            }
-          }
-          if (config.computed) {
-            this.templateData.computed = {};
-            for (let name in config.computed) {
-              this.templateData.computed[name] = config.computed[name];
-            }
-          }
-        }
-      }
-      if (this.templateData.template) {
-        //替换资源文件路径
-        await this.convertFilePath();
-        try {
-          //new Vue()没有定义$t,导致翻译报错
-          // const component = new Vue(this.templateData);
-          // component.$mount('#div');
-
-          Vue.component('CustomtemplateViewer', {
-            data() {
-              return data;
-            },
-            ...this.templateData
-          });
-          this.isReady = true;
-        } catch (e) {
-          console.error(e);
-          this.error = this.$t('message.report.widgetcreatefail');
-        }
-      } else {
-        this.error = this.$t('message.report.definetemplate');
-      }
-    },
-    async convertFilePath() {
-      if (this.fileList && this.fileList.length > 0 && this.templateData.template && this.templateData.template.includes('{file:')) {
-        const fileMap = {};
-        this.fileList.forEach(file => {
-          fileMap[file.name] = file.id;
-        });
-        this.templateData.template = this.templateData.template.replace(/\{file:([^\}]+?)\}/g, (m, g1) => {
-          return BASEURLPREFIX + '/api/binary/file/download?id=' + fileMap[g1];
-        });
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {
-    data: {
-      handler: function(val) {
-        this.isReady = false;
-        this.init();
-      },
-      deep: true
-    }
-  }
-};
-</script>
+<template>
+  <div>
+    <div v-if="!error" id="div">
+      <div :is="'CustomtemplateViewer'+ uuid" v-if="isReady"></div>
+      <!-- <CustomtemplateViewer v-if="isReady"></CustomtemplateViewer> -->
+    </div>
+    <div v-else>{{ error }}</div>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import ViewUI from 'neatlogic-ui/iview/index.js';
+import TsFormInput from '@/resources/plugins/TsForm/TsFormInput';
+import TsFormCheckbox from '@/resources/plugins/TsForm/TsFormCheckbox';
+import TsFormRadio from '@/resources/plugins/TsForm/TsFormRadio';
+import TsFormSelect from '@/resources/plugins/TsForm/TsFormSelect';
+import TsFormSwitch from '@/resources/plugins/TsForm/TsFormSwitch';
+import TsTable from '@/resources/components/TsTable/TsTable.vue';
+import TsFormDatePicker from '@/resources/plugins/TsForm/TsFormDatePicker';
+import NoData from '@/resources/components/nodata/NoData.js';
+export default {
+  name: '',
+  components: {},
+  props: {
+    fileList: {type: Array, default: null}, //资源列表，包含附件id和附件名称
+    config: { type: [Object, String] }, //对应vue组件的配置信息
+    template: { type: String }, //模板内容
+    data: { type: [Object, Array] }, //数据
+    id: { type: Number }
+  },
+  data() {
+    return {
+      uuid: this.$utils.setUuid(),
+      isReady: false,
+      error: null,
+      templateData: {}
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.init();
+  },
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    async init() {
+      this.templateData.components = {
+        ViewUI,
+        TsFormInput,
+        TsFormCheckbox,
+        TsFormRadio,
+        TsFormSelect,
+        TsFormSwitch,
+        TsFormDatePicker,
+        TsTable,
+        NoData
+      };
+      let data = {};
+      if (this.data) {
+        if (!(this.data instanceof Array)) {
+          Object.keys(this.data).forEach(key => {
+            data[key] = this.data[key];
+          });
+        } else {
+          console.log(JSON.stringify(this.data, null, 2));
+        }
+      }
+      if (this.id) {
+        await this.$api.autoexec.customtemplate.getCustomTemplateById(this.id).then(res => {
+          const customTemplateData = res.Return;
+          if (customTemplateData.template) {
+            this.templateData.template = customTemplateData.template;
+          }
+
+          if (customTemplateData.config) {
+            try {
+              // eslint-disable-next-line no-eval
+              const config = eval('(' + customTemplateData.config + ')');
+              if (config.data && typeof config.data == 'function') {
+                let configData = config.data();
+                Object.keys(configData).forEach(key => {
+                  if (!data.hasOwnProperty(key)) {
+                    data[key] = configData[key];
+                  }
+                });
+              }
+              if (config.methods) {
+                this.templateData.methods = {};
+                for (let name in config.methods) {
+                  this.templateData.methods[name] = config.methods[name];
+                }
+              }
+              if (config.computed) {
+                this.templateData.computed = {};
+                for (let name in config.computed) {
+                  this.templateData.computed[name] = config.computed[name];
+                }
+              }
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        });
+      } else {
+        this.templateData.template = this.template;
+        if (this.config) {
+          let config = this.config;
+          if (typeof config == 'string') {
+          // eslint-disable-next-line no-eval
+            config = eval('(' + config + ')');
+          }
+          if (config.data && typeof config.data == 'function') {
+            let configData = config.data();
+            Object.keys(configData).forEach(key => {
+              if (!data.hasOwnProperty(key)) {
+                data[key] = configData[key];
+              }
+            });
+          }
+          if (config.methods) {
+            this.templateData.methods = {};
+            for (let name in config.methods) {
+              this.templateData.methods[name] = config.methods[name];
+            }
+          }
+          if (config.computed) {
+            this.templateData.computed = {};
+            for (let name in config.computed) {
+              this.templateData.computed[name] = config.computed[name];
+            }
+          }
+        }
+      }
+      if (this.templateData.template) {
+        //替换资源文件路径
+        await this.convertFilePath();
+        try {
+          //new Vue()没有定义$t,导致翻译报错
+          // const component = new Vue(this.templateData);
+          // component.$mount('#div');
+          //增加uuid,防止组件名称重复导致之前的模板被替换
+          Vue.component('CustomtemplateViewer' + this.uuid, {
+            data() {
+              return data;
+            },
+            ...this.templateData
+          });
+          this.isReady = true;
+        } catch (e) {
+          console.error(e);
+          this.error = this.$t('message.report.widgetcreatefail');
+        }
+      } else {
+        this.error = this.$t('message.report.definetemplate');
+      }
+    },
+    async convertFilePath() {
+      if (this.fileList && this.fileList.length > 0 && this.templateData.template && this.templateData.template.includes('{file:')) {
+        const fileMap = {};
+        this.fileList.forEach(file => {
+          fileMap[file.name] = file.id;
+        });
+        this.templateData.template = this.templateData.template.replace(/\{file:([^\}]+?)\}/g, (m, g1) => {
+          return BASEURLPREFIX + '/api/binary/file/download?id=' + fileMap[g1];
+        });
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {
+    data: {
+      handler: function(val) {
+        this.isReady = false;
+        this.init();
+      },
+      deep: true
+    }
+  }
+};
+</script>
diff --git a/src/views/pages/dashboard/widget/configs/original/columnline-widget-config.vue b/src/views/pages/dashboard/widget/configs/original/columnline-widget-config.vue
index 08b9507e..1eae1bd9 100644
--- a/src/views/pages/dashboard/widget/configs/original/columnline-widget-config.vue
+++ b/src/views/pages/dashboard/widget/configs/original/columnline-widget-config.vue
@@ -1,114 +1,100 @@
-<template>
-  <div class="pb-nm">
-    <TsFormItem :label="$t('term.report.axis.showlegend')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.legend.visible"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('legend.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.legendposition')" labelPosition="top">
-      <TsFormSelect
-        :value="config.legend.position"
-        :transfer="true"
-        :clearable="false"
-        :dataList="positionList"
-        border="border"
-        @change="
-          val => {
-            setConfigValue('legend.position', val);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config?.geometryOptions[0]?.label?.style?.fill || ''"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            if(!config.geometryOptions[1].label.style){
-              $set(config.geometryOptions[1].label, 'style', {});
-            }
-            $set(config.geometryOptions[1].label.style, 'fill', val)
-          }
-        "
-      />
-    </TsFormItem>
-  </div>
-</template>
-<script>
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      axisFontSizeList: [
-        {
-          text: '小',
-          value: 12
-        },
-        {
-          text: '中',
-          value: 16
-        },
-        {
-          text: '大',
-          value: 20
-        }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {
-
-  }
-};
-</script>
-<style lang="less"></style>
+<template>
+  <div class="pb-nm">
+    <TsFormItem :label="$t('term.report.axis.showlegend')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.legend.visible"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('legend.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.legendposition')" labelPosition="top">
+      <TsFormSelect
+        :value="config.legend.position"
+        :transfer="true"
+        :clearable="false"
+        :dataList="positionList"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('legend.position', val);
+          }
+        "
+      ></TsFormSelect>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config?.geometryOptions[0]?.label?.style?.fill || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            if(!config.geometryOptions[1].label.style){
+              $set(config.geometryOptions[1].label, 'style', {});
+            }
+            $set(config.geometryOptions[1].label.style, 'fill', val)
+          }
+        "
+      />
+    </TsFormItem>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+  },
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {
+
+  }
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/pages/report/statement/statement-layout-edit.vue b/src/views/pages/report/statement/statement-layout-edit.vue
index 660142a1..da2e1b43 100644
--- a/src/views/pages/report/statement/statement-layout-edit.vue
+++ b/src/views/pages/report/statement/statement-layout-edit.vue
@@ -1,132 +1,133 @@
-<template>
-  <div>
-    <TsForm
-      ref="layoutForm"
-      v-model="currentWidget"
-      :item-list="layoutFormConfig"
-      labelPosition="top"
-    >
-      <template v-slot:padding>
-        <div class="pl-md pr-md">
-          <Slider
-            v-model="currentWidget.padding"
-            :min="0"
-            :max="50"
-            :step="1"
-            show-tip="never"
-          ></Slider>
-        </div>
-      </template>
-      <template v-slot:borderConfig>
-        <BorderConfig
-          v-if="getBorderComponentByName(currentWidget.border)"
-          :config="getCurrentWidgetBorderConfig()"
-          :type="currentWidget.border"
-          @setConfig="setBorderConfig"
-        ></BorderConfig>
-      </template>
-    </TsForm>
-  </div>
-</template>
-<script>
-import { BORDER_LIST } from './widgetborders/border-list.js';
-
-export default {
-  name: '',
-  components: {
-    TsForm: () => import('@/resources/plugins/TsForm/TsForm'),
-    BorderConfig: () => import('./widgetborderconfigs/widget-border-config.vue')
-  },
-  props: {
-    currentWidget: {type: Object},
-    currentWidgetComponent: {type: Object}
-  },
-  data() {
-    return {
-      layoutFormConfig: {
-        x: {
-          type: 'number',
-          label: this.$t('term.report.axis.xcoordinate'),
-          onChange: val => {
-            this.$set(this.currentWidget, 'x', val);
-          }
-        },
-        y: {
-          type: 'number',
-          label: this.$t('term.report.axis.ycoordinate'),
-          onChange: val => {
-            this.$set(this.currentWidget, 'y', val);
-          }
-        },
-        width: {
-          type: 'number',
-          label: this.$t('page.width'),
-          onChange: val => {
-            this.$set(this.currentWidget, 'width', val);
-          }
-        },
-        height: {
-          type: 'number',
-          label: this.$t('page.height'),
-          onChange: val => {
-            this.$set(this.currentWidget, 'height', val);
-          }
-        },
-        padding: {
-          type: 'slot',
-          label: this.$t('page.margin'),
-          onChange: val => {
-            this.$set(this.currentWidget, 'padding', val);
-          }
-        },
-        border: {
-          type: 'select',
-          label: this.$t('page.border'),
-          transfer: true,
-          valueName: 'name',
-          textName: 'label',
-          dataList: BORDER_LIST,
-          onChange: val => {
-            this.$set(this.currentWidget, 'border', val);
-          }
-        },
-        borderConfig: {
-          type: 'slot',
-          hideLabel: true
-        }
-      }
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    getCurrentWidgetBorderConfig() {
-      if (this.currentWidget.border && !this.currentWidget.borderConfig) {
-        this.$set(this.currentWidget, 'borderConfig', this.getBorderComponentByName(this.currentWidget.border).config);
-      }
-      return this.currentWidget.borderConfig;
-    },
-    getBorderComponentByName(borderName) {
-      return BORDER_LIST.find(d => d.name === borderName);
-    },
-    setBorderConfig(config) {
-      if (this.currentWidget) {
-        Object.assign(this.currentWidget.borderConfig, config);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less">
-</style>
+<template>
+  <div>
+    <TsForm
+      ref="layoutForm"
+      v-model="currentWidget"
+      :item-list="layoutFormConfig"
+      labelPosition="top"
+    >
+      <template v-slot:padding>
+        <div class="pl-md pr-md">
+          <Slider
+            v-model="currentWidget.padding"
+            :min="0"
+            :max="50"
+            :step="1"
+            show-tip="never"
+          ></Slider>
+        </div>
+      </template>
+      <template v-slot:borderConfig>
+        <BorderConfig
+          v-if="getBorderComponentByName(currentWidget.border)"
+          :config="getCurrentWidgetBorderConfig()"
+          :type="currentWidget.border"
+          @setConfig="setBorderConfig"
+        ></BorderConfig>
+      </template>
+    </TsForm>
+  </div>
+</template>
+<script>
+import { BORDER_LIST } from './widgetborders/border-list.js';
+
+export default {
+  name: '',
+  components: {
+    TsForm: () => import('@/resources/plugins/TsForm/TsForm'),
+    BorderConfig: () => import('./widgetborderconfigs/widget-border-config.vue')
+  },
+  props: {
+    currentWidget: {type: Object},
+    currentWidgetComponent: {type: Object}
+  },
+  data() {
+    return {
+      layoutFormConfig: {
+        x: {
+          type: 'number',
+          label: this.$t('term.report.axis.xcoordinate'),
+          onChange: val => {
+            this.$set(this.currentWidget, 'x', val);
+          }
+        },
+        y: {
+          type: 'number',
+          label: this.$t('term.report.axis.ycoordinate'),
+          onChange: val => {
+            this.$set(this.currentWidget, 'y', val);
+          }
+        },
+        width: {
+          type: 'number',
+          label: this.$t('page.width'),
+          onChange: val => {
+            this.$set(this.currentWidget, 'width', val);
+          }
+        },
+        height: {
+          type: 'number',
+          label: this.$t('page.height'),
+          onChange: val => {
+            this.$set(this.currentWidget, 'height', val);
+          }
+        },
+        padding: {
+          type: 'slot',
+          label: this.$t('page.margin'),
+          onChange: val => {
+            this.$set(this.currentWidget, 'padding', val);
+          }
+        },
+        border: {
+          type: 'select',
+          label: this.$t('page.border'),
+          transfer: true,
+          valueName: 'name',
+          textName: 'label',
+          dataList: BORDER_LIST,
+          onChange: (val, item, selectObj) => {
+            this.$set(this.currentWidget, 'border', val);
+            this.$set(this.currentWidget, 'borderConfig', selectObj && selectObj.config);
+          }
+        },
+        borderConfig: {
+          type: 'slot',
+          hideLabel: true
+        }
+      }
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    getCurrentWidgetBorderConfig() {
+      if (this.currentWidget.border && !this.currentWidget.borderConfig) {
+        this.$set(this.currentWidget, 'borderConfig', this.getBorderComponentByName(this.currentWidget.border).config);
+      }
+      return this.currentWidget.borderConfig;
+    },
+    getBorderComponentByName(borderName) {
+      return BORDER_LIST.find(d => d.name === borderName);
+    },
+    setBorderConfig(config) {
+      if (this.currentWidget) {
+        Object.assign(this.currentWidget.borderConfig, config);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/pages/report/statement/widgetborderconfigs/gradient-config.vue b/src/views/pages/report/statement/widgetborderconfigs/gradient-config.vue
new file mode 100644
index 00000000..b666c08c
--- /dev/null
+++ b/src/views/pages/report/statement/widgetborderconfigs/gradient-config.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <TsFormItem label="标题" labelPosition="top">
+      <TsFormInput
+        :value="config.title"
+        @on-change="
+          val => {
+            setConfigValue('title', val);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="标题颜色" labelPosition="top">
+      <div>
+        <ColorPicker
+          :transfer="true"
+          :value="config.titlecolor"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('titlecolor', val);
+            }
+          "
+        />
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('page.fontsize')" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.titlefontsize"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('titlefontsize', val);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.mainbordercolor')" labelPosition="top">
+      <div>
+        <ColorPicker
+          :transfer="true"
+          :value="config.color"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('color', val);
+            }
+          "
+        />
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.subbordercolor')" labelPosition="top">
+      <div>
+        <ColorPicker
+          :transfer="true"
+          alpha
+          :value="config.cocolor"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('cocolor', val);
+            }
+          "
+        />
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  props: {
+    config: { type: Object }
+  },
+  data() {
+    return {
+      myConfig: {
+        borderwidth: 1
+      }
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/pages/report/statement/widgetborderconfigs/index.js b/src/views/pages/report/statement/widgetborderconfigs/index.js
index 3e2ef04f..84e0b849 100644
--- a/src/views/pages/report/statement/widgetborderconfigs/index.js
+++ b/src/views/pages/report/statement/widgetborderconfigs/index.js
@@ -1,4 +1,5 @@
-export { default as highlight_config } from './highlight-config.vue';
-export { default as twocolor_config } from './twocolor-config.vue';
-export { default as rainbow_config } from './rainbow-config.vue';
-
+export { default as highlight_config } from './highlight-config.vue';
+export { default as twocolor_config } from './twocolor-config.vue';
+export { default as rainbow_config } from './rainbow-config.vue';
+export { default as gradient_config } from './gradient-config.vue';
+
diff --git a/src/views/pages/report/statement/widgetborders/border-list.js b/src/views/pages/report/statement/widgetborders/border-list.js
index 11c5bb46..a1ec82cc 100644
--- a/src/views/pages/report/statement/widgetborders/border-list.js
+++ b/src/views/pages/report/statement/widgetborders/border-list.js
@@ -1,33 +1,45 @@
-import {$t} from '@/resources/init.js';
-
-export const BORDER_LIST = [
-  {
-    name: 'highlight',
-    label: $t('term.report.highlightborder'),
-    config: {
-      cornersize: 8,
-      width: 2,
-      color: '#02a6b5',
-      cocolor: 'rgba(255,255,255,0.2)'
-    }
-  },
-  {
-    name: 'twocolor',
-    label: $t('term.report.doublecoloroverlap'),
-    config: {
-      delay: 4,
-      width: 10,
-      offset: 10,
-      coloralpha: '#93e1d8',
-      colorbeta: '#aa4465'
-    }
-  },
-  {
-    name: 'rainbow',
-    label: $t('term.report.rainbowfluorescence'),
-    config: {
-      delay: 20,
-      width: 0
-    }
-  }
-];
+import {$t} from '@/resources/init.js';
+
+export const BORDER_LIST = [
+  {
+    name: 'highlight',
+    label: $t('term.report.highlightborder'),
+    config: {
+      cornersize: 8,
+      width: 2,
+      color: '#02a6b5',
+      cocolor: 'rgba(255,255,255,0.2)'
+    }
+  },
+  {
+    name: 'twocolor',
+    label: $t('term.report.doublecoloroverlap'),
+    config: {
+      delay: 4,
+      width: 10,
+      offset: 10,
+      coloralpha: '#93e1d8',
+      colorbeta: '#aa4465'
+    }
+  },
+  {
+    name: 'rainbow',
+    label: $t('term.report.rainbowfluorescence'),
+    config: {
+      delay: 20,
+      width: 0
+    }
+  },
+  {
+    name: 'gradient',
+    label: '梯形边框',
+    config: {
+      titlefontsize: 13,
+      titlecolor: '#02a6b5',
+      cornersize: 8,
+      width: 2,
+      color: '#02a6b5',
+      cocolor: 'rgba(229,229,229,0.2)'
+    }
+  }
+];
diff --git a/src/views/pages/report/statement/widgetborders/gradient.vue b/src/views/pages/report/statement/widgetborders/gradient.vue
new file mode 100644
index 00000000..943d86fa
--- /dev/null
+++ b/src/views/pages/report/statement/widgetborders/gradient.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="gradient" :style="style">
+    <div v-if="config.title" class="title" :style="titleStyle">{{ config.title }}</div>
+    <div class="gradient-top">
+      <div class="lborder" :style="style"></div>
+      <div class="tborder" :style="style"></div>
+      <div class="tborder-top" :style="style"></div>
+      <div class="border-box" :style="style">
+        <div class="bordertop" :style="style"></div>
+        <div class="borderright" :style="style"></div>
+      </div>
+    </div>
+    <div class="gradient-corner-top-right" :style="style"></div>
+    <div class="gradient-corner-bottom-left" :style="style"></div>
+    <div class="gradient-corner-bottom-right" :style="style"></div>
+    <div class="gradient-top-bottom" :style="tbStyle"></div>
+    <div class="gradient-left-right" :style="lrStyle"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {},
+  props: {
+    config: { type: Object }
+  },
+  data() {
+    return {};
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {},
+  filter: {},
+  computed: {
+    style() {
+      return {
+        '--width': this.config.width + 'px',
+        '--offset': -this.config.width + 'px',
+        '--offset-top': -this.config.width + 22 + 'px',
+        '--color': this.config.color,
+        '--cocolor': this.config.cocolor,
+        '--cornersize': this.config.cornersize + 'px'
+      };
+    },
+    tbStyle() {
+      return {
+        '--border-width': this.config.width + 'px',
+        '--width': 'calc(100% - ' + 2 * (this.config.cornersize - this.config.width) + 'px)',
+        '--height': 'calc(100% + ' + (2 * this.config.width - 21) + 'px)',
+        '--offset-left': this.config.cornersize - this.config.width + 'px',
+        '--offset-top': -this.config.width + 22 + 'px',
+        '--color': this.config.cocolor,
+        '--cornersize': this.config.cornersize + 'px'
+      };
+    },
+    lrStyle() {
+      return {
+        '--border-width': this.config.width + 'px',
+        '--height': 'calc(100% - ' + (2 * (this.config.cornersize - this.config.width) + 8) + 'px)',
+        '--width': 'calc(100% + ' + 2 * this.config.width + 'px)',
+        '--offset-top': this.config.cornersize - this.config.width + 16 + 'px',
+        '--offset-left': -this.config.width + 'px',
+        '--color': this.config.cocolor,
+        '--cornersize': this.config.cornersize + 'px'
+      };
+    },
+    titleStyle() {
+      return {
+        '--color': this.config.titlecolor,
+        '--font-size': this.config.titlefontsize + 'px'
+      };
+    }
+  },
+  watch: {}
+};
+</script>
+<style lang="less" scoped>
+.title {
+  position: absolute;
+  z-index: 2;
+  left: 20px;
+  font-weight: bold;
+  color: var(--color);
+  font-size: var(--font-size);
+}
+.gradient-top {
+  width: 100%;
+  position: absolute;
+  left: -2px;
+  .lborder{
+    height: 31px;
+    width: var(--width);
+    background: var(--cocolor);
+    transform: rotate(33deg);
+    position: absolute;
+    top: -6px;
+    left: 9px; 
+  }
+  .tborder{
+    width: 214px;
+    height: var(--width);
+    background: var(--cocolor);
+    position: absolute;
+    z-index: 1;
+    left: 18px;
+    top: -5px;
+  }
+  .tborder-top{
+    width: calc(100% - 268px);
+    height:  var(--width);
+    background: var(--cocolor);
+    position: absolute;
+    right: 0px;
+    top: 21px;
+  }
+  .border-box{
+    display: block;
+    position: absolute;
+    width: 250px;
+    height: 0px;
+    left: 1px;
+    top: -5px;
+    z-index: 1;
+    .bordertop{
+      position: absolute;
+      width: 40px;
+      top: -1px;
+      right: -1px;
+      border-top: 2px solid var(--color);
+    }
+    .borderright{
+      position: absolute;
+      height: 32px;
+      top: -3px;
+      right: -11px;
+      border-right: 2px solid var(--color);
+      transform: rotate(149deg);
+    }
+  }
+}
+.gradient-corner-top-left,
+.gradient-corner-top-right,
+.gradient-corner-bottom-left,
+.gradient-corner-bottom-right {
+  width: var(--cornersize);
+  height: var(--cornersize);
+  position: absolute;
+}
+.gradient-corner-top-left {
+  top: var(--offset);
+  left: var(--offset);
+  border-top: var(--width) solid var(--color);
+  border-left: var(--width) solid var(--color);
+}
+.gradient-corner-top-right {
+  top: var(--offset-top);
+  right: var(--offset);
+  border-top: var(--width) solid var(--color);
+  border-right: var(--width) solid var(--color);
+}
+.gradient-corner-bottom-left {
+  bottom: var(--offset);
+  left: var(--offset);
+  border-bottom: var(--width) solid var(--color);
+  border-left: var(--width) solid var(--color);
+}
+.gradient-corner-bottom-right {
+  bottom: var(--offset);
+  right: var(--offset);
+  border-bottom: var(--width) solid var(--color);
+  border-right: var(--width) solid var(--color);
+}
+
+.gradient-top-bottom {
+  position: absolute;
+  width: var(--width);
+  height: var(--height);
+  left: var(--offset-left);
+  top: var(--offset-top);
+  border-bottom: var(--border-width) solid var(--color);
+}
+
+.gradient-left-right {
+  position: absolute;
+  width: var(--width);
+  height: var(--height);
+  left: var(--offset-left);
+  top: var(--offset-top);
+  border-left: var(--border-width) solid var(--color);
+  border-right: var(--border-width) solid var(--color);
+}
+</style>
diff --git a/src/views/pages/report/statement/widgetborders/index.js b/src/views/pages/report/statement/widgetborders/index.js
index 62c89b8d..0826172a 100644
--- a/src/views/pages/report/statement/widgetborders/index.js
+++ b/src/views/pages/report/statement/widgetborders/index.js
@@ -1,3 +1,5 @@
-export { default as highlight_border } from './highlight.vue';
-export { default as twocolor_border } from './twocolor.vue';
-export { default as rainbow_border } from './rainbow.vue';
+export { default as highlight_border } from './highlight.vue';
+export { default as twocolor_border } from './twocolor.vue';
+export { default as rainbow_border } from './rainbow.vue';
+export { default as gradient_border } from './gradient.vue';
+
diff --git a/src/views/pages/report/statement/widgetconfigs/original/bar-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/bar-widget-config.vue
index a7d88200..35e81730 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/bar-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/bar-widget-config.vue
@@ -1,235 +1,213 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.yAxis?true:false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('yAxis', {
-                  label: {
-                    autoHide: true,
-                    autoEllipsis: true
-                  },
-                  title: { text: '' }
-                });
-              } else {
-                setConfigValue('yAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.yAxis.title && config.yAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('yAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.xAxis?true:false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('xAxis', { title: { text: '' } });
-              } else {
-                setConfigValue('xAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.xAxis.title && config.xAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('xAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.columnwidth') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <Slider
-            :value="config.barWidthRatio"
-            :min="0.1"
-            :max="0.9"
-            :step="0.1"
-            show-tip="never"
-            @on-change="
-              val => {
-                setConfigValue('barWidthRatio', val);
-              }
-            "
-          ></Slider>
-        </div>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.color"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="val => {
-          setConfigValue('color', val);
-        }"
-      />
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.label && config.label.style && config.label.style.fill"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.position', 'right');
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config.xAxis?.hasOwnProperty('grid')?!!config.xAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('xAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner') },
-        { value: 'outer', text: this.$t('term.report.positions.outer') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-  },
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less" scoped></style>
+<template>
+  <div class="pb-nm">
+    <TsFormItem :label="$t('term.report.axis.yaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.yAxis?true:false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('yAxis', {
+                label: {
+                  autoHide: true,
+                  autoEllipsis: true
+                },
+                title: { text: '' }
+              });
+            } else {
+              setConfigValue('yAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.yaxistitle')" labelPosition="top">
+      <TsFormInput
+        :value="config.yAxis.title && config.yAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('yAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label=" $t('term.report.axis.xaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.xAxis?true:false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('xAxis', { title: { text: '' } });
+            } else {
+              setConfigValue('xAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.xaxistitle') " labelPosition="top">
+      <TsFormInput
+        :value="config.xAxis.title && config.xAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('xAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.columnwidth')" labelPosition="top">
+      <div class="pl-md pr-md">
+        <Slider
+          :value="config.barWidthRatio"
+          :min="0.1"
+          :max="0.9"
+          :step="0.1"
+          show-tip="never"
+          @on-change="
+            val => {
+              setConfigValue('barWidthRatio', val);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.color"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="val => {
+          setConfigValue('color', val);
+        }"
+      />
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.position', 'right');
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val|| 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config.xAxis?.hasOwnProperty('grid')?!!config.xAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('xAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner') },
+        { value: 'outer', text: this.$t('term.report.positions.outer') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+  },
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/bullet-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/bullet-widget-config.vue
index 54fbcb87..0b66d561 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/bullet-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/bullet-widget-config.vue
@@ -1,191 +1,175 @@
-<template>
-  <div>
-    <TsFormItem :label="$t('page.layout')" labelPosition="top">
-      <TsFormRadio
-        v-model="config.layout"
-        :dataList="layoutList"
-        @on-change="val=>{
-          setConfigValue('layout', val);
-        }"
-      ></TsFormRadio>
-    </TsFormItem>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('term.report.axis.yaxisshow') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.yAxis ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('yAxis', {
-                  label: {
-                    autoHide: true,
-                    autoEllipsis: true
-                  },
-                  title: { text: '' }
-                });
-              } else {
-                setConfigValue('yAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('term.report.axis.yaxistitle') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.yAxis.title && config.yAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('yAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('term.report.axis.xaxisshow') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.xAxis ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('xAxis', { title: { text: '' } });
-              } else {
-                setConfigValue('xAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('term.report.axis.xaxistitle') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.xAxis.title && config.xAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('xAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('term.report.customcolor') }}</label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <div class="text-grey">{{ $t('page.background') }}</div>
-          <ColorPicker
-            :value="config.color && config.color.range"
-            :transfer="true"
-            alpha
-            recommend
-            class="colorPicker"
-            transfer-class-name="color-picker-transfer-class"
-            @on-change="
-              val => {
-                setConfigValue('color.range', val);
-              }
-            "
-          />
-          <div class="text-grey">{{ $t('term.dashboard.frontend') }}</div>
-          <ColorPicker
-            :value="config.color && config.color.measure"
-            :transfer="true"
-            alpha
-            recommend
-            class="colorPicker"
-            transfer-class-name="color-picker-transfer-class"
-            @on-change="
-              val => {
-                setConfigValue('color.measure', val);
-              }
-            "
-          />
-          <div class="text-grey">{{ $t('term.dashboard.target') }}</div>
-          <ColorPicker
-            :value="config.color && config.color.target"
-            :transfer="true"
-            alpha
-            recommend
-            class="colorPicker"
-            transfer-class-name="color-picker-transfer-class"
-            @on-change="
-              val => {
-                setConfigValue('color.target', val);
-              }
-            "
-          />
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormRadio: () => import('@/resources/plugins/TsForm/TsFormRadio'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
-  },
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner') },
-        { value: 'outer', text: this.$t('term.report.positions.outer') }
-      ],
-      layoutList: [{value: 'horizontal', text: '水平'}, {value: 'vertical', text: '垂直'}]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less" scoped></style>
+<template>
+  <div>
+    <TsFormItem :label="$t('page.layout')" labelPosition="top">
+      <TsFormRadio
+        v-model="config.layout"
+        :dataList="layoutList"
+        @on-change="val=>{
+          setConfigValue('layout', val);
+        }"
+      ></TsFormRadio>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.yaxisshow') " labelPosition="top">
+      <TsFormSwitch
+        :value="config.yAxis ? true : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('yAxis', {
+                label: {
+                  autoHide: true,
+                  autoEllipsis: true
+                },
+                title: { text: '' }
+              });
+            } else {
+              setConfigValue('yAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem v-if="config.yAxis" :label="$t('term.report.axis.yaxistitle') " labelPosition="top">
+      <TsFormInput
+        :value="config.yAxis.title && config.yAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('yAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.xaxisshow') " labelPosition="top">
+      <TsFormSwitch
+        :value="config.xAxis ? true : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('xAxis', { title: { text: '' } });
+            } else {
+              setConfigValue('xAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem v-if="config.xAxis" :label="$t('term.report.axis.xaxistitle') " labelPosition="top">
+      <TsFormInput
+        :value="config.xAxis.title && config.xAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('xAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.customcolor') " labelPosition="top">
+      <div class="pl-md pr-md">
+        <div class="text-grey">{{ $t('page.background') }}</div>
+        <ColorPicker
+          :value="config.color && config.color.range"
+          :transfer="true"
+          alpha
+          recommend
+          class="colorPicker"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('color.range', val);
+            }
+          "
+        />
+        <div class="text-grey">{{ $t('term.dashboard.frontend') }}</div>
+        <ColorPicker
+          :value="config.color && config.color.measure"
+          :transfer="true"
+          alpha
+          recommend
+          class="colorPicker"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('color.measure', val);
+            }
+          "
+        />
+        <div class="text-grey">{{ $t('term.dashboard.target') }}</div>
+        <ColorPicker
+          :value="config.color && config.color.target"
+          :transfer="true"
+          alpha
+          recommend
+          class="colorPicker"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="
+            val => {
+              setConfigValue('color.target', val);
+            }
+          "
+        />
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormRadio: () => import('@/resources/plugins/TsForm/TsFormRadio'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner') },
+        { value: 'outer', text: this.$t('term.report.positions.outer') }
+      ],
+      layoutList: [{value: 'horizontal', text: '水平'}, {value: 'vertical', text: '垂直'}]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/column-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/column-widget-config.vue
index 496cda2f..0fdd5409 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/column-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/column-widget-config.vue
@@ -1,206 +1,209 @@
-<template>
-  <div class="pb-nm">
-    <TsFormItem :label="$t('term.report.axis.yaxisshow')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.yAxis?.hasOwnProperty('visible')?config.yAxis.visible:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.yaxistitle')" labelPosition="top">
-      <TsFormInput
-        :value="config.yAxis.title && config.yAxis.title.text"
-        border="border"
-        @change="
-          val => {
-            setConfigValue('yAxis.title.text', val);
-          }
-        "
-      ></TsFormInput>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.xaxisshow')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.xAxis ? true : false"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            if (val) {
-              setConfigValue('xAxis', {
-                label: {
-                  autoHide: true,
-                  autoEllipsis: true
-                },
-                title: { text: '' }
-              });
-            } else {
-              setConfigValue('xAxis', val);
-            }
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.xaxistitle')" labelPosition="top">
-      <TsFormInput
-        :value="config.xAxis.title && config.xAxis.title.text"
-        border="border"
-        @change="
-          val => {
-            setConfigValue('xAxis.title.text', val);
-          }
-        "
-      ></TsFormInput>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.columnwidth')" labelPosition="top">
-      <div class="pl-md">
-        <Slider
-          :value="config.columnWidthRatio"
-          :min="0.1"
-          :max="0.9"
-          :step="0.1"
-          show-tip="never"
-          @on-change="
-            val => {
-              setConfigValue('columnWidthRatio', val);
-            }
-          "
-        ></Slider>
-      </div>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.color"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('color', val);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.label && config.label.style && config.label.style.fill"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner') },
-        { value: 'outer', text: this.$t('term.report.positions.outer') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less" scoped></style>
+<template>
+  <div class="pb-nm">
+    <TsFormItem :label="$t('term.report.axis.yaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.yAxis?.hasOwnProperty('visible')?config.yAxis.visible:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.yaxistitle')" labelPosition="top">
+      <TsFormInput
+        :value="config.yAxis.title && config.yAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('yAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.xaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.xAxis ? true : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('xAxis', {
+                label: {
+                  autoHide: true,
+                  autoEllipsis: true
+                },
+                title: { text: '' }
+              });
+            } else {
+              setConfigValue('xAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.xaxistitle')" labelPosition="top">
+      <TsFormInput
+        :value="config.xAxis.title && config.xAxis.title.text"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('xAxis.title.text', val);
+          }
+        "
+      ></TsFormInput>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.columnwidth')" labelPosition="top">
+      <div class="pl-md">
+        <Slider
+          :value="config.columnWidthRatio"
+          :min="0.1"
+          :max="0.9"
+          :step="0.1"
+          show-tip="never"
+          @on-change="
+            val => {
+              setConfigValue('columnWidthRatio', val);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.color"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('color', val);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner') },
+        { value: 'outer', text: this.$t('term.report.positions.outer') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/columnline-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/columnline-widget-config.vue
index a6ff65f3..b4b62672 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/columnline-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/columnline-widget-config.vue
@@ -1,123 +1,125 @@
-<template>
-  <div class="pb-nm">
-    <TsFormItem :label="$t('term.report.axis.showlegend')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.legend.visible"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('legend.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.legendposition')" labelPosition="top">
-      <TsFormSelect
-        :value="config.legend.position"
-        :transfer="true"
-        :clearable="false"
-        :dataList="positionList"
-        border="border"
-        @change="
-          val => {
-            setConfigValue('legend.position', val);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config?.geometryOptions[0]?.label?.style?.fill || ''"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            if(!config.geometryOptions[1].label.style){
-              $set(config.geometryOptions[1].label, 'style', {});
-            }
-            $set(config.geometryOptions[1].label.style, 'fill', val || defaultSizeColor)
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            if(!config.geometryOptions[0].label.style){
-              $set(config.geometryOptions[0].label, 'style', {});
-            }
-            if(!config.geometryOptions[1].label.style){
-              $set(config.geometryOptions[1].label, 'style', {});
-            }
-            $set(config.geometryOptions[0].label.style, 'fontSize', val || 12);
-            $set(config.geometryOptions[1].label.style, 'fontSize', val || 12)
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-    // TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {
-
-  }
-};
-</script>
-<style lang="less"></style>
+<template>
+  <div class="pb-nm">
+    <TsFormItem :label="$t('term.report.axis.showlegend')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.legend.visible"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('legend.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.legendposition')" labelPosition="top">
+      <TsFormSelect
+        :value="config.legend.position"
+        :transfer="true"
+        :clearable="false"
+        :dataList="positionList"
+        border="border"
+        @change="
+          val => {
+            setConfigValue('legend.position', val);
+          }
+        "
+      ></TsFormSelect>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config?.geometryOptions[0]?.label?.style?.fill || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            if(!config.geometryOptions[1].label.style){
+              $set(config.geometryOptions[1].label, 'style', {});
+            }
+            $set(config.geometryOptions[1].label.style, 'fill', val || defaultSizeColor)
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              if(!config.geometryOptions[0].label.style){
+                $set(config.geometryOptions[0].label, 'style', {});
+              }
+              if(!config.geometryOptions[1].label.style){
+                $set(config.geometryOptions[1].label, 'style', {});
+              }
+              $set(config.geometryOptions[0].label.style, 'fontSize', val || 12);
+              $set(config.geometryOptions[1].label.style, 'fontSize', val || 12)
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+    // TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {
+
+  }
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/groupedcolumn-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/groupedcolumn-widget-config.vue
index c91fd3ec..ab02f4ab 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/groupedcolumn-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/groupedcolumn-widget-config.vue
@@ -1,213 +1,217 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.showlegend') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.legend.visible"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('legend.visible', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendposition') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.legend.position"
-          :transfer="true"
-          :clearable="false"
-          :dataList="positionList"
-          @change="
-            val => {
-              setConfigValue('legend.position', val);
-            }
-          "
-        ></TsFormSelect>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.axis.yaxisshow')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.yAxis?.hasOwnProperty('visible')?config.yAxis.visible:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.axis.xaxisshow')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.xAxis ? true : false"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            if (val) {
-              setConfigValue('xAxis', {
-                title: { text: '' }
-              });
-            } else {
-              setConfigValue('xAxis', val);
-            }
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.columnwidth') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <Slider
-            :value="config.columnWidthRatio"
-            :min="0.1"
-            :max="0.9"
-            :step="0.1"
-            show-tip="never"
-            @on-change="
-              val => {
-                setConfigValue('columnWidthRatio', val);
-              }
-            "
-          ></Slider>
-        </div>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.showdata')" labelPosition="top">
-      <TsFormSwitch
-        :value="config.label ? true : false"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            if (val) {
-              setConfigValue('label', {
-                position: 'middle',
-                content: item => {
-                  return item.yField && Math.floor(item.yField * 100) / 100;
-                }
-              });
-            } else {
-              setConfigValue('label', val);
-            }
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            if(typeof config.yAxis ==='boolean'){
-              setConfigValue('yAxis', {});
-            }
-            setConfigValue('yAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-    //TsFormRadio:()=>import('@/resources/plugins/TsForm/TsFormRadio'),
-    //TsFormInput:()=>import('@/resources/plugins/TsForm/TsFormInput')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {
-
-  }
-};
-</script>
-<style lang="less"></style>
+<template>
+  <div class="pb-nm">
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.showlegend') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.legend.visible"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('legend.visible', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.legendposition') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSelect
+          :value="config.legend.position"
+          :transfer="true"
+          :clearable="false"
+          :dataList="positionList"
+          @change="
+            val => {
+              setConfigValue('legend.position', val);
+            }
+          "
+        ></TsFormSelect>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.axis.yaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.yAxis?.hasOwnProperty('visible')?config.yAxis.visible:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.xaxisshow')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.xAxis ? true : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('xAxis', {
+                title: { text: '' }
+              });
+            } else {
+              setConfigValue('xAxis', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.columnwidth') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <div class="pl-md pr-md">
+          <Slider
+            :value="config.columnWidthRatio"
+            :min="0.1"
+            :max="0.9"
+            :step="0.1"
+            show-tip="never"
+            @on-change="
+              val => {
+                setConfigValue('columnWidthRatio', val);
+              }
+            "
+          ></Slider>
+        </div>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.showdata')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.label ? true : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if (val) {
+              setConfigValue('label', {
+                position: 'middle',
+                content: item => {
+                  return item.yField && Math.floor(item.yField * 100) / 100;
+                }
+              });
+            } else {
+              setConfigValue('label', val);
+            }
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            if(typeof config.yAxis ==='boolean'){
+              setConfigValue('yAxis', {});
+            }
+            setConfigValue('yAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+    //TsFormRadio:()=>import('@/resources/plugins/TsForm/TsFormRadio'),
+    //TsFormInput:()=>import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {
+
+  }
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/line-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/line-widget-config.vue
index 42403655..11921154 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/line-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/line-widget-config.vue
@@ -1,212 +1,215 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.yAxis ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('yAxis', { title: { text: '' } });
-              } else {
-                setConfigValue('yAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.yAxis.title && config.yAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('yAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.xAxis ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('xAxis', {
-                  label: {
-                    autoHide: true,
-                    autoEllipsis: true
-                  },
-                  title: { text: '' }
-                });
-              } else {
-                setConfigValue('xAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.xAxis.title && config.xAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('xAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.smoothcurve') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.smooth"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('smooth', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.color"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('color', val);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.label && config.label.style && config.label.style.fill"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {};
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less" scoped></style>
+<template>
+  <div class="pb-nm">
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.yaxisshow') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.yAxis ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('yAxis', { title: { text: '' } });
+              } else {
+                setConfigValue('yAxis', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.yaxistitle') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormInput
+          :value="config.yAxis.title && config.yAxis.title.text"
+          border="border"
+          @change="
+            val => {
+              setConfigValue('yAxis.title.text', val);
+            }
+          "
+        ></TsFormInput>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.xaxisshow') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.xAxis ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('xAxis', {
+                  label: {
+                    autoHide: true,
+                    autoEllipsis: true
+                  },
+                  title: { text: '' }
+                });
+              } else {
+                setConfigValue('xAxis', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.xaxistitle') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormInput
+          :value="config.xAxis.title && config.xAxis.title.text"
+          border="border"
+          @change="
+            val => {
+              setConfigValue('xAxis.title.text', val);
+            }
+          "
+        ></TsFormInput>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.smoothcurve') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.smooth"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('smooth', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.color"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('color', val);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {};
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/mline-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/mline-widget-config.vue
index c21b7c5f..8aa13ef6 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/mline-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/mline-widget-config.vue
@@ -1,264 +1,268 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.showlegend') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.legend.visible"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('legend.visible', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendposition') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.legend.position"
-          :transfer="true"
-          :clearable="false"
-          :dataList="positionList"
-          @change="
-            val => {
-              setConfigValue('legend.position', val);
-            }
-          "
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.yAxis?true:false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('yAxis', { title: { text: '' } });
-              } else {
-                setConfigValue('yAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.yaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.yAxis.title && config.yAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('yAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxisshow') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.xAxis?true:false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('xAxis', {
-                  label: {
-                    autoHide: true,
-                    autoEllipsis: true
-                  },
-                  title: { text: '' }
-                });
-              } else {
-                setConfigValue('xAxis', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.xaxistitle') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormInput
-          :value="config.xAxis.title && config.xAxis.title.text"
-          border="border"
-          @change="
-            val => {
-              setConfigValue('xAxis.title.text', val);
-            }
-          "
-        ></TsFormInput>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.smoothcurve') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.smooth"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('smooth', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.showdata')" labelPosition="top">
-      <TsFormSwitch
-        :value="config?.label?.hasOwnProperty('visible') ? config.label.visible : false"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('label.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.label && config.label.style && config.label.style.fill || ''"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect'),
-    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {
-
-  },
-  watch: {
-
-  }
-};
-</script>
-<style lang="less" scoped>
-</style>
+<template>
+  <div class="pb-nm">
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.showlegend') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.legend.visible"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('legend.visible', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.legendposition') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSelect
+          :value="config.legend.position"
+          :transfer="true"
+          :clearable="false"
+          :dataList="positionList"
+          @change="
+            val => {
+              setConfigValue('legend.position', val);
+            }
+          "
+        ></TsFormSelect>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.yaxisshow') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.yAxis?true:false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('yAxis', { title: { text: '' } });
+              } else {
+                setConfigValue('yAxis', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.yAxis" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.yaxistitle') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormInput
+          :value="config.yAxis.title && config.yAxis.title.text"
+          border="border"
+          @change="
+            val => {
+              setConfigValue('yAxis.title.text', val);
+            }
+          "
+        ></TsFormInput>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.xaxisshow') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.xAxis?true:false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('xAxis', {
+                  label: {
+                    autoHide: true,
+                    autoEllipsis: true
+                  },
+                  title: { text: '' }
+                });
+              } else {
+                setConfigValue('xAxis', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.xAxis" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.xaxistitle') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormInput
+          :value="config.xAxis.title && config.xAxis.title.text"
+          border="border"
+          @change="
+            val => {
+              setConfigValue('xAxis.title.text', val);
+            }
+          "
+        ></TsFormInput>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.smoothcurve') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.smooth"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('smooth', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.showdata')" labelPosition="top">
+      <TsFormSwitch
+        :value="config?.label?.hasOwnProperty('visible') ? config.label.visible : false"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('label.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect'),
+    TsFormInput: () => import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {
+
+  },
+  watch: {
+
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/pie-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/pie-widget-config.vue
index 5a2e2916..daa00cb5 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/pie-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/pie-widget-config.vue
@@ -1,183 +1,155 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.innerradius') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <Slider
-            :value="config.innerRadius"
-            :min="0"
-            :max="0.9"
-            :step="0.1"
-            show-tip="never"
-            @on-change="val => {
-              setConfigValue('innerRadius', val);
-            }"
-          ></Slider>
-        </div>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.showlegend') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.legend.visible"
-          :true-value="true"
-          :false-value="false"
-          @change="val => {
-            setConfigValue('legend.visible', val);
-          }"
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendlayout') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormRadio
-          :value="config.legend.layout"
-          :dataList="layoutList"
-          @change="val => {
-            setConfigValue('legend.layout', val);
-          }"
-        ></TsFormRadio>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendposition') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.legend.position"
-          :transfer="true"
-          :clearable="false"
-          :dataList="positionList"
-          @change="val => {
-            setConfigValue('legend.position', val);
-          }"
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.datalayout') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormRadio
-          :value="config.label.type"
-          :dataList="labelTypeList"
-          @change="val => {
-            setConfigValue('label.type', val);
-          }"
-        ></TsFormRadio>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.statisticcolor') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <ColorPicker
-            :value="config.label && config.label.style && config.label.style.fill || ''"
-            :transfer="true"
-            alpha
-            recommend
-            class="colorPicker"
-            transfer-class-name="color-picker-transfer-class"
-            @on-change="
-              val => {
-                setConfigValue('label.style.fill', val || 12);
-              }
-            "
-          />
-        </div>
-      </div>
-    </div>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect'),
-    TsFormRadio: () => import('@/resources/plugins/TsForm/TsFormRadio')
-    //TsFormInput:()=>import('@/resources/plugins/TsForm/TsFormInput')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      layoutList: [
-        { value: 'horizontal', text: this.$t('term.report.horizontallayout') },
-        { value: 'vertical', text: this.$t('term.report.verticallayout') }
-      ],
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner')},
-        { value: 'outer', text: this.$t('term.report.positions.outer')},
-        { value: 'spider', text: this.$t('term.report.positions.spider') }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {
-  }
-};
-</script>
-<style lang="less" scoped>
-</style>
+<template>
+  <div class="pb-nm">
+    <TsFormItem :label="$t('term.report.innerradius')" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.innerRadius"
+          :min="0"
+          :max="0.9"
+          :step="0.1"
+          show-tip="never"
+          @on-change="val => {
+            setConfigValue('innerRadius', val);
+          }"
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.showlegend')" labelPosition="top">
+      <TsFormSwitch
+        :value="config.legend.visible"
+        :true-value="true"
+        :false-value="false"
+        @change="val => {
+          setConfigValue('legend.visible', val);
+        }"
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.legendlayout')" labelPosition="top">
+      <TsFormRadio
+        :value="config.legend.layout"
+        :dataList="layoutList"
+        @change="val => {
+          setConfigValue('legend.layout', val);
+        }"
+      ></TsFormRadio>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.axis.legendposition')" labelPosition="top">
+      <TsFormSelect
+        :value="config.legend.position"
+        :transfer="true"
+        :clearable="false"
+        :dataList="positionList"
+        @change="val => {
+          setConfigValue('legend.position', val);
+        }"
+      ></TsFormSelect>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.datalayout')" labelPosition="top">
+      <TsFormRadio
+        :value="config.label.type"
+        :dataList="labelTypeList"
+        @change="val => {
+          setConfigValue('label.type', val);
+        }"
+      ></TsFormRadio>
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+            setConfigValue('statistic.title.style.color', val);
+            setConfigValue('statistic.content.style.color', val);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val|| 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect'),
+    TsFormRadio: () => import('@/resources/plugins/TsForm/TsFormRadio')
+    //TsFormInput:()=>import('@/resources/plugins/TsForm/TsFormInput')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      layoutList: [
+        { value: 'horizontal', text: this.$t('term.report.horizontallayout') },
+        { value: 'vertical', text: this.$t('term.report.verticallayout') }
+      ],
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner')},
+        { value: 'outer', text: this.$t('term.report.positions.outer')},
+        { value: 'spider', text: this.$t('term.report.positions.spider') }
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/stackedbar-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/stackedbar-widget-config.vue
index 1efd0620..ed2a6b4c 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/stackedbar-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/stackedbar-widget-config.vue
@@ -1,196 +1,200 @@
-<template>
-  <div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.percentmode') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.isPercent ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('isPercent', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.showlegend') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.legend.visible"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('legend.visible', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendposition') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.legend.position"
-          :transfer="true"
-          :clearable="false"
-          :dataList="positionList"
-          @change="
-            val => {
-              setConfigValue('legend.position', val);
-            }
-          "
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.showdata') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.label ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('label', {
-                  position: 'middle',
-                  content: item => {
-                    return item.xField && Math.floor(item.xField * 100) / 100;
-                  }
-                });
-              } else {
-                setConfigValue('label', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.label && config.label.style && config.label.style.fill || ''"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config.xAxis?.hasOwnProperty('grid')?!!config.xAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('xAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner')},
-        { value: 'outer', text: this.$t('term.report.positions.outer')}
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less"></style>
+<template>
+  <div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.percentmode') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.isPercent ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('isPercent', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.showlegend') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.legend.visible"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('legend.visible', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.legendposition') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSelect
+          :value="config.legend.position"
+          :transfer="true"
+          :clearable="false"
+          :dataList="positionList"
+          @change="
+            val => {
+              setConfigValue('legend.position', val);
+            }
+          "
+        ></TsFormSelect>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.showdata') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.label ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('label', {
+                  position: 'middle',
+                  content: item => {
+                    return item.xField && Math.floor(item.xField * 100) / 100;
+                  }
+                });
+              } else {
+                setConfigValue('label', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.label && config.label.style && config.label.style.fill || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config.xAxis?.hasOwnProperty('grid')?!!config.xAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('xAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner')},
+        { value: 'outer', text: this.$t('term.report.positions.outer')}
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/original/stackedcolumn-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/original/stackedcolumn-widget-config.vue
index ad6af7f3..616687fc 100644
--- a/src/views/pages/report/statement/widgetconfigs/original/stackedcolumn-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/original/stackedcolumn-widget-config.vue
@@ -1,232 +1,236 @@
-<template>
-  <div class="pb-nm">
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.percentmode') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.isPercent ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('isPercent', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.showlegend') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.legend.visible"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              setConfigValue('legend.visible', val);
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.legendposition') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.legend.position"
-          :transfer="true"
-          :clearable="false"
-          :dataList="positionList"
-          @change="
-            val => {
-              setConfigValue('legend.position', val);
-            }
-          "
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.showdata') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <TsFormSwitch
-          :value="config.label ? true : false"
-          :true-value="true"
-          :false-value="false"
-          @change="
-            val => {
-              if (val) {
-                setConfigValue('label', {
-                  position: 'middle',
-                  content: item => {
-                    return item.yField && Math.floor(item.yField * 100) / 100;
-                  }
-                });
-              } else {
-                setConfigValue('label', val);
-              }
-            }
-          "
-        ></TsFormSwitch>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">
-        {{ $t('term.report.axis.columnwidth') }}
-      </label>
-      <div class="ivu-form-item-content">
-        <div class="pl-md pr-md">
-          <Slider
-            :value="config.columnWidthRatio"
-            :min="0.1"
-            :max="0.9"
-            :step="0.1"
-            show-tip="never"
-            @on-change="
-              val => {
-                setConfigValue('columnWidthRatio', val);
-              }
-            "
-          ></Slider>
-        </div>
-      </div>
-    </div>
-    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
-      <ColorPicker
-        :value="config.color"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('color', val);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
-      <ColorPicker
-        :value="(config.label && config.label.style && config.label.style.fill) || ''"
-        :transfer="true"
-        alpha
-        recommend
-        class="colorPicker"
-        transfer-class-name="color-picker-transfer-class"
-        @on-change="
-          val => {
-            setConfigValue('label.style.fill', val || defaultSizeColor);
-          }
-        "
-      />
-    </TsFormItem>
-    <TsFormItem label="统计数据字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.labelFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('labelFontSize', val || 12);
-            setConfigValue('label.style.fontSize', val || 12);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-    <TsFormItem label="辅助线" labelPosition="top">
-      <TsFormSwitch
-        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
-        :true-value="true"
-        :false-value="false"
-        @change="
-          val => {
-            setConfigValue('yAxis.grid.visible', val);
-          }
-        "
-      ></TsFormSwitch>
-    </TsFormItem>
-    <TsFormItem label="坐标轴字体大小" labelPosition="top">
-      <TsFormSelect
-        :value="config.axisFontSize || 12"
-        :dataList="axisFontSizeList"
-        border="border"
-        transfer
-        @change="
-          val => {
-            setConfigValue('axisFontSize', val || defaultFontSize);
-            setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
-            setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
-            setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
-          }
-        "
-      ></TsFormSelect>
-    </TsFormItem>
-  </div>
-</template>
-<script>
-import { WidgetBaseConfig } from './base-config.js';
-export default {
-  name: '',
-  components: {
-    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
-    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  extends: WidgetBaseConfig,
-  props: { config: { type: Object } },
-  data() {
-    return {
-      positionList: [
-        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
-        { value: 'top', text: this.$t('term.report.positions.top') },
-        { value: 'top-right', text: this.$t('term.report.positions.topright') },
-        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
-        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
-        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
-        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
-        { value: 'left', text: this.$t('term.report.positions.left') },
-        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
-        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
-        { value: 'right', text: this.$t('term.report.positions.right') },
-        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
-      ],
-      labelTypeList: [
-        { value: 'inner', text: this.$t('term.report.positions.inner')},
-        { value: 'outer', text: this.$t('term.report.positions.outer')}
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {},
-  watch: {}
-};
-</script>
-<style lang="less"></style>
+<template>
+  <div class="pb-nm">
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.percentmode') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.isPercent ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('isPercent', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.showlegend') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.legend.visible"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              setConfigValue('legend.visible', val);
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div v-if="config.legend.visible" class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.legendposition') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSelect
+          :value="config.legend.position"
+          :transfer="true"
+          :clearable="false"
+          :dataList="positionList"
+          @change="
+            val => {
+              setConfigValue('legend.position', val);
+            }
+          "
+        ></TsFormSelect>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.showdata') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <TsFormSwitch
+          :value="config.label ? true : false"
+          :true-value="true"
+          :false-value="false"
+          @change="
+            val => {
+              if (val) {
+                setConfigValue('label', {
+                  position: 'middle',
+                  content: item => {
+                    return item.yField && Math.floor(item.yField * 100) / 100;
+                  }
+                });
+              } else {
+                setConfigValue('label', val);
+              }
+            }
+          "
+        ></TsFormSwitch>
+      </div>
+    </div>
+    <div class="ivu-form-item tsform-item ivu-form-label-top">
+      <label class="ivu-form-item-label overflow">
+        {{ $t('term.report.axis.columnwidth') }}
+      </label>
+      <div class="ivu-form-item-content">
+        <div class="pl-md pr-md">
+          <Slider
+            :value="config.columnWidthRatio"
+            :min="0.1"
+            :max="0.9"
+            :step="0.1"
+            show-tip="never"
+            @on-change="
+              val => {
+                setConfigValue('columnWidthRatio', val);
+              }
+            "
+          ></Slider>
+        </div>
+      </div>
+    </div>
+    <TsFormItem :label="$t('term.report.customcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.color"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('color', val);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem :label="$t('term.report.statisticcolor')" labelPosition="top">
+      <ColorPicker
+        :value="(config.label && config.label.style && config.label.style.fill) || ''"
+        :transfer="true"
+        alpha
+        recommend
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="
+          val => {
+            setConfigValue('label.style.fill', val || defaultSizeColor);
+          }
+        "
+      />
+    </TsFormItem>
+    <TsFormItem label="统计数据字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.labelFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('labelFontSize', val || 12);
+              setConfigValue('label.style.fontSize', val || 12);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem label="辅助线" labelPosition="top">
+      <TsFormSwitch
+        :value="!!config?.yAxis?.hasOwnProperty('grid')?!!config.yAxis.grid:true"
+        :true-value="true"
+        :false-value="false"
+        @change="
+          val => {
+            setConfigValue('yAxis.grid.visible', val);
+          }
+        "
+      ></TsFormSwitch>
+    </TsFormItem>
+    <TsFormItem label="坐标轴字体大小" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.axisFontSize || 12"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('axisFontSize', val || defaultFontSize);
+              setConfigValue('xAxis.title.style.fontSize', val || defaultFontSize);
+              setConfigValue('xAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.label.style.fontSize', val || defaultFontSize);
+              setConfigValue('yAxis.title.style.fontSize', val || defaultFontSize);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+import { WidgetBaseConfig } from './base-config.js';
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem'),
+    TsFormSwitch: () => import('@/resources/plugins/TsForm/TsFormSwitch'),
+    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
+  },
+  extends: WidgetBaseConfig,
+  props: { config: { type: Object } },
+  data() {
+    return {
+      positionList: [
+        { value: 'top-left', text: this.$t('term.report.positions.topleft') },
+        { value: 'top', text: this.$t('term.report.positions.top') },
+        { value: 'top-right', text: this.$t('term.report.positions.topright') },
+        { value: 'bottom-left', text: this.$t('term.report.positions.bottomleft') },
+        { value: 'bottom', text: this.$t('term.report.positions.bottom') },
+        { value: 'bottom-right', text: this.$t('term.report.positions.bottomright') },
+        { value: 'left-top', text: this.$t('term.report.positions.lefttop') },
+        { value: 'left', text: this.$t('term.report.positions.left') },
+        { value: 'left-bottom', text: this.$t('term.report.positions.leftbottom') },
+        { value: 'right-top', text: this.$t('term.report.positions.righttop') },
+        { value: 'right', text: this.$t('term.report.positions.right') },
+        { value: 'right-bottom', text: this.$t('term.report.positions.rightbottom') }
+      ],
+      labelTypeList: [
+        { value: 'inner', text: this.$t('term.report.positions.inner')},
+        { value: 'outer', text: this.$t('term.report.positions.outer')}
+      ]
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
index 95d2c2aa..8b07cf8f 100644
--- a/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/others/autoexec-widget-config.vue
@@ -1,87 +1,73 @@
-<template>
-  <div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('page.fontsize') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.fontsize"
-          :dataList="dataList"
-          transfer
-          border="border"
-          @on-change="val => {
-            setConfigValue('fontsize', val);
-          }"
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('page.fontcolor') }}</label>
-      <div class="ivu-form-item-content">
-        <ColorPicker
-          :value="config.fontcolor"
-          :transfer="true"
-          recommend
-          format="hex"
-          class="colorPicker"
-          transfer-class-name="color-picker-transfer-class"
-          @on-change="val => {
-            setConfigValue('fontcolor', val);
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: '',
-  components: {
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  props: {
-    config: { type: Object }
-  },
-  data() {
-    return {
-      dataList: [
-        {
-          text: '小（12像素)',
-          value: 12
-        },
-        {
-          text: '中（16像素）',
-          value: 16
-        },
-        {
-          text: '大（20像素）',
-          value: 20
-        }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {
-  },
-  watch: {
-  }
-};
-</script>
-<style lang="less">
-</style>
+<template>
+  <div>
+    <TsFormItem :label="$t('page.fontsize')" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.fontsize"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('fontsize', val);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('page.fontcolor')" labelPosition="top">
+      <div>
+        <ColorPicker
+          :value="config.fontcolor"
+          :transfer="true"
+          recommend
+          format="hex"
+          class="colorPicker"
+          transfer-class-name="color-picker-transfer-class"
+          @on-change="val => {
+            setConfigValue('fontcolor', val);
+          }"
+        />
+      </div>
+    </TsFormItem>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem')
+  },
+  props: {
+    config: { type: Object }
+  },
+  data() {
+    return {
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {
+  },
+  watch: {
+  }
+};
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/pages/report/statement/widgetconfigs/others/time-widget-config.vue b/src/views/pages/report/statement/widgetconfigs/others/time-widget-config.vue
index 95d2c2aa..21a80190 100644
--- a/src/views/pages/report/statement/widgetconfigs/others/time-widget-config.vue
+++ b/src/views/pages/report/statement/widgetconfigs/others/time-widget-config.vue
@@ -1,87 +1,70 @@
-<template>
-  <div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('page.fontsize') }}</label>
-      <div class="ivu-form-item-content">
-        <TsFormSelect
-          :value="config.fontsize"
-          :dataList="dataList"
-          transfer
-          border="border"
-          @on-change="val => {
-            setConfigValue('fontsize', val);
-          }"
-        ></TsFormSelect>
-      </div>
-    </div>
-    <div class="ivu-form-item tsform-item ivu-form-label-top">
-      <label class="ivu-form-item-label overflow">{{ $t('page.fontcolor') }}</label>
-      <div class="ivu-form-item-content">
-        <ColorPicker
-          :value="config.fontcolor"
-          :transfer="true"
-          recommend
-          format="hex"
-          class="colorPicker"
-          transfer-class-name="color-picker-transfer-class"
-          @on-change="val => {
-            setConfigValue('fontcolor', val);
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: '',
-  components: {
-    TsFormSelect: () => import('@/resources/plugins/TsForm/TsFormSelect')
-  },
-  props: {
-    config: { type: Object }
-  },
-  data() {
-    return {
-      dataList: [
-        {
-          text: '小（12像素)',
-          value: 12
-        },
-        {
-          text: '中（16像素）',
-          value: 16
-        },
-        {
-          text: '大（20像素）',
-          value: 20
-        }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {},
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    setConfigValue(attrName, attrValue) {
-      if (attrName) {
-        this.$emit('setConfig', attrName, attrValue);
-      }
-    }
-  },
-  filter: {},
-  computed: {
-  },
-  watch: {
-  }
-};
-</script>
-<style lang="less">
-</style>
+<template>
+  <div>
+    <TsFormItem :label="$t('page.fontsize')" labelPosition="top">
+      <div class="pl-sm pr-sm">
+        <Slider
+          :value="config.fontsize"
+          :min="12"
+          :max="50"
+          :step="1"
+          @on-change="
+            val => {
+              setConfigValue('fontsize', val);
+            }
+          "
+        ></Slider>
+      </div>
+    </TsFormItem>
+    <TsFormItem :label="$t('page.fontcolor')" labelPosition="top">
+      <ColorPicker
+        :value="config.fontcolor"
+        :transfer="true"
+        recommend
+        format="hex"
+        class="colorPicker"
+        transfer-class-name="color-picker-transfer-class"
+        @on-change="val => {
+          setConfigValue('fontcolor', val);
+        }"
+      />
+    </TsFormItem>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsFormItem: () => import('@/resources/plugins/TsForm/TsFormItem')
+  },
+  props: {
+    config: { type: Object }
+  },
+  data() {
+    return {};
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    setConfigValue(attrName, attrValue) {
+      if (attrName) {
+        this.$emit('setConfig', attrName, attrValue);
+      }
+    }
+  },
+  filter: {},
+  computed: {
+  },
+  watch: {
+  }
+};
+</script>
+<style lang="less">
+</style>
diff --git a/src/views/pages/report/statement/widgets/define/pie.js b/src/views/pages/report/statement/widgets/define/pie.js
index 7d7c7700..b4306349 100644
--- a/src/views/pages/report/statement/widgets/define/pie.js
+++ b/src/views/pages/report/statement/widgets/define/pie.js
@@ -1,39 +1,38 @@
-import {$t} from '@/resources/init.js';
-
-export default { 
-  name: 'pie', 
-  label: $t('term.report.chartsetting.piechart'), 
-  type: 'pie', 
-  icon: 'tsfont-chart-pie', 
-  widgetType: 'basic', 
-  hasCustomConfig: true, 
-  width: 250, 
-  height: 250, 
-  padding: 5, 
-  needData: true, 
-  dataTypes: [{ value: 'dynamic', text: $t('term.report.datatype.dynamicdata') }], 
-  fields: [ 
-    { name: 'angleField', label: $t('page.valuefield'), type: 'number', isRequired: true }, 
-    { name: 'colorField', label: $t('term.report.chartsetting.classifyfield'), type: 'text', isRequired: true } 
-  ], 
-  config: { 
-    legend: { 
-      visible: true, 
-      position: 'bottom', 
-      layout: 'horizontal' 
-    }, 
-    label: { 
-      type: 'inner' 
-    }, 
-    statistic: { 
-      content: { 
-        style: { 
-          overflow: 'hidden', 
-          textOverflow: 'ellipsis', 
-          fontSize: 12, 
-          color: '' 
-        } 
-      } 
-    } 
-  } 
-};
+import {$t} from '@/resources/init.js';
+
+export default { 
+  name: 'pie', 
+  label: $t('term.report.chartsetting.piechart'), 
+  type: 'pie', 
+  icon: 'tsfont-chart-pie', 
+  widgetType: 'basic', 
+  hasCustomConfig: true, 
+  width: 250, 
+  height: 250, 
+  padding: 5, 
+  needData: true, 
+  dataTypes: [{ value: 'dynamic', text: $t('term.report.datatype.dynamicdata') }], 
+  fields: [ 
+    { name: 'angleField', label: $t('page.valuefield'), type: 'number', isRequired: true }, 
+    { name: 'colorField', label: $t('term.report.chartsetting.classifyfield'), type: 'text', isRequired: true } 
+  ], 
+  config: { 
+    legend: { 
+      visible: true, 
+      position: 'bottom', 
+      layout: 'horizontal' 
+    }, 
+    label: { 
+      type: 'inner' 
+    }, 
+    statistic: { 
+      content: { 
+        style: { 
+          overflow: 'hidden', 
+          textOverflow: 'ellipsis', 
+          fontSize: 12
+        } 
+      } 
+    } 
+  } 
+};
diff --git a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
index 8fb9957c..798e5397 100644
--- a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
+++ b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
@@ -1,163 +1,275 @@
-<template>
-  <div :style="getTimeStyle">
-    <div class="progress flex-start align-center">
-      <div class="pr-xs">总进度</div>
-      <div style="flex: 1; width: 80%;">
-        <Progress
-          :percent="45"
-          :stroke-width="strokeWidth"
-          status="active"
-          text-inside
-        /></div>
-    </div>
-    <div v-if="dataList && dataList.length>0" class="job-detail">
-      <div
-        v-for="(item,index) in dataList"
-        :key="index"
-        class="item-list border-color"
-      >
-        <div
-          v-for="(litem,lindex) in item.children"
-          :key="lindex"
-          class="step-content"
-        >
-          <div class="step-node border-base radius-sm" :title="litem.name">
-            <span>{{ litem.name }}</span>
-          </div>
-        </div>
-        <span v-if="index < dataList.length-1" class="step_a tsfont-arrow-down text-success"></span>
-      </div>
-    </div>
-    <div class="action-group no-line">
-      <span class="block-item">
-        <span class="color-tip bg-gray"></span>
-        <span class="fz10">未开始</span></span>
-      <span class="block-item">
-        <span class="color-tip bg-info"></span>
-        <span class="fz10">进行中</span>
-      </span>
-      <span class="block-item">
-        <span class="color-tip bg-warning"></span>
-        <span class="fz10">已禁用</span>
-      </span>
-      <span class="block-item">
-        <span class="color-tip bg-error"></span>
-        <span class="fz10">失败</span>
-      </span>
-      <span class="block-item">
-        <span class="color-tip bg-success"></span>
-        <span class="fz10">成功</span>
-      </span>
-    </div>
-  </div>
-</template>
-<script>
-import { WidgetBase } from '../widget-base.js';
-import * as themes from '../../widgetthemes/index.js';
-export default {
-  name: '',
-  components: {},
-  extends: WidgetBase,
-  props: {
-  },
-  data() {
-    return {
-      strokeWidthMap: {
-        13: 10,
-        16: 14,
-        20: 18
-      },
-      dataList: [
-        {
-          children: [
-            {name: '步骤一', status: 'success'},
-            {name: '步骤二', status: 'success'},
-            {name: '步骤三', status: 'success'},
-            {name: '步骤四', status: 'success'}
-          ]
-        },
-        {
-          children: [
-            {name: '步骤一', status: 'success'},
-            {name: '步骤二', status: 'success'},
-            {name: '步骤三', status: 'success'},
-            {name: '步骤四', status: 'success'}
-          ]
-        }
-      ]
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-  
-  },
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {
-
-  },
-  destroyed() {},
-  methods: {
-    
-  },
-  filter: {},
-  computed: {
-    getTimeStyle() {
-      return {
-        fontSize: this.widget && this.widget.config && this.widget.config.fontsize ? `${this.widget.config.fontsize}px` : '13px',
-        color: this.canvas.config.theme && themes[this.canvas.config.theme] && themes[this.canvas.config.theme].labels && themes[this.canvas.config.theme].labels.fillColorDark
-      };
-    },
-    strokeWidth() {
-      return this.widget && this.widget.config && this.widget.config.fontsize ? this.strokeWidthMap[this.widget.config.fontsize] : 10; 
-    }
-  },
-  watch: {
-  }
-};
-</script>
-<style lang="less" scoped>
-.progress {
-  margin-bottom: 30px;
-}
-.color-tip {
-  width: 12px;
-  height: 12px;
-  display: inline-block;
-  margin-right: 4px;
-}
-.job-detail{
-  width: 100%;
-  margin: 0 auto;
-}
-.item-list {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 30px;
-  .step-content {
-    position: relative;
-    display: inline-block;
-    width: 20%;
-    padding: 0 10px;
-    .step-node {
-      text-align: center;
-      line-height: 69px;
-      width: 100%;
-      height: 69px;
-      display: inline-block;
-    }
-  }
-}
-.step_a {
-  position: absolute;
-  left: 49%;
-  transform: translateY(-49%);
-  top: 85px;
-}
-</style>
+<template>
+  <div class="autoexec-widget" :style="getTimeStyle">
+    <div class="progress flex-start align-center" :style="{'margin-top': widget.border === 'gradient' ? '24px' : '0px'}">
+      <div class="pr-xs">总进度</div>
+      <div style="flex: 1; width: 80%;">
+        <Progress
+          v-if="isReady"
+          :percent="percentData"
+          :stroke-width="strokeWidth"
+          status="active"
+          text-inside
+        /></div>
+    </div>
+    <div v-if="dataList && dataList.length>0" class="job-detail">
+      <div class="item-list border-color">
+        <div class="step-content">
+          <div class="animate-spin step-node border-base radius-sm border-color-success text-success">
+            <span>开始</span>
+          </div>
+        </div>
+        <span class="step_a tsfont-arrow-down text-success"></span>
+      </div>
+      <div
+        v-for="(item,index) in dataList"
+        :key="index"
+        class="item-list border-color"
+      >
+        <div
+          v-for="(litem,lindex) in item"
+          :id="'step_' + litem.id"
+          :ref="'step_' + litem.id"
+          :key="lindex"
+          class="step-content"
+        >
+          <div class="step-node border-base radius-sm" :class="litem.status && statusMapClass[litem.status]" :title="litem.name">
+            <span>{{ litem.name }}</span>
+          </div>
+        </div>
+        <span class="step_a tsfont-arrow-down text-success"></span>
+      </div>
+      <div class="item-list border-color">
+        <div class="step-content">
+          <div class="step-node border-base radius-sm">
+            <span>结束</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else><no-data></no-data></div>
+    <div class="action-group no-line">
+      <span class="block-item">
+        <span class="color-tip bg-gray"></span>
+        <span class="fz10">未开始</span>
+      </span>
+      <span class="block-item">
+        <span class="color-tip bg-warning"></span>
+        <span class="fz10"> 进行中</span>
+      </span>
+      <!-- <span class="block-item">
+        <span class="color-tip bg-gray"></span>
+        <span class="fz10">已禁用</span>
+      </span> -->
+      <span class="block-item">
+        <span class="color-tip bg-error"></span>
+        <span class="fz10">失败</span>
+      </span>
+      <span class="block-item">
+        <span class="color-tip bg-success"></span>
+        <span class="fz10">成功</span>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { WidgetBase } from '../widget-base.js';
+import * as themes from '../../widgetthemes/index.js';
+export default {
+  name: '',
+  components: {},
+  extends: WidgetBase,
+  props: {
+  },
+  data() {
+    return {
+      isReady: true,
+      statusMapClass: {
+        // pending: 'pending border-color-info',
+        success: 'success border-color-success text-success',
+        running: 'running border-color-warning text-warning',
+        failed: 'failed border-color-error text-error'
+        // disabled: 'bg-gray'
+      },
+      dataList: [],
+      stepList: [
+        {name: '步骤一', groupSort: 0, status: 'success'},
+        {name: '步骤二', groupSort: 0, status: 'success'},
+        {name: '步骤三', groupSort: 0, status: 'success'},
+        {name: '步骤四', groupSort: 0, status: 'success'},     
+        {name: '步骤一', groupSort: 0, status: 'success'},
+        {name: '步骤二', groupSort: 1, status: 'failed'},
+        {name: '步骤三', groupSort: 1, status: 'success'},
+        {name: '步骤四', groupSort: 2, status: 'success'},
+        {name: '步骤一', groupSort: 2, status: 'success'},
+        {name: '步骤二', groupSort: 2, status: 'success'},
+        {name: '步骤三', groupSort: 3, status: 'success'},
+        {name: '步骤四', groupSort: 4, status: 'success'},     
+        {name: '步骤一', groupSort: 4, status: 'success'},
+        {name: '步骤二', groupSort: 5, status: 'success'},
+        {name: '步骤三', groupSort: 6, status: 'pending'},
+        {name: '步骤四', groupSort: 6, status: 'running', id: '123456'}
+      ],
+      percentData: 0
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+  
+  },
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {
+
+  },
+  destroyed() {},
+  methods: {
+    createRandomData() {
+      // this.isReady = false;
+      this.dataList = this.getStepList(this.stepList); 
+      this.getPercentData(this.stepList);
+      this.$nextTick(() => {
+        this.stepScrollIntoView(this.stepList);
+        this.isReady = true;
+      });
+    },
+    changeData() {
+      if (this.data && this.data.length > 0) {
+        // this.isReady = false;
+        this.dataList = this.getStepList(this.data); 
+        this.getPercentData(this.data);
+        this.$nextTick(() => {
+          this.stepScrollIntoView(this.data);
+          this.isReady = true;
+        });
+      }
+    },
+    getStepList(stepList) {
+      let list = [];
+      if (stepList.length) {
+        let groupSortList = stepList.filter(l => !this.$utils.isEmpty(l.groupSort));
+        if (groupSortList && groupSortList.length) {
+          for (let sort = 0, index = 0; index < groupSortList.length;) {
+            let arr = [];
+            groupSortList.filter(l => {
+              if (l.groupSort == sort) {
+                arr.push(l);
+                index++;
+                return true;
+              }
+            });
+            sort++;
+            arr.length && list.push(arr);
+          }
+        }
+      }
+      return list;
+    },
+    stepScrollIntoView(dataList) {
+      for (let i = 0; i < dataList.length; i++) {
+        if (dataList[i].status === 'running' && this.$refs['#step_' + dataList[i].id]) {
+          document.querySelector('#step_' + dataList[i].id).scrollIntoView({
+            behavior: 'smooth', // 平滑过渡
+            block: 'start' // start 上边框 center 中间 end 底部边框 与视窗顶部平齐
+          });
+          break;
+        } 
+      }
+    },
+    getPercentData(list) {
+      //作业进度
+      this.percentData = 0;
+      if (list && list.length) {
+        let i = 0;
+        list.forEach(item => {
+          if (item.status === 'success') {
+            i += 1;
+          }
+        });
+        if (i === list.length) {
+          this.percentData = 100;
+        } else {
+          let num = i / list.length;
+          this.percentData = num.toFixed(2) * 100;
+        }
+      }
+    }
+  },
+  filter: {},
+  computed: {
+    getTimeStyle() {
+      return {
+        fontSize: this.widget && this.widget.config && this.widget.config.fontsize ? `${this.widget.config.fontsize}px` : '13px',
+        color: this.canvas.config.theme && themes[this.canvas.config.theme] && themes[this.canvas.config.theme].labels && themes[this.canvas.config.theme].labels.fillColorDark
+      };
+    },
+    strokeWidth() {
+      return this.widget && this.widget.config && this.widget.config.fontsize ? this.widget.config.fontsize - 3 : 10; 
+    }
+  },
+  watch: {
+  }
+};
+</script>
+<style lang="less" scoped>
+@import (reference) '@/resources/assets/css/variable.less';
+.autoexec-widget{
+  position: relative;
+  padding-bottom: 10px;
+  .progress {
+    width: 100%;
+    padding-bottom: 30px;
+  }
+  .color-tip {
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    margin-right: 4px;
+  }
+  .job-detail{
+    width: 100%;
+    margin: 0 auto;
+  }
+  .item-list {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 30px;
+    .step-content {
+      position: relative;
+      display: inline-block;
+      width: 20%;
+      padding: 0 10px;
+      .step-node {
+        text-align: center;
+        line-height: 50px;
+        width: 100%;
+        height: 50px;
+        display: inline-block;
+      }
+    }
+  }
+  .step_a {
+    position: absolute;
+    left: 49%;
+    transform: translateY(-49%);
+    top: 64px;
+  }
+}
+.pending{
+  background-color: rgba(22, 144, 255, .1);
+}
+.success {
+  background-color: rgba(37, 184, 100, .1);
+}
+.running{
+  background-color: rgba(255, 186, 90, .1);
+}
+.failed {
+  background-color: rgba(243, 59, 59, .1);
+}
+</style>
diff --git a/src/views/pages/report/statement/widgets/widget-base.js b/src/views/pages/report/statement/widgets/widget-base.js
index 2be53faa..0b9d8fa4 100644
--- a/src/views/pages/report/statement/widgets/widget-base.js
+++ b/src/views/pages/report/statement/widgets/widget-base.js
@@ -1,173 +1,180 @@
-import * as themes from '../widgetthemes/index.js';
-export const WidgetBase = {
-  props: {
-    width: { type: Number },
-    height: { type: Number },
-    canvas: { type: Object },
-    widget: { type: Object }, //组件数据
-    widgetComponent: { type: Object } //组件定义
-  },
-  data() {
-    return {
-      data: [],
-      tableData: {},
-      timer: null,
-      oldConfig: null,
-      oldChartConfig: null,
-      chartConfig: {}
-    };
-  },
-  methods: {
-    createPlot() {
-      //创建组件，由子组件覆盖
-    },
-    changeData(data) {
-      //刷新组件数据，由子组件继承
-    },
-    async createRandomData() {
-      //生成随机数据，返回data，由子组件继承
-    },
-    async getData(isFirstGetData) {
-      const data = [];
-      const params = {
-        dataSourceId: this.widget.datasourceId,
-        conditionList: this.widget.conditionList,
-        sortList: this.widget.sortList,
-        limit: this.widget.limit || 0 //必须要要给个0，否则会用pagesize分页
-      };
-      await this.$api.framework.datawarehouse.searchData(params).then(res => {
-        this.tableData = res.Return;
-        if (res.Return.tbodyList && res.Return.tbodyList.length > 0) {
-          res.Return.tbodyList.forEach(element => {
-            const d = {};
-            if (this.widgetComponent.fields && this.widgetComponent.fields.length > 0) {
-              this.widgetComponent.fields.forEach(field => {
-                const f = this.widget.fields.find(d => d.name === field.name);
-                if (f) {
-                  d[field.name] = element['field_' + f.datasourceField];
-                }
-              });
-            } else {
-              res.Return.theadList.forEach(head => {
-                if (head.name) {
-                  //有name的字段才是数据源的数据字段
-                  d[head.name] = element[head.key];
-                }
-              });
-            }
-            data.push(d);
-          });
-        }
-        this.data = data;
-        if (!isFirstGetData) {
-          //第一次加载由于组件还没加载完毕，所以不需要调用changeData
-          this.changeData();
-        }
-        if (this.widget.dataInterval > 0) {
-          if (this.timer) {
-            clearTimeout(this.timer);
-            this.timer = null;
-          }
-          this.timer = setTimeout(() => {
-            this.getData();
-          }, this.widget.dataInterval * 1000);
-        }
-      });
-    }
-  },
-  beforeDestroy() {
-    if (this.plot) {
-      this.plot.destroy();
-      this.plot = null;
-    }
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-  },
-  watch: {
-    'canvas.config.theme': function(val) {
-      if (val) {
-        this.$set(this.chartConfig, 'theme', themes[this.canvas.config.theme]);
-      } else {
-        this.$delete(this.chartConfig, 'theme');
-      }
-      if (this.changeCusTheme) {
-        this.changeCusTheme(val);
-      }
-      this.createPlot();
-    },
-    widget: {
-      handler: async function(val, oldVal) {
-        const widget = val;
-        if (widget) {
-          //合并图形配置
-          Object.assign(this.chartConfig, widget.config);
-          if (!this.oldChartConfig) {
-            //旧配置为空代表是首次加载
-            this.oldChartConfig = this.$utils.deepClone(this.chartConfig);
-            if (widget.dataType === 'static' && widget.fields && widget.fields.length > 0) {
-              this.data = [];
-              widget.fields.forEach(element => {
-                const d = {};
-                d[element.name] = element.value;
-                this.data.push(d);
-              });
-            } else if (widget.dataType === 'dynamic' && widget.datasourceId && (!this.widgetComponent.fields || this.widgetComponent.fields.length == 0 || (widget.fields && widget.fields.length == this.widgetComponent.fields.length && widget.fields.filter(d => !d.datasourceField).length == 0))) {
-              await this.getData(true);
-            } else {
-              await this.createRandomData();
-            }
-            this.$nextTick(() => {
-              //等待容器加载完毕再异步重绘
-              this.createPlot();
-            });
-            //保存数据相关配置，必须要复制一个对象
-            const config = {};
-            config['fields'] = widget.fields;
-            config['datasourceId'] = widget.datasourceId;
-            config['conditionList'] = widget.conditionList;
-            config['sortList'] = widget.sortList;
-            config['limit'] = widget.limit;
-            config['dataInterval'] = widget.dataInterval;
-            config['dataType'] = widget.dataType;
-            this.oldConfig = this.$utils.deepClone(config);
-          } else if (!this.$utils.isSame(this.oldChartConfig, this.chartConfig)) {
-            //如果不是首次加载，则可以同步重绘
-            this.createPlot();
-            this.oldChartConfig = this.$utils.deepClone(this.chartConfig);
-          }
-
-          //和数据相关的变化才会触发更新
-          const config = {};
-          config['fields'] = widget.fields;
-          config['datasourceId'] = widget.datasourceId;
-          config['conditionList'] = widget.conditionList;
-          config['sortList'] = widget.sortList;
-          config['limit'] = widget.limit;
-          config['dataInterval'] = widget.dataInterval;
-          config['dataType'] = widget.dataType;
-          if (!this.$utils.isSame(this.oldConfig, config)) {
-            if (widget.dataType === 'static' && widget.fields && widget.fields.length > 0) {
-              this.data = [];
-              widget.fields.forEach(element => {
-                const d = {};
-                d[element.name] = element.value;
-                this.data.push(d);
-              });
-              this.changeData();
-            } else if (widget.dataType === 'dynamic' && widget.datasourceId && (!this.widgetComponent.fields || this.widgetComponent.fields.length == 0 || (widget.fields && widget.fields.length == this.widgetComponent.fields.length && widget.fields.filter(d => !d.datasourceField).length == 0))) {
-              this.getData();
-            } else {
-              this.createRandomData();
-              this.changeData();
-            }
-            this.oldConfig = this.$utils.deepClone(config);
-          }
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-};
+import * as themes from '../widgetthemes/index.js';
+export const WidgetBase = {
+  props: {
+    width: { type: Number },
+    height: { type: Number },
+    canvas: { type: Object },
+    widget: { type: Object }, //组件数据
+    widgetComponent: { type: Object } //组件定义
+  },
+  data() {
+    return {
+      data: [],
+      tableData: {},
+      timer: null,
+      oldConfig: null,
+      oldChartConfig: null,
+      chartConfig: {}
+    };
+  },
+  methods: {
+    createPlot() {
+      //创建组件，由子组件覆盖
+    },
+    changeData(data) {
+      //刷新组件数据，由子组件继承
+    },
+    async createRandomData() {
+      //生成随机数据，返回data，由子组件继承
+    },
+    async getData(isFirstGetData) {
+      if (!this.widget.datasourceId) {
+        if (this.timer) {
+          clearTimeout(this.timer);
+          this.timer = null;
+        }
+        return false;
+      }
+      const data = [];
+      const params = {
+        dataSourceId: this.widget.datasourceId,
+        conditionList: this.widget.conditionList,
+        sortList: this.widget.sortList,
+        limit: this.widget.limit || 0 //必须要要给个0，否则会用pagesize分页
+      };
+      await this.$api.framework.datawarehouse.searchData(params).then(res => {
+        this.tableData = res.Return;
+        if (res.Return.tbodyList && res.Return.tbodyList.length > 0) {
+          res.Return.tbodyList.forEach(element => {
+            const d = {};
+            if (this.widgetComponent.fields && this.widgetComponent.fields.length > 0) {
+              this.widgetComponent.fields.forEach(field => {
+                const f = this.widget.fields.find(d => d.name === field.name);
+                if (f) {
+                  d[field.name] = element['field_' + f.datasourceField];
+                }
+              });
+            } else {
+              res.Return.theadList.forEach(head => {
+                if (head.name) {
+                  //有name的字段才是数据源的数据字段
+                  d[head.name] = element[head.key];
+                }
+              });
+            }
+            data.push(d);
+          });
+        }
+        this.data = data;
+        if (!isFirstGetData) {
+          //第一次加载由于组件还没加载完毕，所以不需要调用changeData
+          this.changeData();
+        }
+        if (this.widget.dataInterval > 0) {
+          if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+          }
+          this.timer = setTimeout(() => {
+            this.getData();
+          }, this.widget.dataInterval * 1000);
+        }
+      });
+    }
+  },
+  beforeDestroy() {
+    if (this.plot) {
+      this.plot.destroy();
+      this.plot = null;
+    }
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  },
+  watch: {
+    'canvas.config.theme': function(val) {
+      if (val) {
+        this.$set(this.chartConfig, 'theme', themes[this.canvas.config.theme]);
+      } else {
+        this.$delete(this.chartConfig, 'theme');
+      }
+      if (this.changeCusTheme) {
+        this.changeCusTheme(val);
+      }
+      this.createPlot();
+    },
+    widget: {
+      handler: async function(val, oldVal) {
+        const widget = val;
+        if (widget) {
+          //合并图形配置
+          Object.assign(this.chartConfig, widget.config);
+          if (!this.oldChartConfig) {
+            //旧配置为空代表是首次加载
+            this.oldChartConfig = this.$utils.deepClone(this.chartConfig);
+            if (widget.dataType === 'static' && widget.fields && widget.fields.length > 0) {
+              this.data = [];
+              widget.fields.forEach(element => {
+                const d = {};
+                d[element.name] = element.value;
+                this.data.push(d);
+              });
+            } else if (widget.dataType === 'dynamic' && widget.datasourceId && (!this.widgetComponent.fields || this.widgetComponent.fields.length == 0 || (widget.fields && widget.fields.length == this.widgetComponent.fields.length && widget.fields.filter(d => !d.datasourceField).length == 0))) {
+              await this.getData(true);
+            } else {
+              await this.createRandomData();
+            }
+            this.$nextTick(() => {
+              //等待容器加载完毕再异步重绘
+              this.createPlot();
+            });
+            //保存数据相关配置，必须要复制一个对象
+            const config = {};
+            config['fields'] = widget.fields;
+            config['datasourceId'] = widget.datasourceId;
+            config['conditionList'] = widget.conditionList;
+            config['sortList'] = widget.sortList;
+            config['limit'] = widget.limit;
+            config['dataInterval'] = widget.dataInterval;
+            config['dataType'] = widget.dataType;
+            this.oldConfig = this.$utils.deepClone(config);
+          } else if (!this.$utils.isSame(this.oldChartConfig, this.chartConfig)) {
+            //如果不是首次加载，则可以同步重绘
+            this.createPlot();
+            this.oldChartConfig = this.$utils.deepClone(this.chartConfig);
+          }
+
+          //和数据相关的变化才会触发更新
+          const config = {};
+          config['fields'] = widget.fields;
+          config['datasourceId'] = widget.datasourceId;
+          config['conditionList'] = widget.conditionList;
+          config['sortList'] = widget.sortList;
+          config['limit'] = widget.limit;
+          config['dataInterval'] = widget.dataInterval;
+          config['dataType'] = widget.dataType;
+          if (!this.$utils.isSame(this.oldConfig, config)) {
+            if (widget.dataType === 'static' && widget.fields && widget.fields.length > 0) {
+              this.data = [];
+              widget.fields.forEach(element => {
+                const d = {};
+                d[element.name] = element.value;
+                this.data.push(d);
+              });
+              this.changeData();
+            } else if (widget.dataType === 'dynamic' && widget.datasourceId && (!this.widgetComponent.fields || this.widgetComponent.fields.length == 0 || (widget.fields && widget.fields.length == this.widgetComponent.fields.length && widget.fields.filter(d => !d.datasourceField).length == 0))) {
+              this.getData();
+            } else {
+              this.createRandomData();
+              this.changeData();
+            }
+            this.oldConfig = this.$utils.deepClone(config);
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  }
+};
diff --git a/src/views/pages/report/statement/widgets/widget-handler.vue b/src/views/pages/report/statement/widgets/widget-handler.vue
index 504eef64..17c4f648 100644
--- a/src/views/pages/report/statement/widgets/widget-handler.vue
+++ b/src/views/pages/report/statement/widgets/widget-handler.vue
@@ -1,460 +1,460 @@
-<template>
-  <div
-    :style="{
-      position: 'absolute',
-      left: left + 'px',
-      top: top + 'px',
-      width: widget.width + 'px',
-      height: widget.height + 'px',
-      'z-index':zindex
-    }"
-    :class="widget._selected ? 'selected' : (widget._aligned?'aligned':'')"
-    @mousedown="startDrag"
-  >
-    <div :style="{position:'relative',width:'100%',height:'100%', padding:widget.padding+'px'}">
-      <div v-if="mode == 'edit' && widget._selected" class="config-btn">
-        <Dropdown>
-          <a href="javascript:void(0)" class="text-href tsfont-option-horizontal">
-          </a>
-          <DropdownMenu slot="list">
-            <DropdownItem @click.native="moveTop">{{ $t('term.report.movetop') }}</DropdownItem>
-            <DropdownItem @click.native="moveUp">{{ $t('term.report.moveup') }}</DropdownItem>
-            <DropdownItem @click.native="moveDown">{{ $t('term.report.movedown') }}</DropdownItem>
-            <DropdownItem @click.native="moveFloor">{{ $t('term.report.movefloor') }}</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </div>
-      <div v-if="mode == 'edit' && widget._selected" class="remove-btn" @click="removeWidget"><i class="text-href tsfont-trash-o"></i></div>
-      <div v-if="mode == 'edit' && widget._selected" class="position-label text-info">{{ left }},{{ top }}</div>
-      <div v-if="mode == 'edit' && widget._selected" class="top-width-label text-info">{{ widget.width }}px</div>
-      <div v-if="mode == 'edit' && widget._selected" class="left-height-label text-info">{{ widget.height }}px</div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-top-left"
-        @mousedown="
-          event => {
-            startResize(event, 'wn');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-top-middle"
-        @mousedown="
-          event => {
-            startResize(event, 'n');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-top-right"
-        @mousedown="
-          event => {
-            startResize(event, 'en');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-middle-left"
-        @mousedown="
-          event => {
-            startResize(event, 'w');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-middle-right"
-        @mousedown="
-          event => {
-            startResize(event, 'e');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-bottom-left"
-        @mousedown="
-          event => {
-            startResize(event, 'ws');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-bottom-middle"
-        @mousedown="
-          event => {
-            startResize(event, 's');
-          }
-        "
-      ></div>
-      <div
-        v-if="mode == 'edit' && widget._selected"
-        class="bg-info anchor anchor-bottom-right"
-        @mousedown="
-          event => {
-            startResize(event, 'es');
-          }
-        "
-      ></div>
-      <div v-if="widget.border" class="widget-border">
-        <WidgetBorder
-          :type="widget.border"
-          :config="widget.borderConfig||getBorderComponentConfigByName(widget.border)"
-          :style="{
-            position:'absolute',
-            top:'0px',
-            left:'0px',
-            'z-index':-1,
-            width: (widget.width) + 'px',
-            height: (widget.height) + 'px'
-          }"
-        ></WidgetBorder>
-      </div>
-      <div>
-        <component
-          :is="widget.type + 'widget'"
-          ref="widget"
-          :class="mode == 'edit'?'widget':''"
-          :widget="widget"
-          :mode="mode"
-          :canvas="canvas"
-          :widgetComponent="widgetComponent"
-          :width="widget.width - 2 - widget.padding * 2"
-          :height="widget.height - 2 - widget.padding * 2"
-          :style="{
-            width: (widget.width - 2 - widget.padding * 2) + 'px',
-            height: (widget.height - 2 - widget.padding * 2) + 'px',
-            overflow: 'auto'
-          }"
-        ></component>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import * as handlers from './index.js';
-import { BORDER_LIST } from '../widgetborders/border-list.js';
-export default {
-  name: '',
-  components: {
-    ...handlers,
-    WidgetBorder: () => import('../widgetborders/widget-border.vue')
-  },
-  props: {
-    mode: { type: String, default: 'edit' }, //模式:edit或read
-    canvas: {type: Object}, //报表定义
-    widget: { type: Object }, //组件定义
-    widgetComponent: { type: Object }, //组件配置
-    alignX: {type: Number},
-    alignY: {type: Number}
-  },
-  data() {
-    return {
-      isDragging: false,
-      currentDirection: '',
-      offsetX: 0,
-      offsetY: 0,
-      left: 0,
-      top: 0
-    };
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-  },
-  beforeUpdate() {},
-  updated() {},
-  activated() {},
-  deactivated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  methods: {
-    getBorderComponentConfigByName(borderName) {
-      const b = BORDER_LIST.find(d => d.name === borderName);
-      if (b) {
-        return b.config;
-      }
-      return null;
-    },
-    moveTop() {
-      if (this.widget) {
-        this.$emit('movetop', this.widget);
-      }
-    },
-    moveFloor() {
-      if (this.widget) {
-        this.$emit('movefloor', this.widget);
-      }
-    },
-    moveUp() {
-      if (this.widget) {
-        this.$emit('moveup', this.widget);
-      }
-    },
-    moveDown() {
-      if (this.widget) {
-        this.$emit('movedown', this.widget);
-      }
-    },
-    removeWidget(widget) {
-      this.$emit('remove', this.widget);
-    },
-    startDrag(event) {
-      if (this.mode == 'edit') {
-        this.offsetX = event.offsetX;
-        this.offsetY = event.offsetY;
-        this.$set(this.widget, '_dragging', true);
-        this.$set(this.widget, '_resizing', false);
-        this.$emit('select', this.widget);
-        this.$emit('addHistory');
-      }
-    },
-    startResize(event, direction) {
-      event.stopPropagation();
-      this.$set(this.widget, '_dragging', false);
-      this.$set(this.widget, '_resizing', true);
-      this.$emit('addHistory');
-      this.currentDirection = direction;
-    },
-    resize(dx, dy) {
-      if (this.currentDirection == 'wn') {
-        const ox = this.widget.x;
-        const oy = this.widget.y;
-        const owidth = this.widget.width;
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'x', ox + dx);
-        this.$set(this.widget, 'y', oy + dy);
-        this.$set(this.widget, 'height', oheight - dy);
-        this.$set(this.widget, 'width', owidth - dx);
-      } else if (this.currentDirection == 'n') {
-        const oy = this.widget.y;
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'y', oy + dy);
-        this.$set(this.widget, 'height', oheight - dy);
-      } else if (this.currentDirection == 'en') {
-        const oy = this.widget.y;
-        const owidth = this.widget.width;
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'y', oy + dy);
-        this.$set(this.widget, 'height', oheight - dy);
-        this.$set(this.widget, 'width', owidth + dx);
-      } else if (this.currentDirection == 'w') {
-        const ox = this.widget.x;
-        const owidth = this.widget.width;
-        this.$set(this.widget, 'x', ox + dx);
-        this.$set(this.widget, 'width', owidth - dx);
-      } else if (this.currentDirection == 'e') {
-        const owidth = this.widget.width;
-        this.$set(this.widget, 'width', owidth + dx);
-      } else if (this.currentDirection == 'ws') {
-        const ox = this.widget.x;
-        const owidth = this.widget.width;
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'x', ox + dx);
-        this.$set(this.widget, 'height', oheight + dy);
-        this.$set(this.widget, 'width', owidth - dx);
-      } else if (this.currentDirection == 's') {
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'height', oheight + dy);
-      } else if (this.currentDirection == 'es') {
-        const owidth = this.widget.width;
-        const oheight = this.widget.height;
-        this.$set(this.widget, 'height', oheight + dy);
-        this.$set(this.widget, 'width', owidth + dx);
-      }
-    },
-    move(dx, dy) {
-      this.widget.y = this.widget.y + dy;
-      this.widget.x = this.widget.x + dx;
-      if (this.canvas.isAutoAlign) { //显示对齐辅助线
-        //寻找最接近的节点，如果符合接近距离，则显示对齐辅助线
-        const offset = 10;
-        let targetX = null;
-        let targetY = null;
-        let minX = offset;
-        let minY = offset;
-        this.canvas.widgetList.forEach(node => {
-          this.$set(node, '_aligned', false);
-          if (node !== this.widget) {
-            const tx = Math.abs(this.widget.x - node.x);
-            const ty = Math.abs(this.widget.y - node.y);
-            if (tx <= minX) {
-              minX = tx;
-              targetX = node;
-            }
-            if (ty <= minY) {
-              minY = ty;
-              targetY = node;
-            }
-          }
-        });
-        if (targetX) {
-          // 添加对齐辅助线
-          this.$emit('setAlignX', targetX.x);
-          this.$set(targetX, '_aligned', true);
-        } else {
-          this.$emit('setAlignX', null);
-        }
-        if (targetY) {
-          this.$emit('setAlignY', targetY.y);
-          this.$set(targetY, '_aligned', true);
-        } else {
-          this.$emit('setAlignY', null);
-        }
-      }
-    }
-  },
-  filter: {},
-  computed: {
-    zindex() {
-      return this.widget._selected ? 99999 : this.widget.zindex;
-    }
-  },
-  watch: {
-    'widget._movingData': {
-      handler: function(val) {
-        if (val) {
-          this.move(val.dx, val.dy);
-        }
-      },
-      deep: true
-    },
-    'widget._resizingData': {
-      handler: function(val) {
-        if (val) {
-          this.resize(val.dx, val.dy);
-        }
-      },
-      deep: true
-    },
-    'widget._dragging': {
-      handler: function(val) {
-        if (val == false) {
-          if (this.canvas.isAutoAlign) {
-            if (this.alignX != null && this.alignX >= 0) {
-              this.$set(this.widget, 'x', this.alignX);
-            }
-            if (this.alignY != null && this.alignY >= 0) {
-              this.$set(this.widget, 'y', this.alignY);
-            }
-          }
-        }
-      },
-      deep: true
-    },
-    'widget.x': {
-      handler: function(val) {
-        this.left = val;
-      },
-      immediate: true
-    },
-    'widget.y': {
-      handler: function(val) {
-        this.top = val;
-      },
-      immediate: true
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.remove-btn {
-  position: absolute;
-  top: -20px;
-  right: -10px;
-  cursor: pointer;
-}
-.config-btn{
-  position: absolute;
-  top: -20px;
-  right: 15px;
-  cursor: pointer;
-}
-.position-label {
-  position: absolute;
-  top: -20px;
-  left: 0px;
-  font-size: 12px;
-  user-select: none;
-}
-.top-width-label {
-  position: absolute;
-  top: -20px;
-  left: calc(50% - 10px);
-  font-size: 12px;
-  user-select: none;
-}
-.left-height-label {
-  position: absolute;
-  top: calc(50% - 10px);
-  left: -30px;
-  transform: rotate(90deg);
-  font-size: 12px;
-  user-select: none;
-}
-.widget {
-  cursor: move;
-}
-.selected {
-  border-width: 1px;
-  border-style: dotted;
-  background-color: rgba(45, 132, 251, 0.2);
-}
-.aligned{
-  background-color: rgba(109, 109, 109, 0.2);
-}
-.anchor {
-  width: 10px;
-  height: 10px;
-  border: 0px;
-  position: absolute;
-  opacity: 0.8;
-  z-index: 9999;
-}
-.anchor-top-left {
-  top: -5px;
-  left: -5px;
-  cursor: nw-resize;
-}
-.anchor-top-middle {
-  top: -5px;
-  left: calc(50% - 5px);
-  cursor: n-resize;
-}
-.anchor-top-right {
-  top: -5px;
-  right: -5px;
-  cursor: ne-resize;
-}
-.anchor-middle-left {
-  top: calc(50% - 5px);
-  left: -5px;
-  cursor: w-resize;
-}
-.anchor-middle-right {
-  top: calc(50% - 5px);
-  right: -5px;
-  cursor: e-resize;
-}
-.anchor-bottom-left {
-  bottom: -5px;
-  left: -5px;
-  cursor: sw-resize;
-}
-.anchor-bottom-middle {
-  bottom: -5px;
-  left: calc(50% - 5px);
-  cursor: s-resize;
-}
-.anchor-bottom-right {
-  bottom: -5px;
-  right: -5px;
-  cursor: se-resize;
-}
-
-</style>
+<template>
+  <div
+    :style="{
+      position: 'absolute',
+      left: left + 'px',
+      top: top + 'px',
+      width: widget.width + 'px',
+      height: widget.height + 'px',
+      'z-index':zindex
+    }"
+    :class="widget._selected ? 'selected' : (widget._aligned?'aligned':'')"
+    @mousedown="startDrag"
+  >
+    <div :style="{position:'relative',width:'100%',height:'100%', padding:widget.padding+'px'}">
+      <div v-if="mode == 'edit' && widget._selected" class="config-btn">
+        <Dropdown>
+          <a href="javascript:void(0)" class="text-href tsfont-option-horizontal">
+          </a>
+          <DropdownMenu slot="list">
+            <DropdownItem @click.native="moveTop">{{ $t('term.report.movetop') }}</DropdownItem>
+            <DropdownItem @click.native="moveUp">{{ $t('term.report.moveup') }}</DropdownItem>
+            <DropdownItem @click.native="moveDown">{{ $t('term.report.movedown') }}</DropdownItem>
+            <DropdownItem @click.native="moveFloor">{{ $t('term.report.movefloor') }}</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+      <div v-if="mode == 'edit' && widget._selected" class="remove-btn" @click="removeWidget"><i class="text-href tsfont-trash-o"></i></div>
+      <div v-if="mode == 'edit' && widget._selected" class="position-label text-info">{{ left }},{{ top }}</div>
+      <div v-if="mode == 'edit' && widget._selected" class="top-width-label text-info">{{ widget.width }}px</div>
+      <div v-if="mode == 'edit' && widget._selected" class="left-height-label text-info">{{ widget.height }}px</div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-top-left"
+        @mousedown="
+          event => {
+            startResize(event, 'wn');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-top-middle"
+        @mousedown="
+          event => {
+            startResize(event, 'n');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-top-right"
+        @mousedown="
+          event => {
+            startResize(event, 'en');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-middle-left"
+        @mousedown="
+          event => {
+            startResize(event, 'w');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-middle-right"
+        @mousedown="
+          event => {
+            startResize(event, 'e');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-bottom-left"
+        @mousedown="
+          event => {
+            startResize(event, 'ws');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-bottom-middle"
+        @mousedown="
+          event => {
+            startResize(event, 's');
+          }
+        "
+      ></div>
+      <div
+        v-if="mode == 'edit' && widget._selected"
+        class="bg-info anchor anchor-bottom-right"
+        @mousedown="
+          event => {
+            startResize(event, 'es');
+          }
+        "
+      ></div>
+      <div v-if="widget.border" class="widget-border">
+        <WidgetBorder
+          :type="widget.border"
+          :config="$utils.deepClone(widget.borderConfig)||getBorderComponentConfigByName(widget.border)"
+          :style="{
+            position:'absolute',
+            top:'0px',
+            left:'0px',
+            'z-index':-1,
+            width: (widget.width) + 'px',
+            height: (widget.height) + 'px'
+          }"
+        ></WidgetBorder>
+      </div>
+      <div>
+        <component
+          :is="widget.type + 'widget'"
+          ref="widget"
+          :class="mode == 'edit'?'widget':''"
+          :widget="widget"
+          :mode="mode"
+          :canvas="canvas"
+          :widgetComponent="widgetComponent"
+          :width="widget.width - 2 - widget.padding * 2"
+          :height="widget.height - 2 - widget.padding * 2"
+          :style="{
+            width: (widget.width - 2 - widget.padding * 2) + 'px',
+            height: (widget.height - 2 - widget.padding * 2) + 'px',
+            overflow: 'auto'
+          }"
+        ></component>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as handlers from './index.js';
+import { BORDER_LIST } from '../widgetborders/border-list.js';
+export default {
+  name: '',
+  components: {
+    ...handlers,
+    WidgetBorder: () => import('../widgetborders/widget-border.vue')
+  },
+  props: {
+    mode: { type: String, default: 'edit' }, //模式:edit或read
+    canvas: {type: Object}, //报表定义
+    widget: { type: Object }, //组件定义
+    widgetComponent: { type: Object }, //组件配置
+    alignX: {type: Number},
+    alignY: {type: Number}
+  },
+  data() {
+    return {
+      isDragging: false,
+      currentDirection: '',
+      offsetX: 0,
+      offsetY: 0,
+      left: 0,
+      top: 0
+    };
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+  },
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    getBorderComponentConfigByName(borderName) {
+      const b = BORDER_LIST.find(d => d.name === borderName);
+      if (b) {
+        return b.config;
+      }
+      return null;
+    },
+    moveTop() {
+      if (this.widget) {
+        this.$emit('movetop', this.widget);
+      }
+    },
+    moveFloor() {
+      if (this.widget) {
+        this.$emit('movefloor', this.widget);
+      }
+    },
+    moveUp() {
+      if (this.widget) {
+        this.$emit('moveup', this.widget);
+      }
+    },
+    moveDown() {
+      if (this.widget) {
+        this.$emit('movedown', this.widget);
+      }
+    },
+    removeWidget(widget) {
+      this.$emit('remove', this.widget);
+    },
+    startDrag(event) {
+      if (this.mode == 'edit') {
+        this.offsetX = event.offsetX;
+        this.offsetY = event.offsetY;
+        this.$set(this.widget, '_dragging', true);
+        this.$set(this.widget, '_resizing', false);
+        this.$emit('select', this.widget);
+        this.$emit('addHistory');
+      }
+    },
+    startResize(event, direction) {
+      event.stopPropagation();
+      this.$set(this.widget, '_dragging', false);
+      this.$set(this.widget, '_resizing', true);
+      this.$emit('addHistory');
+      this.currentDirection = direction;
+    },
+    resize(dx, dy) {
+      if (this.currentDirection == 'wn') {
+        const ox = this.widget.x;
+        const oy = this.widget.y;
+        const owidth = this.widget.width;
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'x', ox + dx);
+        this.$set(this.widget, 'y', oy + dy);
+        this.$set(this.widget, 'height', oheight - dy);
+        this.$set(this.widget, 'width', owidth - dx);
+      } else if (this.currentDirection == 'n') {
+        const oy = this.widget.y;
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'y', oy + dy);
+        this.$set(this.widget, 'height', oheight - dy);
+      } else if (this.currentDirection == 'en') {
+        const oy = this.widget.y;
+        const owidth = this.widget.width;
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'y', oy + dy);
+        this.$set(this.widget, 'height', oheight - dy);
+        this.$set(this.widget, 'width', owidth + dx);
+      } else if (this.currentDirection == 'w') {
+        const ox = this.widget.x;
+        const owidth = this.widget.width;
+        this.$set(this.widget, 'x', ox + dx);
+        this.$set(this.widget, 'width', owidth - dx);
+      } else if (this.currentDirection == 'e') {
+        const owidth = this.widget.width;
+        this.$set(this.widget, 'width', owidth + dx);
+      } else if (this.currentDirection == 'ws') {
+        const ox = this.widget.x;
+        const owidth = this.widget.width;
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'x', ox + dx);
+        this.$set(this.widget, 'height', oheight + dy);
+        this.$set(this.widget, 'width', owidth - dx);
+      } else if (this.currentDirection == 's') {
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'height', oheight + dy);
+      } else if (this.currentDirection == 'es') {
+        const owidth = this.widget.width;
+        const oheight = this.widget.height;
+        this.$set(this.widget, 'height', oheight + dy);
+        this.$set(this.widget, 'width', owidth + dx);
+      }
+    },
+    move(dx, dy) {
+      this.widget.y = this.widget.y + dy;
+      this.widget.x = this.widget.x + dx;
+      if (this.canvas.isAutoAlign) { //显示对齐辅助线
+        //寻找最接近的节点，如果符合接近距离，则显示对齐辅助线
+        const offset = 10;
+        let targetX = null;
+        let targetY = null;
+        let minX = offset;
+        let minY = offset;
+        this.canvas.widgetList.forEach(node => {
+          this.$set(node, '_aligned', false);
+          if (node !== this.widget) {
+            const tx = Math.abs(this.widget.x - node.x);
+            const ty = Math.abs(this.widget.y - node.y);
+            if (tx <= minX) {
+              minX = tx;
+              targetX = node;
+            }
+            if (ty <= minY) {
+              minY = ty;
+              targetY = node;
+            }
+          }
+        });
+        if (targetX) {
+          // 添加对齐辅助线
+          this.$emit('setAlignX', targetX.x);
+          this.$set(targetX, '_aligned', true);
+        } else {
+          this.$emit('setAlignX', null);
+        }
+        if (targetY) {
+          this.$emit('setAlignY', targetY.y);
+          this.$set(targetY, '_aligned', true);
+        } else {
+          this.$emit('setAlignY', null);
+        }
+      }
+    }
+  },
+  filter: {},
+  computed: {
+    zindex() {
+      return this.widget._selected ? 99999 : this.widget.zindex;
+    }
+  },
+  watch: {
+    'widget._movingData': {
+      handler: function(val) {
+        if (val) {
+          this.move(val.dx, val.dy);
+        }
+      },
+      deep: true
+    },
+    'widget._resizingData': {
+      handler: function(val) {
+        if (val) {
+          this.resize(val.dx, val.dy);
+        }
+      },
+      deep: true
+    },
+    'widget._dragging': {
+      handler: function(val) {
+        if (val == false) {
+          if (this.canvas.isAutoAlign) {
+            if (this.alignX != null && this.alignX >= 0) {
+              this.$set(this.widget, 'x', this.alignX);
+            }
+            if (this.alignY != null && this.alignY >= 0) {
+              this.$set(this.widget, 'y', this.alignY);
+            }
+          }
+        }
+      },
+      deep: true
+    },
+    'widget.x': {
+      handler: function(val) {
+        this.left = val;
+      },
+      immediate: true
+    },
+    'widget.y': {
+      handler: function(val) {
+        this.top = val;
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.remove-btn {
+  position: absolute;
+  top: -20px;
+  right: -10px;
+  cursor: pointer;
+}
+.config-btn{
+  position: absolute;
+  top: -20px;
+  right: 15px;
+  cursor: pointer;
+}
+.position-label {
+  position: absolute;
+  top: -20px;
+  left: 0px;
+  font-size: 12px;
+  user-select: none;
+}
+.top-width-label {
+  position: absolute;
+  top: -20px;
+  left: calc(50% - 10px);
+  font-size: 12px;
+  user-select: none;
+}
+.left-height-label {
+  position: absolute;
+  top: calc(50% - 10px);
+  left: -30px;
+  transform: rotate(90deg);
+  font-size: 12px;
+  user-select: none;
+}
+.widget {
+  cursor: move;
+}
+.selected {
+  border-width: 1px;
+  border-style: dotted;
+  background-color: rgba(45, 132, 251, 0.2);
+}
+.aligned{
+  background-color: rgba(109, 109, 109, 0.2);
+}
+.anchor {
+  width: 10px;
+  height: 10px;
+  border: 0px;
+  position: absolute;
+  opacity: 0.8;
+  z-index: 9999;
+}
+.anchor-top-left {
+  top: -5px;
+  left: -5px;
+  cursor: nw-resize;
+}
+.anchor-top-middle {
+  top: -5px;
+  left: calc(50% - 5px);
+  cursor: n-resize;
+}
+.anchor-top-right {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+.anchor-middle-left {
+  top: calc(50% - 5px);
+  left: -5px;
+  cursor: w-resize;
+}
+.anchor-middle-right {
+  top: calc(50% - 5px);
+  right: -5px;
+  cursor: e-resize;
+}
+.anchor-bottom-left {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+.anchor-bottom-middle {
+  bottom: -5px;
+  left: calc(50% - 5px);
+  cursor: s-resize;
+}
+.anchor-bottom-right {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}
+
+</style>
diff --git a/src/views/pages/report/statement/widgetthemes/dark.json b/src/views/pages/report/statement/widgetthemes/dark.json
index c6fe013a..78790ad7 100644
--- a/src/views/pages/report/statement/widgetthemes/dark.json
+++ b/src/views/pages/report/statement/widgetthemes/dark.json
@@ -155,11 +155,7 @@
                 "verticalLimitLength": 0.3333333333333333
             },
             "circle": {
-                "title": {
-                    "style": {
-                        "fill": "rgba(241, 241, 241, 1)"
-                    }
-                },
+                "title": null,
                 "grid": {
                     "line": {
                         "type": "line",
@@ -650,6 +646,13 @@
         },
         "autoRotate": true
     },
+    "StatisticText": {
+        "content": {
+            "style":{
+                "fill": "#fff"
+            }
+        }
+    },
     "bottom-axis-subTick-line": false,
     "styleSheet": {
         "brandColor": "rgba(0, 188, 212, 1)",
diff --git a/src/views/pages/report/statement/widgetthemes/theme-dark1.json b/src/views/pages/report/statement/widgetthemes/theme-dark1.json
index 41df0435..a7e35e2f 100644
--- a/src/views/pages/report/statement/widgetthemes/theme-dark1.json
+++ b/src/views/pages/report/statement/widgetthemes/theme-dark1.json
@@ -1,691 +1,687 @@
-{
-  "background": "transparent",
-  "subColor": "rgba(255, 255, 255, 0.05)",
-  "semanticRed": "rgba(244, 102, 74, 1)",
-  "semanticGreen": "rgba(37, 184, 100, 1)",
-  "padding": "auto",
-  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-  "columnWidthRatio": 0.5,
-  "maxColumnWidth": null,
-  "minColumnWidth": null,
-  "roseWidthRatio": 0.9999999,
-  "multiplePieWidthRatio": 0.7692307692307692,
-  "sequenceColors": [
-      "#e1ebff",
-      "#c2d8ff",
-      "#a0c5ff",
-      "#8ab5fe",
-      "#7aa7fc",
-      "#6898fa",
-      "#558af4",
-      "#427de4",
-      "#2b6fd5",
-      "#0362c5"
-  ],
-  "shapes": {
-    "point": [
-      "hollow-circle",
-      "hollow-square",
-      "hollow-bowtie",
-      "hollow-diamond",
-      "hollow-hexagon",
-      "hollow-triangle",
-      "hollow-triangle-down",
-      "circle",
-      "square",
-      "bowtie",
-      "diamond",
-      "hexagon",
-      "triangle",
-      "triangle-down",
-      "cross",
-      "tick",
-      "plus",
-      "hyphen",
-      "line"
-    ],
-    "line": [
-      "line",
-      "dash",
-      "dot",
-      "smooth"
-    ],
-    "area": [
-      "area",
-      "smooth",
-      "line",
-      "smooth-line"
-    ],
-    "interval": [
-      "rect",
-      "hollow-rect",
-      "line",
-      "tick"
-    ]
-  },
-  "sizes": [
-    1,
-    10
-  ],
-  "components": {
-    "axis": {
-      "common": {
-        "title": {
-          "autoRotate": true,
-          "position": "center",
-          "spacing": 12,
-          "style": {
-            "fill": "#f1f1f1",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "label": {
-          "autoRotate": false,
-          "autoEllipsis": false,
-          "autoHide": {
-            "type": "equidistance",
-            "cfg": {
-              "minGap": 6
-            }
-          },
-          "offset": 8,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "line": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 0.5,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "tickLine": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          },
-          "alignTick": true,
-          "length": 4
-        },
-        "subTickLine": null,
-        "animate": true
-      },
-      "top": {
-        "position": "top",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "bottom": {
-        "position": "bottom",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "left": {
-        "position": "left",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "right": {
-        "position": "right",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "circle": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 255, 1)"
-          }
-        },
-        "tickLine": {
-          "style": {
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        }
-      },
-      "radius": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "circle",
-            "style": {
-              "stroke": "#262626",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        }
-      }
-    },
-    "legend": {
-      "common": {
-        "title": null,
-        "marker": {
-          "symbol": "circle",
-          "spacing": 8,
-          "style": {
-            "r": 4,
-            "fill": "#5B8FF9"
-          }
-        },
-        "itemName": {
-          "spacing": 5,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontWeight": "normal",
-            "textAlign": "start",
-            "textBaseline": "middle"
-          }
-        },
-        "itemStates": {
-          "active": {
-            "nameStyle": {
-              "opacity": 0.8
-            }
-          },
-          "unchecked": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "fill": "#D8D8D8",
-              "stroke": "#D8D8D8"
-            }
-          },
-          "inactive": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "opacity": 0.2
-            }
-          }
-        },
-        "flipPage": true,
-        "pageNavigator": {
-          "marker": {
-            "style": {
-              "size": 12,
-              "inactiveFill": "rgba(225, 225, 225, 1)",
-              "inactiveOpacity": 0.45,
-              "fill": "rgba(225, 225, 225, 1)",
-              "opacity": 1
-            }
-          },
-          "text": {
-            "style": {
-              "fill": "rgba(209, 209, 209, 1)",
-              "fontSize": 12
-            }
-          }
-        },
-        "animate": false,
-        "maxItemWidth": 200,
-        "itemSpacing": 24,
-        "itemMarginBottom": 12,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "right": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "left": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "top": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "bottom": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "continuous": {
-        "title": null,
-        "background": null,
-        "track": {},
-        "rail": {
-          "type": "color",
-          "size": 12,
-          "defaultLength": 100,
-          "style": {
-            "fill": "rgba(33, 33, 33, 1)",
-            "stroke": null,
-            "lineWidth": 0
-          }
-        },
-        "label": {
-          "align": "rail",
-          "spacing": 4,
-          "formatter": null,
-          "style": {
-            "fill": "rgba(209, 209, 209, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "handler": {
-          "size": 10,
-          "style": {
-            "fill": "#F0F0F0",
-            "stroke": "#BFBFBF"
-          }
-        },
-        "slidable": true,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      }
-    },
-    "tooltip": {
-      "showContent": true,
-      "follow": true,
-      "showCrosshairs": false,
-      "showMarkers": true,
-      "shared": false,
-      "enterable": false,
-      "position": "auto",
-      "marker": {
-        "symbol": "circle",
-        "stroke": "#fff",
-        "shadowBlur": 10,
-        "shadowOffsetX": 0,
-        "shadowOffsetY": 0,
-        "shadowColor": "rgba(0,0,0,0.09)",
-        "lineWidth": 2,
-        "r": 4
-      },
-      "crosshairs": {
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          }
-        },
-        "text": null,
-        "textBackground": {
-          "padding": 2,
-          "style": {
-            "fill": "rgba(0, 0, 0, 0.25)",
-            "lineWidth": 0,
-            "stroke": null
-          }
-        },
-        "follow": false
-      },
-      "domStyles": {
-        "g2-tooltip": {
-          "position": "absolute",
-          "visibility": "hidden",
-          "zIndex": 8,
-          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
-          "backgroundColor": "#1f1f1f",
-          "opacity": 0.95,
-          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
-          "borderRadius": 10,
-          "color": "rgba(241, 241, 241, 1)",
-          "fontSize": "12px",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-          "lineHeight": "12px",
-          "padding": "0 12px 0 12px"
-        },
-        "g2-tooltip-title": {
-          "marginBottom": "12px",
-          "marginTop": "12px"
-        },
-        "g2-tooltip-list": {
-          "margin": 0,
-          "listStyleType": "none",
-          "padding": 0
-        },
-        "g2-tooltip-list-item": {
-          "listStyleType": "none",
-          "padding": 0,
-          "marginBottom": "12px",
-          "marginTop": "12px",
-          "marginLeft": 0,
-          "marginRight": 0
-        },
-        "g2-tooltip-marker": {
-          "width": "8px",
-          "height": "8px",
-          "borderRadius": "50%",
-          "display": "inline-block",
-          "marginRight": "8px"
-        },
-        "g2-tooltip-value": {
-          "display": "inline-block",
-          "float": "right",
-          "marginLeft": "30px"
-        }
-      }
-    },
-    "annotation": {
-      "arc": {
-        "style": {
-          "stroke": "#262626",
-          "lineWidth": 1
-        },
-        "animate": true
-      },
-      "line": {
-        "style": {
-          "stroke": "#404040",
-          "lineDash": null,
-          "lineWidth": 1
-        },
-        "text": {
-          "position": "start",
-          "autoRotate": true,
-          "style": {
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "textAlign": "start",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "textBaseline": "bottom"
-          }
-        },
-        "animate": true
-      },
-      "text": {
-        "style": {
-          "fill": "#A6A6A6",
-          "stroke": null,
-          "lineWidth": 0,
-          "fontSize": 12,
-          "textBaseline": "middle",
-          "textAlign": "start",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-        },
-        "animate": true
-      },
-      "region": {
-        "top": false,
-        "style": {
-          "lineWidth": 0,
-          "stroke": null,
-          "fill": "#FFFFFF",
-          "fillOpacity": 0.06
-        },
-        "animate": true
-      },
-      "image": {
-        "top": false,
-        "animate": true
-      },
-      "dataMarker": {
-        "top": true,
-        "point": {
-          "style": {
-            "r": 3,
-            "stroke": "#5B8FF9",
-            "lineWidth": 2
-          }
-        },
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          },
-          "length": 16
-        },
-        "text": {
-          "style": {
-            "textAlign": "start",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "direction": "upward",
-        "autoAdjust": true,
-        "animate": true
-      },
-      "dataRegion": {
-        "style": {
-          "region": {
-            "fill": "#FFFFFF",
-            "fillOpacity": 0.06
-          },
-          "text": {
-            "textAlign": "center",
-            "textBaseline": "bottom",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "animate": true
-      }
-    },
-    "slider": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ],
-        "backgroundStyle": {
-          "fill": "#416180",
-          "opacity": 0.05
-        },
-        "foregroundStyle": {
-          "fill": "#5B8FF9",
-          "opacity": 0.1
-        },
-        "handlerStyle": {
-          "width": 10,
-          "height": 24,
-          "fill": "#F7F7F7",
-          "opacity": 1,
-          "stroke": "#BFBFBF",
-          "lineWidth": 1,
-          "radius": 2,
-          "highLightFill": "#FFF"
-        },
-        "textStyle": {
-          "fill": "#fff",
-          "opacity": 0.45,
-          "fontSize": 12,
-          "lineHeight": 12,
-          "fontWeight": "normal",
-          "stroke": null,
-          "lineWidth": 0
-        }
-      }
-    },
-    "scrollbar": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "default": {
-        "style": {
-          "trackColor": "rgba(25, 29, 41, 1)",
-          "thumbColor": "rgba(70, 71, 85, 1)"
-        }
-      },
-      "hover": {
-        "style": {
-          "thumbColor": "rgba(73, 82, 99, 1)"
-        }
-      }
-    }
-  },
-  "labels": {
-    "offset": 12,
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "fillColorDark": "#ffffff",
-    "fillColorLight": "#ffffff",
-    "autoRotate": true
-  },
-  "innerLabels": {
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "autoRotate": true
-  },
-  "overflowLabels": {
-    "style": {
-      "fill": "#ffffff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": "#000",
-      "lineWidth": 1
-    }
-  },
-  "pieLabels": {
-    "labelHeight": 12,
-    "offset": 10,
-    "labelLine": {
-      "style": {
-        "lineWidth": 1
-      }
-    },
-    "autoRotate": true
-  },
-  "bottom-axis-subTick-line": false,
-  "styleSheet": {
-    "brandColor": "#5B8FF9",
-    "paletteQualitative10": [
-      "#5B8FF9",
-      "#61DDAA",
-      "#65789B",
-      "#F6BD16",
-      "#7262fd",
-      "#78D3F8",
-      "#9661BC",
-      "#F6903D",
-      "#008685",
-      "#F08BB4"
-    ],
-    "paletteQualitative20": [
-      "#5B8FF9",
-      "#CDDDFD",
-      "#61DDAA",
-      "#CDF3E4",
-      "#65789B",
-      "#CED4DE",
-      "#F6BD16",
-      "#FCEBB9",
-      "#7262fd",
-      "#D3CEFD",
-      "#78D3F8",
-      "#D3EEF9",
-      "#9661BC",
-      "#DECFEA",
-      "#F6903D",
-      "#FFE0C7",
-      "#008685",
-      "#BBDEDE",
-      "#F08BB4",
-      "#FFE0ED"
-    ]
-  }
+{
+  "background": "transparent",
+  "subColor": "rgba(255, 255, 255, 0.05)",
+  "semanticRed": "rgba(244, 102, 74, 1)",
+  "semanticGreen": "rgba(37, 184, 100, 1)",
+  "padding": "auto",
+  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+  "columnWidthRatio": 0.5,
+  "maxColumnWidth": null,
+  "minColumnWidth": null,
+  "roseWidthRatio": 0.9999999,
+  "multiplePieWidthRatio": 0.7692307692307692,
+  "sequenceColors": [
+      "#e1ebff",
+      "#c2d8ff",
+      "#a0c5ff",
+      "#8ab5fe",
+      "#7aa7fc",
+      "#6898fa",
+      "#558af4",
+      "#427de4",
+      "#2b6fd5",
+      "#0362c5"
+  ],
+  "shapes": {
+    "point": [
+      "hollow-circle",
+      "hollow-square",
+      "hollow-bowtie",
+      "hollow-diamond",
+      "hollow-hexagon",
+      "hollow-triangle",
+      "hollow-triangle-down",
+      "circle",
+      "square",
+      "bowtie",
+      "diamond",
+      "hexagon",
+      "triangle",
+      "triangle-down",
+      "cross",
+      "tick",
+      "plus",
+      "hyphen",
+      "line"
+    ],
+    "line": [
+      "line",
+      "dash",
+      "dot",
+      "smooth"
+    ],
+    "area": [
+      "area",
+      "smooth",
+      "line",
+      "smooth-line"
+    ],
+    "interval": [
+      "rect",
+      "hollow-rect",
+      "line",
+      "tick"
+    ]
+  },
+  "sizes": [
+    1,
+    10
+  ],
+  "components": {
+    "axis": {
+      "common": {
+        "title": {
+          "autoRotate": true,
+          "position": "center",
+          "spacing": 12,
+          "style": {
+            "fill": "#f1f1f1",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "label": {
+          "autoRotate": false,
+          "autoEllipsis": false,
+          "autoHide": {
+            "type": "equidistance",
+            "cfg": {
+              "minGap": 6
+            }
+          },
+          "offset": 8,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "line": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 0.5,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "tickLine": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          },
+          "alignTick": true,
+          "length": 4
+        },
+        "subTickLine": null,
+        "animate": true
+      },
+      "top": {
+        "position": "top",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "bottom": {
+        "position": "bottom",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "left": {
+        "position": "left",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "right": {
+        "position": "right",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "circle": {
+        "title": null,
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 255, 1)"
+          }
+        },
+        "tickLine": {
+          "style": {
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        }
+      },
+      "radius": {
+        "title": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "circle",
+            "style": {
+              "stroke": "#262626",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        }
+      }
+    },
+    "legend": {
+      "common": {
+        "title": null,
+        "marker": {
+          "symbol": "circle",
+          "spacing": 8,
+          "style": {
+            "r": 4,
+            "fill": "#5B8FF9"
+          }
+        },
+        "itemName": {
+          "spacing": 5,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontWeight": "normal",
+            "textAlign": "start",
+            "textBaseline": "middle"
+          }
+        },
+        "itemStates": {
+          "active": {
+            "nameStyle": {
+              "opacity": 0.8
+            }
+          },
+          "unchecked": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "fill": "#D8D8D8",
+              "stroke": "#D8D8D8"
+            }
+          },
+          "inactive": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "opacity": 0.2
+            }
+          }
+        },
+        "flipPage": true,
+        "pageNavigator": {
+          "marker": {
+            "style": {
+              "size": 12,
+              "inactiveFill": "rgba(225, 225, 225, 1)",
+              "inactiveOpacity": 0.45,
+              "fill": "rgba(225, 225, 225, 1)",
+              "opacity": 1
+            }
+          },
+          "text": {
+            "style": {
+              "fill": "rgba(209, 209, 209, 1)",
+              "fontSize": 12
+            }
+          }
+        },
+        "animate": false,
+        "maxItemWidth": 200,
+        "itemSpacing": 24,
+        "itemMarginBottom": 12,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "right": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "left": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "top": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "bottom": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "continuous": {
+        "title": null,
+        "background": null,
+        "track": {},
+        "rail": {
+          "type": "color",
+          "size": 12,
+          "defaultLength": 100,
+          "style": {
+            "fill": "rgba(33, 33, 33, 1)",
+            "stroke": null,
+            "lineWidth": 0
+          }
+        },
+        "label": {
+          "align": "rail",
+          "spacing": 4,
+          "formatter": null,
+          "style": {
+            "fill": "rgba(209, 209, 209, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "handler": {
+          "size": 10,
+          "style": {
+            "fill": "#F0F0F0",
+            "stroke": "#BFBFBF"
+          }
+        },
+        "slidable": true,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      }
+    },
+    "tooltip": {
+      "showContent": true,
+      "follow": true,
+      "showCrosshairs": false,
+      "showMarkers": true,
+      "shared": false,
+      "enterable": false,
+      "position": "auto",
+      "marker": {
+        "symbol": "circle",
+        "stroke": "#fff",
+        "shadowBlur": 10,
+        "shadowOffsetX": 0,
+        "shadowOffsetY": 0,
+        "shadowColor": "rgba(0,0,0,0.09)",
+        "lineWidth": 2,
+        "r": 4
+      },
+      "crosshairs": {
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          }
+        },
+        "text": null,
+        "textBackground": {
+          "padding": 2,
+          "style": {
+            "fill": "rgba(0, 0, 0, 0.25)",
+            "lineWidth": 0,
+            "stroke": null
+          }
+        },
+        "follow": false
+      },
+      "domStyles": {
+        "g2-tooltip": {
+          "position": "absolute",
+          "visibility": "hidden",
+          "zIndex": 8,
+          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
+          "backgroundColor": "#1f1f1f",
+          "opacity": 0.95,
+          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
+          "borderRadius": 10,
+          "color": "rgba(241, 241, 241, 1)",
+          "fontSize": "12px",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+          "lineHeight": "12px",
+          "padding": "0 12px 0 12px"
+        },
+        "g2-tooltip-title": {
+          "marginBottom": "12px",
+          "marginTop": "12px"
+        },
+        "g2-tooltip-list": {
+          "margin": 0,
+          "listStyleType": "none",
+          "padding": 0
+        },
+        "g2-tooltip-list-item": {
+          "listStyleType": "none",
+          "padding": 0,
+          "marginBottom": "12px",
+          "marginTop": "12px",
+          "marginLeft": 0,
+          "marginRight": 0
+        },
+        "g2-tooltip-marker": {
+          "width": "8px",
+          "height": "8px",
+          "borderRadius": "50%",
+          "display": "inline-block",
+          "marginRight": "8px"
+        },
+        "g2-tooltip-value": {
+          "display": "inline-block",
+          "float": "right",
+          "marginLeft": "30px"
+        }
+      }
+    },
+    "annotation": {
+      "arc": {
+        "style": {
+          "stroke": "#262626",
+          "lineWidth": 1
+        },
+        "animate": true
+      },
+      "line": {
+        "style": {
+          "stroke": "#404040",
+          "lineDash": null,
+          "lineWidth": 1
+        },
+        "text": {
+          "position": "start",
+          "autoRotate": true,
+          "style": {
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "textAlign": "start",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "textBaseline": "bottom"
+          }
+        },
+        "animate": true
+      },
+      "text": {
+        "style": {
+          "fill": "#A6A6A6",
+          "stroke": null,
+          "lineWidth": 0,
+          "fontSize": 12,
+          "textBaseline": "middle",
+          "textAlign": "start",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+        },
+        "animate": true
+      },
+      "region": {
+        "top": false,
+        "style": {
+          "lineWidth": 0,
+          "stroke": null,
+          "fill": "#FFFFFF",
+          "fillOpacity": 0.06
+        },
+        "animate": true
+      },
+      "image": {
+        "top": false,
+        "animate": true
+      },
+      "dataMarker": {
+        "top": true,
+        "point": {
+          "style": {
+            "r": 3,
+            "stroke": "#5B8FF9",
+            "lineWidth": 2
+          }
+        },
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          },
+          "length": 16
+        },
+        "text": {
+          "style": {
+            "textAlign": "start",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "direction": "upward",
+        "autoAdjust": true,
+        "animate": true
+      },
+      "dataRegion": {
+        "style": {
+          "region": {
+            "fill": "#FFFFFF",
+            "fillOpacity": 0.06
+          },
+          "text": {
+            "textAlign": "center",
+            "textBaseline": "bottom",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "animate": true
+      }
+    },
+    "slider": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ],
+        "backgroundStyle": {
+          "fill": "#416180",
+          "opacity": 0.05
+        },
+        "foregroundStyle": {
+          "fill": "#5B8FF9",
+          "opacity": 0.1
+        },
+        "handlerStyle": {
+          "width": 10,
+          "height": 24,
+          "fill": "#F7F7F7",
+          "opacity": 1,
+          "stroke": "#BFBFBF",
+          "lineWidth": 1,
+          "radius": 2,
+          "highLightFill": "#FFF"
+        },
+        "textStyle": {
+          "fill": "#fff",
+          "opacity": 0.45,
+          "fontSize": 12,
+          "lineHeight": 12,
+          "fontWeight": "normal",
+          "stroke": null,
+          "lineWidth": 0
+        }
+      }
+    },
+    "scrollbar": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "default": {
+        "style": {
+          "trackColor": "rgba(25, 29, 41, 1)",
+          "thumbColor": "rgba(70, 71, 85, 1)"
+        }
+      },
+      "hover": {
+        "style": {
+          "thumbColor": "rgba(73, 82, 99, 1)"
+        }
+      }
+    }
+  },
+  "labels": {
+    "offset": 12,
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "fillColorDark": "#ffffff",
+    "fillColorLight": "#ffffff",
+    "autoRotate": true
+  },
+  "innerLabels": {
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "autoRotate": true
+  },
+  "overflowLabels": {
+    "style": {
+      "fill": "#ffffff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": "#000",
+      "lineWidth": 1
+    }
+  },
+  "pieLabels": {
+    "labelHeight": 12,
+    "offset": 10,
+    "labelLine": {
+      "style": {
+        "lineWidth": 1
+      }
+    },
+    "autoRotate": true
+  },
+  "bottom-axis-subTick-line": false,
+  "styleSheet": {
+    "brandColor": "#5B8FF9",
+    "paletteQualitative10": [
+      "#5B8FF9",
+      "#61DDAA",
+      "#65789B",
+      "#F6BD16",
+      "#7262fd",
+      "#78D3F8",
+      "#9661BC",
+      "#F6903D",
+      "#008685",
+      "#F08BB4"
+    ],
+    "paletteQualitative20": [
+      "#5B8FF9",
+      "#CDDDFD",
+      "#61DDAA",
+      "#CDF3E4",
+      "#65789B",
+      "#CED4DE",
+      "#F6BD16",
+      "#FCEBB9",
+      "#7262fd",
+      "#D3CEFD",
+      "#78D3F8",
+      "#D3EEF9",
+      "#9661BC",
+      "#DECFEA",
+      "#F6903D",
+      "#FFE0C7",
+      "#008685",
+      "#BBDEDE",
+      "#F08BB4",
+      "#FFE0ED"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/views/pages/report/statement/widgetthemes/theme-dark2.json b/src/views/pages/report/statement/widgetthemes/theme-dark2.json
index 43aa5e26..a7763675 100644
--- a/src/views/pages/report/statement/widgetthemes/theme-dark2.json
+++ b/src/views/pages/report/statement/widgetthemes/theme-dark2.json
@@ -1,691 +1,687 @@
-{
-  "background": "transparent",
-  "subColor": "rgba(255, 255, 255, 0.05)",
-  "semanticRed": "rgba(244, 102, 74, 1)",
-  "semanticGreen": "rgba(37, 184, 100, 1)",
-  "padding": "auto",
-  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-  "columnWidthRatio": 0.5,
-  "maxColumnWidth": null,
-  "minColumnWidth": null,
-  "roseWidthRatio": 0.9999999,
-  "multiplePieWidthRatio": 0.7692307692307692,
-  "sequenceColors": [
-      "#ffe1d0",
-      "#ffdecb",
-      "#ffbd99",
-      "#ff9d68",
-      "#ff8d59",
-      "#ff7d4a",
-      "#ff6b3b",
-      "#ec5b2c",
-      "#d84a1d",
-      "#c5390c"
-  ],
-  "shapes": {
-    "point": [
-      "hollow-circle",
-      "hollow-square",
-      "hollow-bowtie",
-      "hollow-diamond",
-      "hollow-hexagon",
-      "hollow-triangle",
-      "hollow-triangle-down",
-      "circle",
-      "square",
-      "bowtie",
-      "diamond",
-      "hexagon",
-      "triangle",
-      "triangle-down",
-      "cross",
-      "tick",
-      "plus",
-      "hyphen",
-      "line"
-    ],
-    "line": [
-      "line",
-      "dash",
-      "dot",
-      "smooth"
-    ],
-    "area": [
-      "area",
-      "smooth",
-      "line",
-      "smooth-line"
-    ],
-    "interval": [
-      "rect",
-      "hollow-rect",
-      "line",
-      "tick"
-    ]
-  },
-  "sizes": [
-    1,
-    10
-  ],
-  "components": {
-    "axis": {
-      "common": {
-        "title": {
-          "autoRotate": true,
-          "position": "center",
-          "spacing": 12,
-          "style": {
-            "fill": "#f1f1f1",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "label": {
-          "autoRotate": false,
-          "autoEllipsis": false,
-          "autoHide": {
-            "type": "equidistance",
-            "cfg": {
-              "minGap": 6
-            }
-          },
-          "offset": 8,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "line": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 0.5,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "tickLine": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          },
-          "alignTick": true,
-          "length": 4
-        },
-        "subTickLine": null,
-        "animate": true
-      },
-      "top": {
-        "position": "top",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "bottom": {
-        "position": "bottom",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "left": {
-        "position": "left",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "right": {
-        "position": "right",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "circle": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 255, 1)"
-          }
-        },
-        "tickLine": {
-          "style": {
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        }
-      },
-      "radius": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "circle",
-            "style": {
-              "stroke": "#262626",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        }
-      }
-    },
-    "legend": {
-      "common": {
-        "title": null,
-        "marker": {
-          "symbol": "circle",
-          "spacing": 8,
-          "style": {
-            "r": 4,
-            "fill": "#5B8FF9"
-          }
-        },
-        "itemName": {
-          "spacing": 5,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontWeight": "normal",
-            "textAlign": "start",
-            "textBaseline": "middle"
-          }
-        },
-        "itemStates": {
-          "active": {
-            "nameStyle": {
-              "opacity": 0.8
-            }
-          },
-          "unchecked": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "fill": "#D8D8D8",
-              "stroke": "#D8D8D8"
-            }
-          },
-          "inactive": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "opacity": 0.2
-            }
-          }
-        },
-        "flipPage": true,
-        "pageNavigator": {
-          "marker": {
-            "style": {
-              "size": 12,
-              "inactiveFill": "rgba(225, 225, 225, 1)",
-              "inactiveOpacity": 0.45,
-              "fill": "rgba(225, 225, 225, 1)",
-              "opacity": 1
-            }
-          },
-          "text": {
-            "style": {
-              "fill": "rgba(209, 209, 209, 1)",
-              "fontSize": 12
-            }
-          }
-        },
-        "animate": false,
-        "maxItemWidth": 200,
-        "itemSpacing": 24,
-        "itemMarginBottom": 12,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "right": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "left": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "top": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "bottom": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "continuous": {
-        "title": null,
-        "background": null,
-        "track": {},
-        "rail": {
-          "type": "color",
-          "size": 12,
-          "defaultLength": 100,
-          "style": {
-            "fill": "rgba(33, 33, 33, 1)",
-            "stroke": null,
-            "lineWidth": 0
-          }
-        },
-        "label": {
-          "align": "rail",
-          "spacing": 4,
-          "formatter": null,
-          "style": {
-            "fill": "rgba(209, 209, 209, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "handler": {
-          "size": 10,
-          "style": {
-            "fill": "#F0F0F0",
-            "stroke": "#BFBFBF"
-          }
-        },
-        "slidable": true,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      }
-    },
-    "tooltip": {
-      "showContent": true,
-      "follow": true,
-      "showCrosshairs": false,
-      "showMarkers": true,
-      "shared": false,
-      "enterable": false,
-      "position": "auto",
-      "marker": {
-        "symbol": "circle",
-        "stroke": "#fff",
-        "shadowBlur": 10,
-        "shadowOffsetX": 0,
-        "shadowOffsetY": 0,
-        "shadowColor": "rgba(0,0,0,0.09)",
-        "lineWidth": 2,
-        "r": 4
-      },
-      "crosshairs": {
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          }
-        },
-        "text": null,
-        "textBackground": {
-          "padding": 2,
-          "style": {
-            "fill": "rgba(0, 0, 0, 0.25)",
-            "lineWidth": 0,
-            "stroke": null
-          }
-        },
-        "follow": false
-      },
-      "domStyles": {
-        "g2-tooltip": {
-          "position": "absolute",
-          "visibility": "hidden",
-          "zIndex": 8,
-          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
-          "backgroundColor": "#1f1f1f",
-          "opacity": 0.95,
-          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
-          "borderRadius": 10,
-          "color": "rgba(241, 241, 241, 1)",
-          "fontSize": "12px",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-          "lineHeight": "12px",
-          "padding": "0 12px 0 12px"
-        },
-        "g2-tooltip-title": {
-          "marginBottom": "12px",
-          "marginTop": "12px"
-        },
-        "g2-tooltip-list": {
-          "margin": 0,
-          "listStyleType": "none",
-          "padding": 0
-        },
-        "g2-tooltip-list-item": {
-          "listStyleType": "none",
-          "padding": 0,
-          "marginBottom": "12px",
-          "marginTop": "12px",
-          "marginLeft": 0,
-          "marginRight": 0
-        },
-        "g2-tooltip-marker": {
-          "width": "8px",
-          "height": "8px",
-          "borderRadius": "50%",
-          "display": "inline-block",
-          "marginRight": "8px"
-        },
-        "g2-tooltip-value": {
-          "display": "inline-block",
-          "float": "right",
-          "marginLeft": "30px"
-        }
-      }
-    },
-    "annotation": {
-      "arc": {
-        "style": {
-          "stroke": "#262626",
-          "lineWidth": 1
-        },
-        "animate": true
-      },
-      "line": {
-        "style": {
-          "stroke": "#404040",
-          "lineDash": null,
-          "lineWidth": 1
-        },
-        "text": {
-          "position": "start",
-          "autoRotate": true,
-          "style": {
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "textAlign": "start",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "textBaseline": "bottom"
-          }
-        },
-        "animate": true
-      },
-      "text": {
-        "style": {
-          "fill": "#A6A6A6",
-          "stroke": null,
-          "lineWidth": 0,
-          "fontSize": 12,
-          "textBaseline": "middle",
-          "textAlign": "start",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-        },
-        "animate": true
-      },
-      "region": {
-        "top": false,
-        "style": {
-          "lineWidth": 0,
-          "stroke": null,
-          "fill": "#FFFFFF",
-          "fillOpacity": 0.06
-        },
-        "animate": true
-      },
-      "image": {
-        "top": false,
-        "animate": true
-      },
-      "dataMarker": {
-        "top": true,
-        "point": {
-          "style": {
-            "r": 3,
-            "stroke": "#5B8FF9",
-            "lineWidth": 2
-          }
-        },
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          },
-          "length": 16
-        },
-        "text": {
-          "style": {
-            "textAlign": "start",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "direction": "upward",
-        "autoAdjust": true,
-        "animate": true
-      },
-      "dataRegion": {
-        "style": {
-          "region": {
-            "fill": "#FFFFFF",
-            "fillOpacity": 0.06
-          },
-          "text": {
-            "textAlign": "center",
-            "textBaseline": "bottom",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "animate": true
-      }
-    },
-    "slider": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ],
-        "backgroundStyle": {
-          "fill": "#416180",
-          "opacity": 0.05
-        },
-        "foregroundStyle": {
-          "fill": "#5B8FF9",
-          "opacity": 0.1
-        },
-        "handlerStyle": {
-          "width": 10,
-          "height": 24,
-          "fill": "#F7F7F7",
-          "opacity": 1,
-          "stroke": "#BFBFBF",
-          "lineWidth": 1,
-          "radius": 2,
-          "highLightFill": "#FFF"
-        },
-        "textStyle": {
-          "fill": "#fff",
-          "opacity": 0.45,
-          "fontSize": 12,
-          "lineHeight": 12,
-          "fontWeight": "normal",
-          "stroke": null,
-          "lineWidth": 0
-        }
-      }
-    },
-    "scrollbar": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "default": {
-        "style": {
-          "trackColor": "rgba(25, 29, 41, 1)",
-          "thumbColor": "rgba(70, 71, 85, 1)"
-        }
-      },
-      "hover": {
-        "style": {
-          "thumbColor": "rgba(73, 82, 99, 1)"
-        }
-      }
-    }
-  },
-  "labels": {
-    "offset": 12,
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "fillColorDark": "#ffffff",
-    "fillColorLight": "#ffffff",
-    "autoRotate": true
-  },
-  "innerLabels": {
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "autoRotate": true
-  },
-  "overflowLabels": {
-    "style": {
-      "fill": "#ffffff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": "#000",
-      "lineWidth": 1
-    }
-  },
-  "pieLabels": {
-    "labelHeight": 12,
-    "offset": 10,
-    "labelLine": {
-      "style": {
-        "lineWidth": 1
-      }
-    },
-    "autoRotate": true
-  },
-  "bottom-axis-subTick-line": false,
-  "styleSheet": {
-    "brandColor": "#FF6B3B",
-    "paletteQualitative10": [
-      "#FF6B3B",
-      "#626681",
-      "#FFC100",
-      "#9FB40F",
-      "#76523B",
-      "#DAD5B5",
-      "#0E8E89",
-      "#E19348",
-      "#F383A2",
-      "#247FEA"
-    ],
-    "paletteQualitative20": [
-      "#FF6B3B",
-      "#626681",
-      "#FFC100",
-      "#9FB40F",
-      "#76523B",
-      "#DAD5B5",
-      "#0E8E89",
-      "#E19348",
-      "#F383A2",
-      "#247FEA",
-      "#2BCB95",
-      "#B1ABF4",
-      "#1D42C2",
-      "#1D9ED1",
-      "#D64BC0",
-      "#255634",
-      "#8C8C47",
-      "#8CDAE5",
-      "#8E283B",
-      "#791DC9"
-    ]
-  }
+{
+  "background": "transparent",
+  "subColor": "rgba(255, 255, 255, 0.05)",
+  "semanticRed": "rgba(244, 102, 74, 1)",
+  "semanticGreen": "rgba(37, 184, 100, 1)",
+  "padding": "auto",
+  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+  "columnWidthRatio": 0.5,
+  "maxColumnWidth": null,
+  "minColumnWidth": null,
+  "roseWidthRatio": 0.9999999,
+  "multiplePieWidthRatio": 0.7692307692307692,
+  "sequenceColors": [
+      "#ffe1d0",
+      "#ffdecb",
+      "#ffbd99",
+      "#ff9d68",
+      "#ff8d59",
+      "#ff7d4a",
+      "#ff6b3b",
+      "#ec5b2c",
+      "#d84a1d",
+      "#c5390c"
+  ],
+  "shapes": {
+    "point": [
+      "hollow-circle",
+      "hollow-square",
+      "hollow-bowtie",
+      "hollow-diamond",
+      "hollow-hexagon",
+      "hollow-triangle",
+      "hollow-triangle-down",
+      "circle",
+      "square",
+      "bowtie",
+      "diamond",
+      "hexagon",
+      "triangle",
+      "triangle-down",
+      "cross",
+      "tick",
+      "plus",
+      "hyphen",
+      "line"
+    ],
+    "line": [
+      "line",
+      "dash",
+      "dot",
+      "smooth"
+    ],
+    "area": [
+      "area",
+      "smooth",
+      "line",
+      "smooth-line"
+    ],
+    "interval": [
+      "rect",
+      "hollow-rect",
+      "line",
+      "tick"
+    ]
+  },
+  "sizes": [
+    1,
+    10
+  ],
+  "components": {
+    "axis": {
+      "common": {
+        "title": {
+          "autoRotate": true,
+          "position": "center",
+          "spacing": 12,
+          "style": {
+            "fill": "#f1f1f1",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "label": {
+          "autoRotate": false,
+          "autoEllipsis": false,
+          "autoHide": {
+            "type": "equidistance",
+            "cfg": {
+              "minGap": 6
+            }
+          },
+          "offset": 8,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "line": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 0.5,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "tickLine": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          },
+          "alignTick": true,
+          "length": 4
+        },
+        "subTickLine": null,
+        "animate": true
+      },
+      "top": {
+        "position": "top",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "bottom": {
+        "position": "bottom",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "left": {
+        "position": "left",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "right": {
+        "position": "right",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "circle": {
+        "title": null,
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 255, 1)"
+          }
+        },
+        "tickLine": {
+          "style": {
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        }
+      },
+      "radius": {
+        "title": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "circle",
+            "style": {
+              "stroke": "#262626",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        }
+      }
+    },
+    "legend": {
+      "common": {
+        "title": null,
+        "marker": {
+          "symbol": "circle",
+          "spacing": 8,
+          "style": {
+            "r": 4,
+            "fill": "#5B8FF9"
+          }
+        },
+        "itemName": {
+          "spacing": 5,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontWeight": "normal",
+            "textAlign": "start",
+            "textBaseline": "middle"
+          }
+        },
+        "itemStates": {
+          "active": {
+            "nameStyle": {
+              "opacity": 0.8
+            }
+          },
+          "unchecked": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "fill": "#D8D8D8",
+              "stroke": "#D8D8D8"
+            }
+          },
+          "inactive": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "opacity": 0.2
+            }
+          }
+        },
+        "flipPage": true,
+        "pageNavigator": {
+          "marker": {
+            "style": {
+              "size": 12,
+              "inactiveFill": "rgba(225, 225, 225, 1)",
+              "inactiveOpacity": 0.45,
+              "fill": "rgba(225, 225, 225, 1)",
+              "opacity": 1
+            }
+          },
+          "text": {
+            "style": {
+              "fill": "rgba(209, 209, 209, 1)",
+              "fontSize": 12
+            }
+          }
+        },
+        "animate": false,
+        "maxItemWidth": 200,
+        "itemSpacing": 24,
+        "itemMarginBottom": 12,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "right": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "left": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "top": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "bottom": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "continuous": {
+        "title": null,
+        "background": null,
+        "track": {},
+        "rail": {
+          "type": "color",
+          "size": 12,
+          "defaultLength": 100,
+          "style": {
+            "fill": "rgba(33, 33, 33, 1)",
+            "stroke": null,
+            "lineWidth": 0
+          }
+        },
+        "label": {
+          "align": "rail",
+          "spacing": 4,
+          "formatter": null,
+          "style": {
+            "fill": "rgba(209, 209, 209, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "handler": {
+          "size": 10,
+          "style": {
+            "fill": "#F0F0F0",
+            "stroke": "#BFBFBF"
+          }
+        },
+        "slidable": true,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      }
+    },
+    "tooltip": {
+      "showContent": true,
+      "follow": true,
+      "showCrosshairs": false,
+      "showMarkers": true,
+      "shared": false,
+      "enterable": false,
+      "position": "auto",
+      "marker": {
+        "symbol": "circle",
+        "stroke": "#fff",
+        "shadowBlur": 10,
+        "shadowOffsetX": 0,
+        "shadowOffsetY": 0,
+        "shadowColor": "rgba(0,0,0,0.09)",
+        "lineWidth": 2,
+        "r": 4
+      },
+      "crosshairs": {
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          }
+        },
+        "text": null,
+        "textBackground": {
+          "padding": 2,
+          "style": {
+            "fill": "rgba(0, 0, 0, 0.25)",
+            "lineWidth": 0,
+            "stroke": null
+          }
+        },
+        "follow": false
+      },
+      "domStyles": {
+        "g2-tooltip": {
+          "position": "absolute",
+          "visibility": "hidden",
+          "zIndex": 8,
+          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
+          "backgroundColor": "#1f1f1f",
+          "opacity": 0.95,
+          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
+          "borderRadius": 10,
+          "color": "rgba(241, 241, 241, 1)",
+          "fontSize": "12px",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+          "lineHeight": "12px",
+          "padding": "0 12px 0 12px"
+        },
+        "g2-tooltip-title": {
+          "marginBottom": "12px",
+          "marginTop": "12px"
+        },
+        "g2-tooltip-list": {
+          "margin": 0,
+          "listStyleType": "none",
+          "padding": 0
+        },
+        "g2-tooltip-list-item": {
+          "listStyleType": "none",
+          "padding": 0,
+          "marginBottom": "12px",
+          "marginTop": "12px",
+          "marginLeft": 0,
+          "marginRight": 0
+        },
+        "g2-tooltip-marker": {
+          "width": "8px",
+          "height": "8px",
+          "borderRadius": "50%",
+          "display": "inline-block",
+          "marginRight": "8px"
+        },
+        "g2-tooltip-value": {
+          "display": "inline-block",
+          "float": "right",
+          "marginLeft": "30px"
+        }
+      }
+    },
+    "annotation": {
+      "arc": {
+        "style": {
+          "stroke": "#262626",
+          "lineWidth": 1
+        },
+        "animate": true
+      },
+      "line": {
+        "style": {
+          "stroke": "#404040",
+          "lineDash": null,
+          "lineWidth": 1
+        },
+        "text": {
+          "position": "start",
+          "autoRotate": true,
+          "style": {
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "textAlign": "start",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "textBaseline": "bottom"
+          }
+        },
+        "animate": true
+      },
+      "text": {
+        "style": {
+          "fill": "#A6A6A6",
+          "stroke": null,
+          "lineWidth": 0,
+          "fontSize": 12,
+          "textBaseline": "middle",
+          "textAlign": "start",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+        },
+        "animate": true
+      },
+      "region": {
+        "top": false,
+        "style": {
+          "lineWidth": 0,
+          "stroke": null,
+          "fill": "#FFFFFF",
+          "fillOpacity": 0.06
+        },
+        "animate": true
+      },
+      "image": {
+        "top": false,
+        "animate": true
+      },
+      "dataMarker": {
+        "top": true,
+        "point": {
+          "style": {
+            "r": 3,
+            "stroke": "#5B8FF9",
+            "lineWidth": 2
+          }
+        },
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          },
+          "length": 16
+        },
+        "text": {
+          "style": {
+            "textAlign": "start",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "direction": "upward",
+        "autoAdjust": true,
+        "animate": true
+      },
+      "dataRegion": {
+        "style": {
+          "region": {
+            "fill": "#FFFFFF",
+            "fillOpacity": 0.06
+          },
+          "text": {
+            "textAlign": "center",
+            "textBaseline": "bottom",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "animate": true
+      }
+    },
+    "slider": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ],
+        "backgroundStyle": {
+          "fill": "#416180",
+          "opacity": 0.05
+        },
+        "foregroundStyle": {
+          "fill": "#5B8FF9",
+          "opacity": 0.1
+        },
+        "handlerStyle": {
+          "width": 10,
+          "height": 24,
+          "fill": "#F7F7F7",
+          "opacity": 1,
+          "stroke": "#BFBFBF",
+          "lineWidth": 1,
+          "radius": 2,
+          "highLightFill": "#FFF"
+        },
+        "textStyle": {
+          "fill": "#fff",
+          "opacity": 0.45,
+          "fontSize": 12,
+          "lineHeight": 12,
+          "fontWeight": "normal",
+          "stroke": null,
+          "lineWidth": 0
+        }
+      }
+    },
+    "scrollbar": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "default": {
+        "style": {
+          "trackColor": "rgba(25, 29, 41, 1)",
+          "thumbColor": "rgba(70, 71, 85, 1)"
+        }
+      },
+      "hover": {
+        "style": {
+          "thumbColor": "rgba(73, 82, 99, 1)"
+        }
+      }
+    }
+  },
+  "labels": {
+    "offset": 12,
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "fillColorDark": "#ffffff",
+    "fillColorLight": "#ffffff",
+    "autoRotate": true
+  },
+  "innerLabels": {
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "autoRotate": true
+  },
+  "overflowLabels": {
+    "style": {
+      "fill": "#ffffff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": "#000",
+      "lineWidth": 1
+    }
+  },
+  "pieLabels": {
+    "labelHeight": 12,
+    "offset": 10,
+    "labelLine": {
+      "style": {
+        "lineWidth": 1
+      }
+    },
+    "autoRotate": true
+  },
+  "bottom-axis-subTick-line": false,
+  "styleSheet": {
+    "brandColor": "#FF6B3B",
+    "paletteQualitative10": [
+      "#FF6B3B",
+      "#626681",
+      "#FFC100",
+      "#9FB40F",
+      "#76523B",
+      "#DAD5B5",
+      "#0E8E89",
+      "#E19348",
+      "#F383A2",
+      "#247FEA"
+    ],
+    "paletteQualitative20": [
+      "#FF6B3B",
+      "#626681",
+      "#FFC100",
+      "#9FB40F",
+      "#76523B",
+      "#DAD5B5",
+      "#0E8E89",
+      "#E19348",
+      "#F383A2",
+      "#247FEA",
+      "#2BCB95",
+      "#B1ABF4",
+      "#1D42C2",
+      "#1D9ED1",
+      "#D64BC0",
+      "#255634",
+      "#8C8C47",
+      "#8CDAE5",
+      "#8E283B",
+      "#791DC9"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/views/pages/report/statement/widgetthemes/theme-dark3.json b/src/views/pages/report/statement/widgetthemes/theme-dark3.json
index 656792a5..3f89382f 100644
--- a/src/views/pages/report/statement/widgetthemes/theme-dark3.json
+++ b/src/views/pages/report/statement/widgetthemes/theme-dark3.json
@@ -1,691 +1,687 @@
-{
-  "background": "transparent",
-  "subColor": "rgba(255, 255, 255, 0.05)",
-  "semanticRed": "rgba(244, 102, 74, 1)",
-  "semanticGreen": "rgba(37, 184, 100, 1)",
-  "padding": "auto",
-  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-  "columnWidthRatio": 0.5,
-  "maxColumnWidth": null,
-  "minColumnWidth": null,
-  "roseWidthRatio": 0.9999999,
-  "multiplePieWidthRatio": 0.7692307692307692,
-  "sequenceColors": [
-    "#d8daff",
-    "#aeb6ff",
-    "#7d94ff",
-    "#5d80fd",
-    "#4973fa",
-    "#2d66f6",
-    "#0359ef",
-    "#034ddf",
-    "#0241cf",
-    "#0035c0"
-  ],
-  "shapes": {
-    "point": [
-      "hollow-circle",
-      "hollow-square",
-      "hollow-bowtie",
-      "hollow-diamond",
-      "hollow-hexagon",
-      "hollow-triangle",
-      "hollow-triangle-down",
-      "circle",
-      "square",
-      "bowtie",
-      "diamond",
-      "hexagon",
-      "triangle",
-      "triangle-down",
-      "cross",
-      "tick",
-      "plus",
-      "hyphen",
-      "line"
-    ],
-    "line": [
-      "line",
-      "dash",
-      "dot",
-      "smooth"
-    ],
-    "area": [
-      "area",
-      "smooth",
-      "line",
-      "smooth-line"
-    ],
-    "interval": [
-      "rect",
-      "hollow-rect",
-      "line",
-      "tick"
-    ]
-  },
-  "sizes": [
-    1,
-    10
-  ],
-  "components": {
-    "axis": {
-      "common": {
-        "title": {
-          "autoRotate": true,
-          "position": "center",
-          "spacing": 12,
-          "style": {
-            "fill": "#f1f1f1",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "label": {
-          "autoRotate": false,
-          "autoEllipsis": false,
-          "autoHide": {
-            "type": "equidistance",
-            "cfg": {
-              "minGap": 6
-            }
-          },
-          "offset": 8,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "line": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 0.5,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "tickLine": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          },
-          "alignTick": true,
-          "length": 4
-        },
-        "subTickLine": null,
-        "animate": true
-      },
-      "top": {
-        "position": "top",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "bottom": {
-        "position": "bottom",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "left": {
-        "position": "left",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "right": {
-        "position": "right",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "circle": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 255, 1)"
-          }
-        },
-        "tickLine": {
-          "style": {
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        }
-      },
-      "radius": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "circle",
-            "style": {
-              "stroke": "#262626",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        }
-      }
-    },
-    "legend": {
-      "common": {
-        "title": null,
-        "marker": {
-          "symbol": "circle",
-          "spacing": 8,
-          "style": {
-            "r": 4,
-            "fill": "#5B8FF9"
-          }
-        },
-        "itemName": {
-          "spacing": 5,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontWeight": "normal",
-            "textAlign": "start",
-            "textBaseline": "middle"
-          }
-        },
-        "itemStates": {
-          "active": {
-            "nameStyle": {
-              "opacity": 0.8
-            }
-          },
-          "unchecked": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "fill": "#D8D8D8",
-              "stroke": "#D8D8D8"
-            }
-          },
-          "inactive": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "opacity": 0.2
-            }
-          }
-        },
-        "flipPage": true,
-        "pageNavigator": {
-          "marker": {
-            "style": {
-              "size": 12,
-              "inactiveFill": "rgba(225, 225, 225, 1)",
-              "inactiveOpacity": 0.45,
-              "fill": "rgba(225, 225, 225, 1)",
-              "opacity": 1
-            }
-          },
-          "text": {
-            "style": {
-              "fill": "rgba(209, 209, 209, 1)",
-              "fontSize": 12
-            }
-          }
-        },
-        "animate": false,
-        "maxItemWidth": 200,
-        "itemSpacing": 24,
-        "itemMarginBottom": 12,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "right": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "left": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "top": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "bottom": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "continuous": {
-        "title": null,
-        "background": null,
-        "track": {},
-        "rail": {
-          "type": "color",
-          "size": 12,
-          "defaultLength": 100,
-          "style": {
-            "fill": "rgba(33, 33, 33, 1)",
-            "stroke": null,
-            "lineWidth": 0
-          }
-        },
-        "label": {
-          "align": "rail",
-          "spacing": 4,
-          "formatter": null,
-          "style": {
-            "fill": "rgba(209, 209, 209, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "handler": {
-          "size": 10,
-          "style": {
-            "fill": "#F0F0F0",
-            "stroke": "#BFBFBF"
-          }
-        },
-        "slidable": true,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      }
-    },
-    "tooltip": {
-      "showContent": true,
-      "follow": true,
-      "showCrosshairs": false,
-      "showMarkers": true,
-      "shared": false,
-      "enterable": false,
-      "position": "auto",
-      "marker": {
-        "symbol": "circle",
-        "stroke": "#fff",
-        "shadowBlur": 10,
-        "shadowOffsetX": 0,
-        "shadowOffsetY": 0,
-        "shadowColor": "rgba(0,0,0,0.09)",
-        "lineWidth": 2,
-        "r": 4
-      },
-      "crosshairs": {
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          }
-        },
-        "text": null,
-        "textBackground": {
-          "padding": 2,
-          "style": {
-            "fill": "rgba(0, 0, 0, 0.25)",
-            "lineWidth": 0,
-            "stroke": null
-          }
-        },
-        "follow": false
-      },
-      "domStyles": {
-        "g2-tooltip": {
-          "position": "absolute",
-          "visibility": "hidden",
-          "zIndex": 8,
-          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
-          "backgroundColor": "#1f1f1f",
-          "opacity": 0.95,
-          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
-          "borderRadius": 10,
-          "color": "rgba(241, 241, 241, 1)",
-          "fontSize": "12px",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-          "lineHeight": "12px",
-          "padding": "0 12px 0 12px"
-        },
-        "g2-tooltip-title": {
-          "marginBottom": "12px",
-          "marginTop": "12px"
-        },
-        "g2-tooltip-list": {
-          "margin": 0,
-          "listStyleType": "none",
-          "padding": 0
-        },
-        "g2-tooltip-list-item": {
-          "listStyleType": "none",
-          "padding": 0,
-          "marginBottom": "12px",
-          "marginTop": "12px",
-          "marginLeft": 0,
-          "marginRight": 0
-        },
-        "g2-tooltip-marker": {
-          "width": "8px",
-          "height": "8px",
-          "borderRadius": "50%",
-          "display": "inline-block",
-          "marginRight": "8px"
-        },
-        "g2-tooltip-value": {
-          "display": "inline-block",
-          "float": "right",
-          "marginLeft": "30px"
-        }
-      }
-    },
-    "annotation": {
-      "arc": {
-        "style": {
-          "stroke": "#262626",
-          "lineWidth": 1
-        },
-        "animate": true
-      },
-      "line": {
-        "style": {
-          "stroke": "#404040",
-          "lineDash": null,
-          "lineWidth": 1
-        },
-        "text": {
-          "position": "start",
-          "autoRotate": true,
-          "style": {
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "textAlign": "start",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "textBaseline": "bottom"
-          }
-        },
-        "animate": true
-      },
-      "text": {
-        "style": {
-          "fill": "#A6A6A6",
-          "stroke": null,
-          "lineWidth": 0,
-          "fontSize": 12,
-          "textBaseline": "middle",
-          "textAlign": "start",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-        },
-        "animate": true
-      },
-      "region": {
-        "top": false,
-        "style": {
-          "lineWidth": 0,
-          "stroke": null,
-          "fill": "#FFFFFF",
-          "fillOpacity": 0.06
-        },
-        "animate": true
-      },
-      "image": {
-        "top": false,
-        "animate": true
-      },
-      "dataMarker": {
-        "top": true,
-        "point": {
-          "style": {
-            "r": 3,
-            "stroke": "#5B8FF9",
-            "lineWidth": 2
-          }
-        },
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          },
-          "length": 16
-        },
-        "text": {
-          "style": {
-            "textAlign": "start",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "direction": "upward",
-        "autoAdjust": true,
-        "animate": true
-      },
-      "dataRegion": {
-        "style": {
-          "region": {
-            "fill": "#FFFFFF",
-            "fillOpacity": 0.06
-          },
-          "text": {
-            "textAlign": "center",
-            "textBaseline": "bottom",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "animate": true
-      }
-    },
-    "slider": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ],
-        "backgroundStyle": {
-          "fill": "#416180",
-          "opacity": 0.05
-        },
-        "foregroundStyle": {
-          "fill": "#5B8FF9",
-          "opacity": 0.1
-        },
-        "handlerStyle": {
-          "width": 10,
-          "height": 24,
-          "fill": "#F7F7F7",
-          "opacity": 1,
-          "stroke": "#BFBFBF",
-          "lineWidth": 1,
-          "radius": 2,
-          "highLightFill": "#FFF"
-        },
-        "textStyle": {
-          "fill": "#fff",
-          "opacity": 0.45,
-          "fontSize": 12,
-          "lineHeight": 12,
-          "fontWeight": "normal",
-          "stroke": null,
-          "lineWidth": 0
-        }
-      }
-    },
-    "scrollbar": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "default": {
-        "style": {
-          "trackColor": "rgba(25, 29, 41, 1)",
-          "thumbColor": "rgba(70, 71, 85, 1)"
-        }
-      },
-      "hover": {
-        "style": {
-          "thumbColor": "rgba(73, 82, 99, 1)"
-        }
-      }
-    }
-  },
-  "labels": {
-    "offset": 12,
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "fillColorDark": "#ffffff",
-    "fillColorLight": "#ffffff",
-    "autoRotate": true
-  },
-  "innerLabels": {
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "autoRotate": true
-  },
-  "overflowLabels": {
-    "style": {
-      "fill": "#ffffff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": "#000",
-      "lineWidth": 1
-    }
-  },
-  "pieLabels": {
-    "labelHeight": 12,
-    "offset": 10,
-    "labelLine": {
-      "style": {
-        "lineWidth": 1
-      }
-    },
-    "autoRotate": true
-  },
-  "bottom-axis-subTick-line": false,
-  "styleSheet": {
-    "brandColor": "#025DF4",
-    "paletteQualitative10": [
-      "#025DF4",
-      "#DB6BCF",
-      "#2498D1",
-      "#BBBDE6",
-      "#4045B2",
-      "#21A97A",
-      "#FF745A",
-      "#007E99",
-      "#FFA8A8",
-      "#2391FF"
-    ],
-    "paletteQualitative20": [
-      "#025DF4",
-      "#DB6BCF",
-      "#2498D1",
-      "#BBBDE6",
-      "#4045B2",
-      "#21A97A",
-      "#FF745A",
-      "#007E99",
-      "#FFA8A8",
-      "#2391FF",
-      "#FFC328",
-      "#A0DC2C",
-      "#946DFF",
-      "#626681",
-      "#EB4185",
-      "#CD8150",
-      "#36BCCB",
-      "#327039",
-      "#803488",
-      "#83BC99"
-    ]
-  }
+{
+  "background": "transparent",
+  "subColor": "rgba(255, 255, 255, 0.05)",
+  "semanticRed": "rgba(244, 102, 74, 1)",
+  "semanticGreen": "rgba(37, 184, 100, 1)",
+  "padding": "auto",
+  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+  "columnWidthRatio": 0.5,
+  "maxColumnWidth": null,
+  "minColumnWidth": null,
+  "roseWidthRatio": 0.9999999,
+  "multiplePieWidthRatio": 0.7692307692307692,
+  "sequenceColors": [
+    "#d8daff",
+    "#aeb6ff",
+    "#7d94ff",
+    "#5d80fd",
+    "#4973fa",
+    "#2d66f6",
+    "#0359ef",
+    "#034ddf",
+    "#0241cf",
+    "#0035c0"
+  ],
+  "shapes": {
+    "point": [
+      "hollow-circle",
+      "hollow-square",
+      "hollow-bowtie",
+      "hollow-diamond",
+      "hollow-hexagon",
+      "hollow-triangle",
+      "hollow-triangle-down",
+      "circle",
+      "square",
+      "bowtie",
+      "diamond",
+      "hexagon",
+      "triangle",
+      "triangle-down",
+      "cross",
+      "tick",
+      "plus",
+      "hyphen",
+      "line"
+    ],
+    "line": [
+      "line",
+      "dash",
+      "dot",
+      "smooth"
+    ],
+    "area": [
+      "area",
+      "smooth",
+      "line",
+      "smooth-line"
+    ],
+    "interval": [
+      "rect",
+      "hollow-rect",
+      "line",
+      "tick"
+    ]
+  },
+  "sizes": [
+    1,
+    10
+  ],
+  "components": {
+    "axis": {
+      "common": {
+        "title": {
+          "autoRotate": true,
+          "position": "center",
+          "spacing": 12,
+          "style": {
+            "fill": "#f1f1f1",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "label": {
+          "autoRotate": false,
+          "autoEllipsis": false,
+          "autoHide": {
+            "type": "equidistance",
+            "cfg": {
+              "minGap": 6
+            }
+          },
+          "offset": 8,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "line": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 0.5,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "tickLine": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          },
+          "alignTick": true,
+          "length": 4
+        },
+        "subTickLine": null,
+        "animate": true
+      },
+      "top": {
+        "position": "top",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "bottom": {
+        "position": "bottom",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "left": {
+        "position": "left",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "right": {
+        "position": "right",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "circle": {
+        "title": null,
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 255, 1)"
+          }
+        },
+        "tickLine": {
+          "style": {
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        }
+      },
+      "radius": {
+        "title": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "circle",
+            "style": {
+              "stroke": "#262626",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        }
+      }
+    },
+    "legend": {
+      "common": {
+        "title": null,
+        "marker": {
+          "symbol": "circle",
+          "spacing": 8,
+          "style": {
+            "r": 4,
+            "fill": "#5B8FF9"
+          }
+        },
+        "itemName": {
+          "spacing": 5,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontWeight": "normal",
+            "textAlign": "start",
+            "textBaseline": "middle"
+          }
+        },
+        "itemStates": {
+          "active": {
+            "nameStyle": {
+              "opacity": 0.8
+            }
+          },
+          "unchecked": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "fill": "#D8D8D8",
+              "stroke": "#D8D8D8"
+            }
+          },
+          "inactive": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "opacity": 0.2
+            }
+          }
+        },
+        "flipPage": true,
+        "pageNavigator": {
+          "marker": {
+            "style": {
+              "size": 12,
+              "inactiveFill": "rgba(225, 225, 225, 1)",
+              "inactiveOpacity": 0.45,
+              "fill": "rgba(225, 225, 225, 1)",
+              "opacity": 1
+            }
+          },
+          "text": {
+            "style": {
+              "fill": "rgba(209, 209, 209, 1)",
+              "fontSize": 12
+            }
+          }
+        },
+        "animate": false,
+        "maxItemWidth": 200,
+        "itemSpacing": 24,
+        "itemMarginBottom": 12,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "right": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "left": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "top": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "bottom": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "continuous": {
+        "title": null,
+        "background": null,
+        "track": {},
+        "rail": {
+          "type": "color",
+          "size": 12,
+          "defaultLength": 100,
+          "style": {
+            "fill": "rgba(33, 33, 33, 1)",
+            "stroke": null,
+            "lineWidth": 0
+          }
+        },
+        "label": {
+          "align": "rail",
+          "spacing": 4,
+          "formatter": null,
+          "style": {
+            "fill": "rgba(209, 209, 209, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "handler": {
+          "size": 10,
+          "style": {
+            "fill": "#F0F0F0",
+            "stroke": "#BFBFBF"
+          }
+        },
+        "slidable": true,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      }
+    },
+    "tooltip": {
+      "showContent": true,
+      "follow": true,
+      "showCrosshairs": false,
+      "showMarkers": true,
+      "shared": false,
+      "enterable": false,
+      "position": "auto",
+      "marker": {
+        "symbol": "circle",
+        "stroke": "#fff",
+        "shadowBlur": 10,
+        "shadowOffsetX": 0,
+        "shadowOffsetY": 0,
+        "shadowColor": "rgba(0,0,0,0.09)",
+        "lineWidth": 2,
+        "r": 4
+      },
+      "crosshairs": {
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          }
+        },
+        "text": null,
+        "textBackground": {
+          "padding": 2,
+          "style": {
+            "fill": "rgba(0, 0, 0, 0.25)",
+            "lineWidth": 0,
+            "stroke": null
+          }
+        },
+        "follow": false
+      },
+      "domStyles": {
+        "g2-tooltip": {
+          "position": "absolute",
+          "visibility": "hidden",
+          "zIndex": 8,
+          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
+          "backgroundColor": "#1f1f1f",
+          "opacity": 0.95,
+          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
+          "borderRadius": 10,
+          "color": "rgba(241, 241, 241, 1)",
+          "fontSize": "12px",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+          "lineHeight": "12px",
+          "padding": "0 12px 0 12px"
+        },
+        "g2-tooltip-title": {
+          "marginBottom": "12px",
+          "marginTop": "12px"
+        },
+        "g2-tooltip-list": {
+          "margin": 0,
+          "listStyleType": "none",
+          "padding": 0
+        },
+        "g2-tooltip-list-item": {
+          "listStyleType": "none",
+          "padding": 0,
+          "marginBottom": "12px",
+          "marginTop": "12px",
+          "marginLeft": 0,
+          "marginRight": 0
+        },
+        "g2-tooltip-marker": {
+          "width": "8px",
+          "height": "8px",
+          "borderRadius": "50%",
+          "display": "inline-block",
+          "marginRight": "8px"
+        },
+        "g2-tooltip-value": {
+          "display": "inline-block",
+          "float": "right",
+          "marginLeft": "30px"
+        }
+      }
+    },
+    "annotation": {
+      "arc": {
+        "style": {
+          "stroke": "#262626",
+          "lineWidth": 1
+        },
+        "animate": true
+      },
+      "line": {
+        "style": {
+          "stroke": "#404040",
+          "lineDash": null,
+          "lineWidth": 1
+        },
+        "text": {
+          "position": "start",
+          "autoRotate": true,
+          "style": {
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "textAlign": "start",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "textBaseline": "bottom"
+          }
+        },
+        "animate": true
+      },
+      "text": {
+        "style": {
+          "fill": "#A6A6A6",
+          "stroke": null,
+          "lineWidth": 0,
+          "fontSize": 12,
+          "textBaseline": "middle",
+          "textAlign": "start",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+        },
+        "animate": true
+      },
+      "region": {
+        "top": false,
+        "style": {
+          "lineWidth": 0,
+          "stroke": null,
+          "fill": "#FFFFFF",
+          "fillOpacity": 0.06
+        },
+        "animate": true
+      },
+      "image": {
+        "top": false,
+        "animate": true
+      },
+      "dataMarker": {
+        "top": true,
+        "point": {
+          "style": {
+            "r": 3,
+            "stroke": "#5B8FF9",
+            "lineWidth": 2
+          }
+        },
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          },
+          "length": 16
+        },
+        "text": {
+          "style": {
+            "textAlign": "start",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "direction": "upward",
+        "autoAdjust": true,
+        "animate": true
+      },
+      "dataRegion": {
+        "style": {
+          "region": {
+            "fill": "#FFFFFF",
+            "fillOpacity": 0.06
+          },
+          "text": {
+            "textAlign": "center",
+            "textBaseline": "bottom",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "animate": true
+      }
+    },
+    "slider": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ],
+        "backgroundStyle": {
+          "fill": "#416180",
+          "opacity": 0.05
+        },
+        "foregroundStyle": {
+          "fill": "#5B8FF9",
+          "opacity": 0.1
+        },
+        "handlerStyle": {
+          "width": 10,
+          "height": 24,
+          "fill": "#F7F7F7",
+          "opacity": 1,
+          "stroke": "#BFBFBF",
+          "lineWidth": 1,
+          "radius": 2,
+          "highLightFill": "#FFF"
+        },
+        "textStyle": {
+          "fill": "#fff",
+          "opacity": 0.45,
+          "fontSize": 12,
+          "lineHeight": 12,
+          "fontWeight": "normal",
+          "stroke": null,
+          "lineWidth": 0
+        }
+      }
+    },
+    "scrollbar": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "default": {
+        "style": {
+          "trackColor": "rgba(25, 29, 41, 1)",
+          "thumbColor": "rgba(70, 71, 85, 1)"
+        }
+      },
+      "hover": {
+        "style": {
+          "thumbColor": "rgba(73, 82, 99, 1)"
+        }
+      }
+    }
+  },
+  "labels": {
+    "offset": 12,
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "fillColorDark": "#ffffff",
+    "fillColorLight": "#ffffff",
+    "autoRotate": true
+  },
+  "innerLabels": {
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "autoRotate": true
+  },
+  "overflowLabels": {
+    "style": {
+      "fill": "#ffffff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": "#000",
+      "lineWidth": 1
+    }
+  },
+  "pieLabels": {
+    "labelHeight": 12,
+    "offset": 10,
+    "labelLine": {
+      "style": {
+        "lineWidth": 1
+      }
+    },
+    "autoRotate": true
+  },
+  "bottom-axis-subTick-line": false,
+  "styleSheet": {
+    "brandColor": "#025DF4",
+    "paletteQualitative10": [
+      "#025DF4",
+      "#DB6BCF",
+      "#2498D1",
+      "#BBBDE6",
+      "#4045B2",
+      "#21A97A",
+      "#FF745A",
+      "#007E99",
+      "#FFA8A8",
+      "#2391FF"
+    ],
+    "paletteQualitative20": [
+      "#025DF4",
+      "#DB6BCF",
+      "#2498D1",
+      "#BBBDE6",
+      "#4045B2",
+      "#21A97A",
+      "#FF745A",
+      "#007E99",
+      "#FFA8A8",
+      "#2391FF",
+      "#FFC328",
+      "#A0DC2C",
+      "#946DFF",
+      "#626681",
+      "#EB4185",
+      "#CD8150",
+      "#36BCCB",
+      "#327039",
+      "#803488",
+      "#83BC99"
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/views/pages/report/statement/widgetthemes/theme-dark4.json b/src/views/pages/report/statement/widgetthemes/theme-dark4.json
index 2d2dad4d..8c59f0ba 100644
--- a/src/views/pages/report/statement/widgetthemes/theme-dark4.json
+++ b/src/views/pages/report/statement/widgetthemes/theme-dark4.json
@@ -1,691 +1,687 @@
-{
-  "background": "transparent",
-  "subColor": "rgba(255, 255, 255, 0.05)",
-  "semanticRed": "rgba(244, 102, 74, 1)",
-  "semanticGreen": "rgba(37, 184, 100, 1)",
-  "padding": "auto",
-  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-  "columnWidthRatio": 0.5,
-  "maxColumnWidth": null,
-  "minColumnWidth": null,
-  "roseWidthRatio": 0.9999999,
-  "multiplePieWidthRatio": 0.7692307692307692,
-  "sequenceColors": [
-    "#d8daff",
-    "#aeb6ff",
-    "#7d94ff",
-    "#5d80fd",
-    "#4973fa",
-    "#2d66f6",
-    "#0359ef",
-    "#034ddf",
-    "#0241cf",
-    "#0035c0"
-  ],
-  "shapes": {
-    "point": [
-      "hollow-circle",
-      "hollow-square",
-      "hollow-bowtie",
-      "hollow-diamond",
-      "hollow-hexagon",
-      "hollow-triangle",
-      "hollow-triangle-down",
-      "circle",
-      "square",
-      "bowtie",
-      "diamond",
-      "hexagon",
-      "triangle",
-      "triangle-down",
-      "cross",
-      "tick",
-      "plus",
-      "hyphen",
-      "line"
-    ],
-    "line": [
-      "line",
-      "dash",
-      "dot",
-      "smooth"
-    ],
-    "area": [
-      "area",
-      "smooth",
-      "line",
-      "smooth-line"
-    ],
-    "interval": [
-      "rect",
-      "hollow-rect",
-      "line",
-      "tick"
-    ]
-  },
-  "sizes": [
-    1,
-    10
-  ],
-  "components": {
-    "axis": {
-      "common": {
-        "title": {
-          "autoRotate": true,
-          "position": "center",
-          "spacing": 12,
-          "style": {
-            "fill": "#f1f1f1",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "label": {
-          "autoRotate": false,
-          "autoEllipsis": false,
-          "autoHide": {
-            "type": "equidistance",
-            "cfg": {
-              "minGap": 6
-            }
-          },
-          "offset": 8,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "line": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 0.5,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "tickLine": {
-          "style": {
-            "lineWidth": 1,
-            "stroke": "rgba(209, 209, 209, 1)"
-          },
-          "alignTick": true,
-          "length": 4
-        },
-        "subTickLine": null,
-        "animate": true
-      },
-      "top": {
-        "position": "top",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "bottom": {
-        "position": "bottom",
-        "grid": null,
-        "title": null,
-        "verticalLimitLength": 0.5
-      },
-      "left": {
-        "position": "left",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "right": {
-        "position": "right",
-        "title": null,
-        "line": null,
-        "tickLine": null,
-        "verticalLimitLength": 0.3333333333333333
-      },
-      "circle": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "line",
-            "style": {
-              "stroke": "rgba(70, 71, 85, 1)",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 255, 1)"
-          }
-        },
-        "tickLine": {
-          "style": {
-            "stroke": "rgba(209, 209, 209, 1)"
-          }
-        }
-      },
-      "radius": {
-        "title": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        },
-        "grid": {
-          "line": {
-            "type": "circle",
-            "style": {
-              "stroke": "#262626",
-              "lineWidth": 1,
-              "lineDash": null
-            }
-          },
-          "alignTick": true,
-          "animate": true
-        },
-        "label": {
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)"
-          }
-        }
-      }
-    },
-    "legend": {
-      "common": {
-        "title": null,
-        "marker": {
-          "symbol": "circle",
-          "spacing": 8,
-          "style": {
-            "r": 4,
-            "fill": "#5B8FF9"
-          }
-        },
-        "itemName": {
-          "spacing": 5,
-          "style": {
-            "fill": "rgba(241, 241, 241, 1)",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "fontWeight": "normal",
-            "textAlign": "start",
-            "textBaseline": "middle"
-          }
-        },
-        "itemStates": {
-          "active": {
-            "nameStyle": {
-              "opacity": 0.8
-            }
-          },
-          "unchecked": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "fill": "#D8D8D8",
-              "stroke": "#D8D8D8"
-            }
-          },
-          "inactive": {
-            "nameStyle": {
-              "fill": "#D8D8D8"
-            },
-            "markerStyle": {
-              "opacity": 0.2
-            }
-          }
-        },
-        "flipPage": true,
-        "pageNavigator": {
-          "marker": {
-            "style": {
-              "size": 12,
-              "inactiveFill": "rgba(225, 225, 225, 1)",
-              "inactiveOpacity": 0.45,
-              "fill": "rgba(225, 225, 225, 1)",
-              "opacity": 1
-            }
-          },
-          "text": {
-            "style": {
-              "fill": "rgba(209, 209, 209, 1)",
-              "fontSize": 12
-            }
-          }
-        },
-        "animate": false,
-        "maxItemWidth": 200,
-        "itemSpacing": 24,
-        "itemMarginBottom": 12,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "right": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "left": {
-        "layout": "vertical",
-        "padding": [
-          0,
-          8,
-          0,
-          8
-        ]
-      },
-      "top": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "bottom": {
-        "layout": "horizontal",
-        "padding": [
-          8,
-          0,
-          8,
-          0
-        ]
-      },
-      "continuous": {
-        "title": null,
-        "background": null,
-        "track": {},
-        "rail": {
-          "type": "color",
-          "size": 12,
-          "defaultLength": 100,
-          "style": {
-            "fill": "rgba(33, 33, 33, 1)",
-            "stroke": null,
-            "lineWidth": 0
-          }
-        },
-        "label": {
-          "align": "rail",
-          "spacing": 4,
-          "formatter": null,
-          "style": {
-            "fill": "rgba(209, 209, 209, 1)",
-            "fontSize": 12,
-            "lineHeight": 12,
-            "textBaseline": "middle",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "handler": {
-          "size": 10,
-          "style": {
-            "fill": "#F0F0F0",
-            "stroke": "#BFBFBF"
-          }
-        },
-        "slidable": true,
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      }
-    },
-    "tooltip": {
-      "showContent": true,
-      "follow": true,
-      "showCrosshairs": false,
-      "showMarkers": true,
-      "shared": false,
-      "enterable": false,
-      "position": "auto",
-      "marker": {
-        "symbol": "circle",
-        "stroke": "#fff",
-        "shadowBlur": 10,
-        "shadowOffsetX": 0,
-        "shadowOffsetY": 0,
-        "shadowColor": "rgba(0,0,0,0.09)",
-        "lineWidth": 2,
-        "r": 4
-      },
-      "crosshairs": {
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          }
-        },
-        "text": null,
-        "textBackground": {
-          "padding": 2,
-          "style": {
-            "fill": "rgba(0, 0, 0, 0.25)",
-            "lineWidth": 0,
-            "stroke": null
-          }
-        },
-        "follow": false
-      },
-      "domStyles": {
-        "g2-tooltip": {
-          "position": "absolute",
-          "visibility": "hidden",
-          "zIndex": 8,
-          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
-          "backgroundColor": "#1f1f1f",
-          "opacity": 0.95,
-          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
-          "borderRadius": 10,
-          "color": "rgba(241, 241, 241, 1)",
-          "fontSize": "12px",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-          "lineHeight": "12px",
-          "padding": "0 12px 0 12px"
-        },
-        "g2-tooltip-title": {
-          "marginBottom": "12px",
-          "marginTop": "12px"
-        },
-        "g2-tooltip-list": {
-          "margin": 0,
-          "listStyleType": "none",
-          "padding": 0
-        },
-        "g2-tooltip-list-item": {
-          "listStyleType": "none",
-          "padding": 0,
-          "marginBottom": "12px",
-          "marginTop": "12px",
-          "marginLeft": 0,
-          "marginRight": 0
-        },
-        "g2-tooltip-marker": {
-          "width": "8px",
-          "height": "8px",
-          "borderRadius": "50%",
-          "display": "inline-block",
-          "marginRight": "8px"
-        },
-        "g2-tooltip-value": {
-          "display": "inline-block",
-          "float": "right",
-          "marginLeft": "30px"
-        }
-      }
-    },
-    "annotation": {
-      "arc": {
-        "style": {
-          "stroke": "#262626",
-          "lineWidth": 1
-        },
-        "animate": true
-      },
-      "line": {
-        "style": {
-          "stroke": "#404040",
-          "lineDash": null,
-          "lineWidth": 1
-        },
-        "text": {
-          "position": "start",
-          "autoRotate": true,
-          "style": {
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "textAlign": "start",
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-            "textBaseline": "bottom"
-          }
-        },
-        "animate": true
-      },
-      "text": {
-        "style": {
-          "fill": "#A6A6A6",
-          "stroke": null,
-          "lineWidth": 0,
-          "fontSize": 12,
-          "textBaseline": "middle",
-          "textAlign": "start",
-          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-        },
-        "animate": true
-      },
-      "region": {
-        "top": false,
-        "style": {
-          "lineWidth": 0,
-          "stroke": null,
-          "fill": "#FFFFFF",
-          "fillOpacity": 0.06
-        },
-        "animate": true
-      },
-      "image": {
-        "top": false,
-        "animate": true
-      },
-      "dataMarker": {
-        "top": true,
-        "point": {
-          "style": {
-            "r": 3,
-            "stroke": "#5B8FF9",
-            "lineWidth": 2
-          }
-        },
-        "line": {
-          "style": {
-            "stroke": "#404040",
-            "lineWidth": 1
-          },
-          "length": 16
-        },
-        "text": {
-          "style": {
-            "textAlign": "start",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "direction": "upward",
-        "autoAdjust": true,
-        "animate": true
-      },
-      "dataRegion": {
-        "style": {
-          "region": {
-            "fill": "#FFFFFF",
-            "fillOpacity": 0.06
-          },
-          "text": {
-            "textAlign": "center",
-            "textBaseline": "bottom",
-            "fill": "#A6A6A6",
-            "stroke": null,
-            "lineWidth": 0,
-            "fontSize": 12,
-            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
-          }
-        },
-        "animate": true
-      }
-    },
-    "slider": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ],
-        "backgroundStyle": {
-          "fill": "#416180",
-          "opacity": 0.05
-        },
-        "foregroundStyle": {
-          "fill": "#5B8FF9",
-          "opacity": 0.1
-        },
-        "handlerStyle": {
-          "width": 10,
-          "height": 24,
-          "fill": "#F7F7F7",
-          "opacity": 1,
-          "stroke": "#BFBFBF",
-          "lineWidth": 1,
-          "radius": 2,
-          "highLightFill": "#FFF"
-        },
-        "textStyle": {
-          "fill": "#fff",
-          "opacity": 0.45,
-          "fontSize": 12,
-          "lineHeight": 12,
-          "fontWeight": "normal",
-          "stroke": null,
-          "lineWidth": 0
-        }
-      }
-    },
-    "scrollbar": {
-      "common": {
-        "padding": [
-          8,
-          8,
-          8,
-          8
-        ]
-      },
-      "default": {
-        "style": {
-          "trackColor": "rgba(25, 29, 41, 1)",
-          "thumbColor": "rgba(70, 71, 85, 1)"
-        }
-      },
-      "hover": {
-        "style": {
-          "thumbColor": "rgba(73, 82, 99, 1)"
-        }
-      }
-    }
-  },
-  "labels": {
-    "offset": 12,
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "fillColorDark": "#ffffff",
-    "fillColorLight": "#ffffff",
-    "autoRotate": true
-  },
-  "innerLabels": {
-    "style": {
-      "fill": "#fff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": null,
-      "lineWidth": 0
-    },
-    "autoRotate": true
-  },
-  "overflowLabels": {
-    "style": {
-      "fill": "#ffffff",
-      "fontSize": 12,
-      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
-      "stroke": "#000",
-      "lineWidth": 1
-    }
-  },
-  "pieLabels": {
-    "labelHeight": 12,
-    "offset": 10,
-    "labelLine": {
-      "style": {
-        "lineWidth": 1
-      }
-    },
-    "autoRotate": true
-  },
-  "bottom-axis-subTick-line": false,
-  "styleSheet": {
-    "brandColor": "#FF4500",
-    "paletteQualitative10": [
-      "#FF4500",
-      "#1AAF8B",
-      "#406C85",
-      "#F6BD16",
-      "#B40F0F",
-      "#2FB8FC",
-      "#4435FF",
-      "#FF5CA2",
-      "#BBE800",
-      "#FE8A26"
-    ],
-    "paletteQualitative20": [
-      "#FF4500",
-      "#1AAF8B",
-      "#406C85",
-      "#F6BD16",
-      "#B40F0F",
-      "#2FB8FC",
-      "#4435FF",
-      "#FF5CA2",
-      "#BBE800",
-      "#FE8A26",
-      "#946DFF",
-      "#6C3E00",
-      "#6193FF",
-      "#FF988E",
-      "#36BCCB",
-      "#004988",
-      "#FFCF9D",
-      "#CCDC8A",
-      "#8D00A1",
-      "#1CC25E"
-    ]
-  }
+{
+  "background": "transparent",
+  "subColor": "rgba(255, 255, 255, 0.05)",
+  "semanticRed": "rgba(244, 102, 74, 1)",
+  "semanticGreen": "rgba(37, 184, 100, 1)",
+  "padding": "auto",
+  "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+  "columnWidthRatio": 0.5,
+  "maxColumnWidth": null,
+  "minColumnWidth": null,
+  "roseWidthRatio": 0.9999999,
+  "multiplePieWidthRatio": 0.7692307692307692,
+  "sequenceColors": [
+    "#d8daff",
+    "#aeb6ff",
+    "#7d94ff",
+    "#5d80fd",
+    "#4973fa",
+    "#2d66f6",
+    "#0359ef",
+    "#034ddf",
+    "#0241cf",
+    "#0035c0"
+  ],
+  "shapes": {
+    "point": [
+      "hollow-circle",
+      "hollow-square",
+      "hollow-bowtie",
+      "hollow-diamond",
+      "hollow-hexagon",
+      "hollow-triangle",
+      "hollow-triangle-down",
+      "circle",
+      "square",
+      "bowtie",
+      "diamond",
+      "hexagon",
+      "triangle",
+      "triangle-down",
+      "cross",
+      "tick",
+      "plus",
+      "hyphen",
+      "line"
+    ],
+    "line": [
+      "line",
+      "dash",
+      "dot",
+      "smooth"
+    ],
+    "area": [
+      "area",
+      "smooth",
+      "line",
+      "smooth-line"
+    ],
+    "interval": [
+      "rect",
+      "hollow-rect",
+      "line",
+      "tick"
+    ]
+  },
+  "sizes": [
+    1,
+    10
+  ],
+  "components": {
+    "axis": {
+      "common": {
+        "title": {
+          "autoRotate": true,
+          "position": "center",
+          "spacing": 12,
+          "style": {
+            "fill": "#f1f1f1",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "label": {
+          "autoRotate": false,
+          "autoEllipsis": false,
+          "autoHide": {
+            "type": "equidistance",
+            "cfg": {
+              "minGap": 6
+            }
+          },
+          "offset": 8,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "line": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 0.5,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "tickLine": {
+          "style": {
+            "lineWidth": 1,
+            "stroke": "rgba(209, 209, 209, 1)"
+          },
+          "alignTick": true,
+          "length": 4
+        },
+        "subTickLine": null,
+        "animate": true
+      },
+      "top": {
+        "position": "top",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "bottom": {
+        "position": "bottom",
+        "grid": null,
+        "title": null,
+        "verticalLimitLength": 0.5
+      },
+      "left": {
+        "position": "left",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "right": {
+        "position": "right",
+        "title": null,
+        "line": null,
+        "tickLine": null,
+        "verticalLimitLength": 0.3333333333333333
+      },
+      "circle": {
+        "title": null,
+        "grid": {
+          "line": {
+            "type": "line",
+            "style": {
+              "stroke": "rgba(70, 71, 85, 1)",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 255, 1)"
+          }
+        },
+        "tickLine": {
+          "style": {
+            "stroke": "rgba(209, 209, 209, 1)"
+          }
+        }
+      },
+      "radius": {
+        "title": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        },
+        "grid": {
+          "line": {
+            "type": "circle",
+            "style": {
+              "stroke": "#262626",
+              "lineWidth": 1,
+              "lineDash": null
+            }
+          },
+          "alignTick": true,
+          "animate": true
+        },
+        "label": {
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)"
+          }
+        }
+      }
+    },
+    "legend": {
+      "common": {
+        "title": null,
+        "marker": {
+          "symbol": "circle",
+          "spacing": 8,
+          "style": {
+            "r": 4,
+            "fill": "#5B8FF9"
+          }
+        },
+        "itemName": {
+          "spacing": 5,
+          "style": {
+            "fill": "rgba(241, 241, 241, 1)",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "fontWeight": "normal",
+            "textAlign": "start",
+            "textBaseline": "middle"
+          }
+        },
+        "itemStates": {
+          "active": {
+            "nameStyle": {
+              "opacity": 0.8
+            }
+          },
+          "unchecked": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "fill": "#D8D8D8",
+              "stroke": "#D8D8D8"
+            }
+          },
+          "inactive": {
+            "nameStyle": {
+              "fill": "#D8D8D8"
+            },
+            "markerStyle": {
+              "opacity": 0.2
+            }
+          }
+        },
+        "flipPage": true,
+        "pageNavigator": {
+          "marker": {
+            "style": {
+              "size": 12,
+              "inactiveFill": "rgba(225, 225, 225, 1)",
+              "inactiveOpacity": 0.45,
+              "fill": "rgba(225, 225, 225, 1)",
+              "opacity": 1
+            }
+          },
+          "text": {
+            "style": {
+              "fill": "rgba(209, 209, 209, 1)",
+              "fontSize": 12
+            }
+          }
+        },
+        "animate": false,
+        "maxItemWidth": 200,
+        "itemSpacing": 24,
+        "itemMarginBottom": 12,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "right": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "left": {
+        "layout": "vertical",
+        "padding": [
+          0,
+          8,
+          0,
+          8
+        ]
+      },
+      "top": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "bottom": {
+        "layout": "horizontal",
+        "padding": [
+          8,
+          0,
+          8,
+          0
+        ]
+      },
+      "continuous": {
+        "title": null,
+        "background": null,
+        "track": {},
+        "rail": {
+          "type": "color",
+          "size": 12,
+          "defaultLength": 100,
+          "style": {
+            "fill": "rgba(33, 33, 33, 1)",
+            "stroke": null,
+            "lineWidth": 0
+          }
+        },
+        "label": {
+          "align": "rail",
+          "spacing": 4,
+          "formatter": null,
+          "style": {
+            "fill": "rgba(209, 209, 209, 1)",
+            "fontSize": 12,
+            "lineHeight": 12,
+            "textBaseline": "middle",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "handler": {
+          "size": 10,
+          "style": {
+            "fill": "#F0F0F0",
+            "stroke": "#BFBFBF"
+          }
+        },
+        "slidable": true,
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      }
+    },
+    "tooltip": {
+      "showContent": true,
+      "follow": true,
+      "showCrosshairs": false,
+      "showMarkers": true,
+      "shared": false,
+      "enterable": false,
+      "position": "auto",
+      "marker": {
+        "symbol": "circle",
+        "stroke": "#fff",
+        "shadowBlur": 10,
+        "shadowOffsetX": 0,
+        "shadowOffsetY": 0,
+        "shadowColor": "rgba(0,0,0,0.09)",
+        "lineWidth": 2,
+        "r": 4
+      },
+      "crosshairs": {
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          }
+        },
+        "text": null,
+        "textBackground": {
+          "padding": 2,
+          "style": {
+            "fill": "rgba(0, 0, 0, 0.25)",
+            "lineWidth": 0,
+            "stroke": null
+          }
+        },
+        "follow": false
+      },
+      "domStyles": {
+        "g2-tooltip": {
+          "position": "absolute",
+          "visibility": "hidden",
+          "zIndex": 8,
+          "transition": "left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s",
+          "backgroundColor": "#1f1f1f",
+          "opacity": 0.95,
+          "boxShadow": "0px 2px 4px rgba(0,0,0,.5)",
+          "borderRadius": 10,
+          "color": "rgba(241, 241, 241, 1)",
+          "fontSize": "12px",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+          "lineHeight": "12px",
+          "padding": "0 12px 0 12px"
+        },
+        "g2-tooltip-title": {
+          "marginBottom": "12px",
+          "marginTop": "12px"
+        },
+        "g2-tooltip-list": {
+          "margin": 0,
+          "listStyleType": "none",
+          "padding": 0
+        },
+        "g2-tooltip-list-item": {
+          "listStyleType": "none",
+          "padding": 0,
+          "marginBottom": "12px",
+          "marginTop": "12px",
+          "marginLeft": 0,
+          "marginRight": 0
+        },
+        "g2-tooltip-marker": {
+          "width": "8px",
+          "height": "8px",
+          "borderRadius": "50%",
+          "display": "inline-block",
+          "marginRight": "8px"
+        },
+        "g2-tooltip-value": {
+          "display": "inline-block",
+          "float": "right",
+          "marginLeft": "30px"
+        }
+      }
+    },
+    "annotation": {
+      "arc": {
+        "style": {
+          "stroke": "#262626",
+          "lineWidth": 1
+        },
+        "animate": true
+      },
+      "line": {
+        "style": {
+          "stroke": "#404040",
+          "lineDash": null,
+          "lineWidth": 1
+        },
+        "text": {
+          "position": "start",
+          "autoRotate": true,
+          "style": {
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "textAlign": "start",
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+            "textBaseline": "bottom"
+          }
+        },
+        "animate": true
+      },
+      "text": {
+        "style": {
+          "fill": "#A6A6A6",
+          "stroke": null,
+          "lineWidth": 0,
+          "fontSize": 12,
+          "textBaseline": "middle",
+          "textAlign": "start",
+          "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+        },
+        "animate": true
+      },
+      "region": {
+        "top": false,
+        "style": {
+          "lineWidth": 0,
+          "stroke": null,
+          "fill": "#FFFFFF",
+          "fillOpacity": 0.06
+        },
+        "animate": true
+      },
+      "image": {
+        "top": false,
+        "animate": true
+      },
+      "dataMarker": {
+        "top": true,
+        "point": {
+          "style": {
+            "r": 3,
+            "stroke": "#5B8FF9",
+            "lineWidth": 2
+          }
+        },
+        "line": {
+          "style": {
+            "stroke": "#404040",
+            "lineWidth": 1
+          },
+          "length": 16
+        },
+        "text": {
+          "style": {
+            "textAlign": "start",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "direction": "upward",
+        "autoAdjust": true,
+        "animate": true
+      },
+      "dataRegion": {
+        "style": {
+          "region": {
+            "fill": "#FFFFFF",
+            "fillOpacity": 0.06
+          },
+          "text": {
+            "textAlign": "center",
+            "textBaseline": "bottom",
+            "fill": "#A6A6A6",
+            "stroke": null,
+            "lineWidth": 0,
+            "fontSize": 12,
+            "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\""
+          }
+        },
+        "animate": true
+      }
+    },
+    "slider": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ],
+        "backgroundStyle": {
+          "fill": "#416180",
+          "opacity": 0.05
+        },
+        "foregroundStyle": {
+          "fill": "#5B8FF9",
+          "opacity": 0.1
+        },
+        "handlerStyle": {
+          "width": 10,
+          "height": 24,
+          "fill": "#F7F7F7",
+          "opacity": 1,
+          "stroke": "#BFBFBF",
+          "lineWidth": 1,
+          "radius": 2,
+          "highLightFill": "#FFF"
+        },
+        "textStyle": {
+          "fill": "#fff",
+          "opacity": 0.45,
+          "fontSize": 12,
+          "lineHeight": 12,
+          "fontWeight": "normal",
+          "stroke": null,
+          "lineWidth": 0
+        }
+      }
+    },
+    "scrollbar": {
+      "common": {
+        "padding": [
+          8,
+          8,
+          8,
+          8
+        ]
+      },
+      "default": {
+        "style": {
+          "trackColor": "rgba(25, 29, 41, 1)",
+          "thumbColor": "rgba(70, 71, 85, 1)"
+        }
+      },
+      "hover": {
+        "style": {
+          "thumbColor": "rgba(73, 82, 99, 1)"
+        }
+      }
+    }
+  },
+  "labels": {
+    "offset": 12,
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "fillColorDark": "#ffffff",
+    "fillColorLight": "#ffffff",
+    "autoRotate": true
+  },
+  "innerLabels": {
+    "style": {
+      "fill": "#fff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": null,
+      "lineWidth": 0
+    },
+    "autoRotate": true
+  },
+  "overflowLabels": {
+    "style": {
+      "fill": "#ffffff",
+      "fontSize": 12,
+      "fontFamily": "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n    \"Noto Color Emoji\"",
+      "stroke": "#000",
+      "lineWidth": 1
+    }
+  },
+  "pieLabels": {
+    "labelHeight": 12,
+    "offset": 10,
+    "labelLine": {
+      "style": {
+        "lineWidth": 1
+      }
+    },
+    "autoRotate": true
+  },
+  "bottom-axis-subTick-line": false,
+  "styleSheet": {
+    "brandColor": "#FF4500",
+    "paletteQualitative10": [
+      "#FF4500",
+      "#1AAF8B",
+      "#406C85",
+      "#F6BD16",
+      "#B40F0F",
+      "#2FB8FC",
+      "#4435FF",
+      "#FF5CA2",
+      "#BBE800",
+      "#FE8A26"
+    ],
+    "paletteQualitative20": [
+      "#FF4500",
+      "#1AAF8B",
+      "#406C85",
+      "#F6BD16",
+      "#B40F0F",
+      "#2FB8FC",
+      "#4435FF",
+      "#FF5CA2",
+      "#BBE800",
+      "#FE8A26",
+      "#946DFF",
+      "#6C3E00",
+      "#6193FF",
+      "#FF988E",
+      "#36BCCB",
+      "#004988",
+      "#FFCF9D",
+      "#CCDC8A",
+      "#8D00A1",
+      "#1CC25E"
+    ]
+  }
 }
\ No newline at end of file
-- 
Gitee


From b3786a5d4927aaad65d512bfc19d0b323431f681 Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Wed, 2 Apr 2025 17:42:58 +0800
Subject: [PATCH 3/5] =?UTF-8?q?[=E5=85=B3=E8=81=94]=20#[1375481348194304]?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1375481348194304?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/others/autoexec-widget.vue        | 105 +++++++++++-------
 1 file changed, 63 insertions(+), 42 deletions(-)

diff --git a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
index 798e5397..4f386600 100644
--- a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
+++ b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
@@ -27,20 +27,19 @@
       >
         <div
           v-for="(litem,lindex) in item"
-          :id="'step_' + litem.id"
-          :ref="'step_' + litem.id"
+          :id="'step_' + litem.jobGroupSort + '_' + litem.jobPhaseName"
           :key="lindex"
           class="step-content"
         >
-          <div class="step-node border-base radius-sm" :class="litem.status && statusMapClass[litem.status]" :title="litem.name">
-            <span>{{ litem.name }}</span>
+          <div class="step-node border-base radius-sm" :class="getStatusClassName(litem.jobPhaseStatus)" :title="litem.jobPhaseName">
+            <span>{{ litem.jobPhaseName }}</span>
           </div>
         </div>
         <span class="step_a tsfont-arrow-down text-success"></span>
       </div>
       <div class="item-list border-color">
         <div class="step-content">
-          <div class="step-node border-base radius-sm">
+          <div class="step-node border-base radius-sm" :class="percentData == 100? 'border-color-success text-success':''">
             <span>结束</span>
           </div>
         </div>
@@ -49,17 +48,17 @@
     <div v-else><no-data></no-data></div>
     <div class="action-group no-line">
       <span class="block-item">
-        <span class="color-tip bg-gray"></span>
+        <span class="color-tip bg-pending"></span>
         <span class="fz10">未开始</span>
       </span>
       <span class="block-item">
-        <span class="color-tip bg-warning"></span>
+        <span class="color-tip bg-info"></span>
         <span class="fz10"> 进行中</span>
       </span>
-      <!-- <span class="block-item">
-        <span class="color-tip bg-gray"></span>
-        <span class="fz10">已禁用</span>
-      </span> -->
+      <span class="block-item">
+        <span class="color-tip bg-warning"></span>
+        <span class="fz10">已终止</span>
+      </span>
       <span class="block-item">
         <span class="color-tip bg-error"></span>
         <span class="fz10">失败</span>
@@ -82,32 +81,33 @@ export default {
   },
   data() {
     return {
+      isFirst: true,
       isReady: true,
       statusMapClass: {
-        // pending: 'pending border-color-info',
-        success: 'success border-color-success text-success',
-        running: 'running border-color-warning text-warning',
-        failed: 'failed border-color-error text-error'
-        // disabled: 'bg-gray'
+        pending: 'pending',
+        completed: 'completed border-color-success text-success',
+        running: 'running border-color-info text-info',
+        failed: 'failed border-color-error text-error',
+        aborted: 'border-color-warning text-warning'
       },
       dataList: [],
       stepList: [
-        {name: '步骤一', groupSort: 0, status: 'success'},
-        {name: '步骤二', groupSort: 0, status: 'success'},
-        {name: '步骤三', groupSort: 0, status: 'success'},
-        {name: '步骤四', groupSort: 0, status: 'success'},     
-        {name: '步骤一', groupSort: 0, status: 'success'},
-        {name: '步骤二', groupSort: 1, status: 'failed'},
-        {name: '步骤三', groupSort: 1, status: 'success'},
-        {name: '步骤四', groupSort: 2, status: 'success'},
-        {name: '步骤一', groupSort: 2, status: 'success'},
-        {name: '步骤二', groupSort: 2, status: 'success'},
-        {name: '步骤三', groupSort: 3, status: 'success'},
-        {name: '步骤四', groupSort: 4, status: 'success'},     
-        {name: '步骤一', groupSort: 4, status: 'success'},
-        {name: '步骤二', groupSort: 5, status: 'success'},
-        {name: '步骤三', groupSort: 6, status: 'pending'},
-        {name: '步骤四', groupSort: 6, status: 'running', id: '123456'}
+        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤二', jobGroupSort: 0, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤三', jobGroupSort: 0, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤四', jobGroupSort: 0, jobPhaseStatus: 'success'},     
+        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤二', jobGroupSort: 1, jobPhaseStatus: 'failed'},
+        {jobPhaseName: '步骤三', jobGroupSort: 1, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤四', jobGroupSort: 2, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤一', jobGroupSort: 2, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤二', jobGroupSort: 2, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤三', jobGroupSort: 3, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤四', jobGroupSort: 4, jobPhaseStatus: 'success'},     
+        {jobPhaseName: '步骤一', jobGroupSort: 4, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤二', jobGroupSort: 5, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤三', jobGroupSort: 6, jobPhaseStatus: 'pending'},
+        {jobPhaseName: '步骤四', jobGroupSort: 6, jobPhaseStatus: 'running'}
       ],
       percentData: 0
     };
@@ -128,7 +128,7 @@ export default {
   destroyed() {},
   methods: {
     createRandomData() {
-      // this.isReady = false;
+      this.isReady = false;
       this.dataList = this.getStepList(this.stepList); 
       this.getPercentData(this.stepList);
       this.$nextTick(() => {
@@ -137,8 +137,9 @@ export default {
       });
     },
     changeData() {
+      this.isFirst = false;
       if (this.data && this.data.length > 0) {
-        // this.isReady = false;
+        this.isReady = false;
         this.dataList = this.getStepList(this.data); 
         this.getPercentData(this.data);
         this.$nextTick(() => {
@@ -150,12 +151,12 @@ export default {
     getStepList(stepList) {
       let list = [];
       if (stepList.length) {
-        let groupSortList = stepList.filter(l => !this.$utils.isEmpty(l.groupSort));
+        let groupSortList = stepList.filter(l => !this.$utils.isEmpty(l.jobGroupSort));
         if (groupSortList && groupSortList.length) {
           for (let sort = 0, index = 0; index < groupSortList.length;) {
             let arr = [];
             groupSortList.filter(l => {
-              if (l.groupSort == sort) {
+              if (l.jobGroupSort == sort) {
                 arr.push(l);
                 index++;
                 return true;
@@ -170,7 +171,7 @@ export default {
     },
     stepScrollIntoView(dataList) {
       for (let i = 0; i < dataList.length; i++) {
-        if (dataList[i].status === 'running' && this.$refs['#step_' + dataList[i].id]) {
+        if (dataList[i].jobPhaseStatus === 'running' && this.$refs['#step_' + dataList[i].jobGroupSort + '_' + dataList[i].jobPhaseName]) {
           document.querySelector('#step_' + dataList[i].id).scrollIntoView({
             behavior: 'smooth', // 平滑过渡
             block: 'start' // start 上边框 center 中间 end 底部边框 与视窗顶部平齐
@@ -185,7 +186,7 @@ export default {
       if (list && list.length) {
         let i = 0;
         list.forEach(item => {
-          if (item.status === 'success') {
+          if (item.jobPhaseStatus === 'completed') {
             i += 1;
           }
         });
@@ -208,14 +209,34 @@ export default {
     },
     strokeWidth() {
       return this.widget && this.widget.config && this.widget.config.fontsize ? this.widget.config.fontsize - 3 : 10; 
+    },
+    getStatusClassName() {
+      return (jobPhaseStatus) => {
+        let className = this.statusMapClass[jobPhaseStatus] || '';
+        if (jobPhaseStatus && !className) {
+          if (['pausing', 'paused', 'aborting', 'waitInput'].includes(jobPhaseStatus)) {
+            className = this.statusMapClass['aborted'];
+          } else if (['checked', 'success'].includes(jobPhaseStatus)) {
+            className = this.statusMapClass['completed']; 
+          }
+        }
+        return className;
+      };
     }
   },
   watch: {
+    data: {
+      handler() {
+        if (this.isFirst) {
+          this.changeData();
+        }
+      },
+      deep: true
+    }
   }
 };
 </script>
 <style lang="less" scoped>
-@import (reference) '@/resources/assets/css/variable.less';
 .autoexec-widget{
   position: relative;
   padding-bottom: 10px;
@@ -260,9 +281,9 @@ export default {
     top: 64px;
   }
 }
-.pending{
-  background-color: rgba(22, 144, 255, .1);
-}
+// .pending{
+//   background-color: rgba(232, 232, 232, .1);
+// }
 .success {
   background-color: rgba(37, 184, 100, .1);
 }
-- 
Gitee


From 89e10629cd94fe0d7997f452848c69d6294744f7 Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Wed, 2 Apr 2025 18:02:15 +0800
Subject: [PATCH 4/5] =?UTF-8?q?[=E5=85=B3=E8=81=94]=20#[1375481348194304]?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1375481348194304?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pages/report/statement/widgets/define/autoexec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/pages/report/statement/widgets/define/autoexec.js b/src/views/pages/report/statement/widgets/define/autoexec.js
index da930c67..39d2594d 100644
--- a/src/views/pages/report/statement/widgets/define/autoexec.js
+++ b/src/views/pages/report/statement/widgets/define/autoexec.js
@@ -2,9 +2,9 @@ import { $t } from '@/resources/init.js';
 
 export default {
   name: 'autoexec',
-  label: $t('page.autoexec'),
+  label: $t('term.deploy.flowchart'),
   type: 'autoexec',
-  icon: 'tsfont-zidonghua',
+  icon: 'tsfont-topo',
   widgetType: 'other',
   hasCustomConfig: true,
   width: 500,
-- 
Gitee


From d70b71dd5539698a0fce86448d4f995420811f79 Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Wed, 2 Apr 2025 18:31:58 +0800
Subject: [PATCH 5/5] =?UTF-8?q?-[=E5=85=B3=E8=81=94]=20#[1375481348194304]?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1375481348194304?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/others/autoexec-widget.vue        | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
index 4f386600..da85b333 100644
--- a/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
+++ b/src/views/pages/report/statement/widgets/others/autoexec-widget.vue
@@ -14,7 +14,7 @@
     <div v-if="dataList && dataList.length>0" class="job-detail">
       <div class="item-list border-color">
         <div class="step-content">
-          <div class="animate-spin step-node border-base radius-sm border-color-success text-success">
+          <div class="animate-spin step-node border-base radius-sm success border-color-success text-success">
             <span>开始</span>
           </div>
         </div>
@@ -39,7 +39,7 @@
       </div>
       <div class="item-list border-color">
         <div class="step-content">
-          <div class="step-node border-base radius-sm" :class="percentData == 100? 'border-color-success text-success':''">
+          <div class="step-node border-base radius-sm" :class="percentData == 100? 'success border-color-success text-success':'pending border-color'">
             <span>结束</span>
           </div>
         </div>
@@ -85,29 +85,20 @@ export default {
       isReady: true,
       statusMapClass: {
         pending: 'pending',
-        completed: 'completed border-color-success text-success',
-        running: 'running border-color-info text-info',
-        failed: 'failed border-color-error text-error',
-        aborted: 'border-color-warning text-warning'
+        completed: 'success border-color-success text-success', //成功
+        running: 'running border-color-info text-info', //运行中
+        failed: 'failed border-color-error text-error', //失败
+        aborted: 'aborted border-color-warning text-warning' //中止
       },
       dataList: [],
       stepList: [
-        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤二', jobGroupSort: 0, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤三', jobGroupSort: 0, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤四', jobGroupSort: 0, jobPhaseStatus: 'success'},     
-        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'success'},
+        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'completed'},
+        {jobPhaseName: '步骤二', jobGroupSort: 0, jobPhaseStatus: 'completed'},
+        {jobPhaseName: '步骤三', jobGroupSort: 0, jobPhaseStatus: 'completed'},
+        {jobPhaseName: '步骤四', jobGroupSort: 0, jobPhaseStatus: 'completed'},     
+        {jobPhaseName: '步骤一', jobGroupSort: 0, jobPhaseStatus: 'completed'},
         {jobPhaseName: '步骤二', jobGroupSort: 1, jobPhaseStatus: 'failed'},
-        {jobPhaseName: '步骤三', jobGroupSort: 1, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤四', jobGroupSort: 2, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤一', jobGroupSort: 2, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤二', jobGroupSort: 2, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤三', jobGroupSort: 3, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤四', jobGroupSort: 4, jobPhaseStatus: 'success'},     
-        {jobPhaseName: '步骤一', jobGroupSort: 4, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤二', jobGroupSort: 5, jobPhaseStatus: 'success'},
-        {jobPhaseName: '步骤三', jobGroupSort: 6, jobPhaseStatus: 'pending'},
-        {jobPhaseName: '步骤四', jobGroupSort: 6, jobPhaseStatus: 'running'}
+        {jobPhaseName: '步骤三', jobGroupSort: 1, jobPhaseStatus: 'running'}
       ],
       percentData: 0
     };
@@ -186,7 +177,7 @@ export default {
       if (list && list.length) {
         let i = 0;
         list.forEach(item => {
-          if (item.jobPhaseStatus === 'completed') {
+          if (['checked', 'success', 'completed'].includes(item.jobPhaseStatus)) {
             i += 1;
           }
         });
@@ -281,13 +272,16 @@ export default {
     top: 64px;
   }
 }
-// .pending{
-//   background-color: rgba(232, 232, 232, .1);
-// }
+.pending{
+  background-color: rgba(232, 232, 232, .1);
+}
 .success {
   background-color: rgba(37, 184, 100, .1);
 }
 .running{
+  background-color: rgba(22, 112, 240, .1);
+}
+.aborted{
   background-color: rgba(255, 186, 90, .1);
 }
 .failed {
-- 
Gitee