From 69ff5446e4fc09b53372d45647514d2ac46254e1 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Mon, 13 Dec 2021 10:18:27 +0800
Subject: [PATCH] =?UTF-8?q?CN-229=20Cyptocurrency--=E6=8C=96=E7=9F=BF?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=BB=9F=E8=AE=A1=E6=96=B0=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=20CN-230=20Cyptocurrency--=E7=9F=BF=E6=9C=BA?=
 =?UTF-8?q?=E6=89=80=E5=B1=9E=E5=8D=95=E4=BD=8D=E6=96=B0=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/chart-options.js        |  36 +-
 src/components/rightBox/settings/ChartBox.vue | 538 +++++++++---------
 src/views/charts/Chart.vue                    | 194 +++----
 3 files changed, 384 insertions(+), 384 deletions(-)

diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 4a20b21d..d0183a2e 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -11,7 +11,7 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
   '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
   '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
   '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
-export const chartBarColor = [ '#0F8AB2', '#57CBAC']
+export const chartBarColor = ['#0F8AB2', '#57CBAC']
 export function getChartColor (index) {
   return chartColor[index % chartColor.length]
 }
@@ -491,24 +491,24 @@ const categoryBar = {
     left: 10,
     right: 25,
     bottom: 20,
-    containLabel:true
+    containLabel: true
   },
   yAxis: {
     type: 'value',
     axisTick: { show: false },
     axisLine: { show: false }
   },
-  color:chartColor,
+  color: chartColor,
   series: [{
     barWidth: 15,
     data: [],
     type: 'bar',
-    label: { show: false},
+    label: { show: false },
     barCategoryGap: '10%',
     itemStyle: {
-        color:  function(params) {
-          return getCharBartColor([params.dataIndex])
-        },
+      color: function (params) {
+        return getCharBartColor([params.dataIndex])
+      }
     }
   }]
 }
@@ -532,10 +532,10 @@ const timeBar = {
     axisLine: { show: false },
     axisLabel: {
       interval: 0,
-      //rotate: -40, //设置日期显示样式（倾斜度）
-      formatter: function (value) {//在这里写你需要的时间格式
-        var t_date = new Date(value);
-        return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':');
+      // rotate: -40, //设置日期显示样式（倾斜度）
+      formatter: function (value) { // 在这里写你需要的时间格式
+        const t_date = new Date(value)
+        return [t_date.getMonth() + 1, t_date.getDate()].join('/') + ' ' + [t_date.getHours(), t_date.getMinutes()].join(':')
       }
     }
   },
@@ -544,7 +544,7 @@ const timeBar = {
     left: 25,
     right: 25,
     bottom: 20,
-    containLabel:true
+    containLabel: true
   },
   yAxis: {
     type: 'value',
@@ -557,17 +557,17 @@ const timeBar = {
     },
     minInterval: 1
   },
-  color:chartColor,
+  color: chartColor,
   series: [{
     barWidth: 15,
     data: [],
     type: 'bar',
-    label: { show: false},
+    label: { show: false },
     barCategoryGap: '10%',
     itemStyle: {
-      color:  function(params) {
+      color: function (params) {
         return getCharBartColor([params.dataIndex])
-      },
+      }
     }
   }]
 }
@@ -798,7 +798,7 @@ export function categoryHorizontalFormatter (params) {
   let str = '<div>'
   params.forEach((item, i) => {
     str += '<div class="cn-chart-tooltip-box">'
-    str += item.data[1]+': ' + item.data[0]
+    str += item.data[1] + ': ' + item.data[0]
     str += '</div>'
   })
   str += '</div>'
@@ -808,7 +808,7 @@ export function categoryVerticalFormatter (params) {
   let str = '<div>'
   params.forEach((item, i) => {
     str += '<div class="cn-chart-tooltip-box">'
-    str += item.data[0]+': ' + item.data[1]
+    str += item.data[0] + ': ' + item.data[1]
     str += '</div>'
   })
   str += '</div>'
diff --git a/src/components/rightBox/settings/ChartBox.vue b/src/components/rightBox/settings/ChartBox.vue
index 710c9908..db19da0e 100644
--- a/src/components/rightBox/settings/ChartBox.vue
+++ b/src/components/rightBox/settings/ChartBox.vue
@@ -131,282 +131,282 @@
 </template>
 
 <script>
-  import rightBoxMixin from '@/mixins/rightBox'
-  import { get, post, put } from '@/utils/http'
-  import { panelTypeAndRouteMapping } from '@/utils/constants'
-  import { api } from '@/utils/api'
-  import { VAceEditor } from 'vue3-ace-editor'
-  import 'ace-builds/src-noconflict/mode-javascript'
-  import 'ace-builds/src-noconflict/mode-json'
-  import 'ace-builds/src-noconflict/theme-chrome'
+import rightBoxMixin from '@/mixins/rightBox'
+import { get, post, put } from '@/utils/http'
+import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { api } from '@/utils/api'
+import { VAceEditor } from 'vue3-ace-editor'
+import 'ace-builds/src-noconflict/mode-javascript'
+import 'ace-builds/src-noconflict/mode-json'
+import 'ace-builds/src-noconflict/theme-chrome'
 
-  export default {
-    name: 'ChartBox',
-    mixins: [rightBoxMixin],
-    components: {
-      VAceEditor
-    },
-    data () {
-      return {
-        url: api.chart,
-        loginName: localStorage.getItem('cn-username'),
-        panelTypeAndRouteMapping: panelTypeAndRouteMapping,
-        rules: { // 表单校验规则
-          name: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          type: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          panel_id: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          x: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          y: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          w: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          h: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ]
-        },
-        rules2: { // 表单校验规则
-          name: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          type: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          panel_id: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          x: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          y: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          w: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
-          h: [
-            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ]
-        },
-        chartData: [],
-        options: [
-          {
-            value: 1,
-            label: 'map-1',
-            remark: '流量流向地图-连线'
-          },
-          {
-            value: 2,
-            label: 'map-2',
-            remark: '地图-色块'
-          }, {
-            value: 3,
-            label: 'map-3',
-            remark: '地图-点'
-          },
-          {
-            value: 4,
-            label: 'map-4',
-            remark: '地图-点'
-          }, {
-            value: 11,
-            label: 'line-1',
-            remark: '折线图-常规'
-          },
-          {
-            value: 61,
-            label: 'table-1',
-            remark: '表格'
-          }, {
-            value: 62,
-            label: 'table-2',
-            remark: 'DNS记录'
-          }, {
-            value: 63,
-            label: 'table-3',
-            remark: '挖矿活跃ip'
-          }, {
-            value: 31,
-            label: 'pie-1',
-            remark: '饼图-带联动表格'
-          }, {
-            value: 51,
-            label: 'singleValue-1',
-            remark: '单值图'
-          },
-          {
-            value: 91,
-            label: 'tab-container',
-            remark: 'tab标签(容器)'
-          }, {
-            value: 92,
-            label: 'tab-item',
-            remark: 'tab标签(标签页)'
-          },
-          {
-            value: 93,
-            label: 'title',
-            remark: '标题'
-          }, {
-            value: 94,
-            label: 'group',
-            remark: '组'
-          },
-          {
-            value: 12,
-            label: 'line-2',
-            remark: '折线图-带统计'
-          }, {
-            value: 52,
-            label: 'singleValue-2',
-            remark: '详情单值图'
-          },
-          {
-            value: 53,
-            label: 'singleValue-3',
-            remark: '单值图'
-          }, {
-            value: 13,
-            label: 'line-3',
-            remark: '折线图-堆叠面积'
-          },
-          {
-            value: 21,
-            label: 'bar-1',
-            remark: '柱状图'
-          }, {
-            value: 22,
-            label: 'bar-2',
-            remark: '开放端口'
-          }, {
-            value: 23,
-            label: 'bar-3',
-            remark: '挖矿事件统计(time类型柱状图)'
-          }, {
-            value: 24,
-            label: 'bar-4',
-            remark: '矿机所属单位(category类型柱状图)'
-          },
-          {
-            value: 32,
-            label: 'pie-2',
-            remark: '饼图-常规'
-          }, {
-            value: 33,
-            label: 'pie-3',
-            remark: '托管域名'
-          },
-          {
-            value: 34,
-            label: 'pie-4',
-            remark: '相关域名'
-          }, {
-            value: 42,
-            label: 'relation-2',
-            remark: '关系图谱'
-          },
-          {
-            value: 43,
-            label: 'relation-3',
-            remark: '访问链路图'
-          },
-          {
-            value: 82,
-            label: 'base-2',
-            remark: 'APP基本信息'
-          }, {
-            value: 83,
-            label: 'list-1',
-            remark: 'Whois'
-          },
-          {
-            value: 84,
-            label: 'list-2',
-            remark: 'DNS记录'
-          },
-          {
-            value: 85,
-            label: 'list-3',
-            remark: '近期挖矿事件'
-          }
+export default {
+  name: 'ChartBox',
+  mixins: [rightBoxMixin],
+  components: {
+    VAceEditor
+  },
+  data () {
+    return {
+      url: api.chart,
+      loginName: localStorage.getItem('cn-username'),
+      panelTypeAndRouteMapping: panelTypeAndRouteMapping,
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        panel_id: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        x: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        y: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        w: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        h: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
-      }
-    },
-    setup () {
-    },
-    mounted () {
-      if (this.editObject.id) {
-        this.getChartData(this.editObject.panelId)
-      }
-    },
-    watch: {
-      'editObject.panelId': function (newValue, oldValue) {
-        this.editObject.pid = ''
-      }
-    },
-    methods: {
-      isCurrentUser (username) {
-        return localStorage.getItem('cn-username') === username
       },
-      /* 密码失去焦点 检验确认密码 */
-      pinBlur () {
-        if (this.editObject.pin && this.editObject.pinChange) {
-          this.$refs.chartForm.validateField('pinChange')
+      rules2: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        panel_id: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        x: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        y: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        w: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        h: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      chartData: [],
+      options: [
+        {
+          value: 1,
+          label: 'map-1',
+          remark: '流量流向地图-连线'
+        },
+        {
+          value: 2,
+          label: 'map-2',
+          remark: '地图-色块'
+        }, {
+          value: 3,
+          label: 'map-3',
+          remark: '地图-点'
+        },
+        {
+          value: 4,
+          label: 'map-4',
+          remark: '地图-点'
+        }, {
+          value: 11,
+          label: 'line-1',
+          remark: '折线图-常规'
+        },
+        {
+          value: 61,
+          label: 'table-1',
+          remark: '表格'
+        }, {
+          value: 62,
+          label: 'table-2',
+          remark: 'DNS记录'
+        }, {
+          value: 63,
+          label: 'table-3',
+          remark: '挖矿活跃ip'
+        }, {
+          value: 31,
+          label: 'pie-1',
+          remark: '饼图-带联动表格'
+        }, {
+          value: 51,
+          label: 'singleValue-1',
+          remark: '单值图'
+        },
+        {
+          value: 91,
+          label: 'tab-container',
+          remark: 'tab标签(容器)'
+        }, {
+          value: 92,
+          label: 'tab-item',
+          remark: 'tab标签(标签页)'
+        },
+        {
+          value: 93,
+          label: 'title',
+          remark: '标题'
+        }, {
+          value: 94,
+          label: 'group',
+          remark: '组'
+        },
+        {
+          value: 12,
+          label: 'line-2',
+          remark: '折线图-带统计'
+        }, {
+          value: 52,
+          label: 'singleValue-2',
+          remark: '详情单值图'
+        },
+        {
+          value: 53,
+          label: 'singleValue-3',
+          remark: '单值图'
+        }, {
+          value: 13,
+          label: 'line-3',
+          remark: '折线图-堆叠面积'
+        },
+        {
+          value: 21,
+          label: 'bar-1',
+          remark: '柱状图'
+        }, {
+          value: 22,
+          label: 'bar-2',
+          remark: '开放端口'
+        }, {
+          value: 23,
+          label: 'bar-3',
+          remark: '挖矿事件统计(time类型柱状图)'
+        }, {
+          value: 24,
+          label: 'bar-4',
+          remark: '矿机所属单位(category类型柱状图)'
+        },
+        {
+          value: 32,
+          label: 'pie-2',
+          remark: '饼图-常规'
+        }, {
+          value: 33,
+          label: 'pie-3',
+          remark: '托管域名'
+        },
+        {
+          value: 34,
+          label: 'pie-4',
+          remark: '相关域名'
+        }, {
+          value: 42,
+          label: 'relation-2',
+          remark: '关系图谱'
+        },
+        {
+          value: 43,
+          label: 'relation-3',
+          remark: '访问链路图'
+        },
+        {
+          value: 82,
+          label: 'base-2',
+          remark: 'APP基本信息'
+        }, {
+          value: 83,
+          label: 'list-1',
+          remark: 'Whois'
+        },
+        {
+          value: 84,
+          label: 'list-2',
+          remark: 'DNS记录'
+        },
+        {
+          value: 85,
+          label: 'list-3',
+          remark: '近期挖矿事件'
         }
-      },
-      save () {
-        if (this.blockOperation.save) { return }
-        this.blockOperation.save = true
-
-        this.$refs.chartForm.validate((valid) => {
-          if (valid) {
-            if (this.editObject.id) {
-              put(this.url, this.editObject).then(res => {
-                this.blockOperation.save = false
-                if (res.code === 200) {
-                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                  this.esc(true)
-                } else {
-                  this.$message.error(res.msg)
-                }
-              })
-            } else {
-              post(this.url, this.editObject).then(res => {
-                this.blockOperation.save = false
-                if (res.code === 200) {
-                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                  this.esc(true)
-                } else {
-                  this.$message.error(res.msg)
-                }
-              })
-            }
-          } else {
-            this.blockOperation.save = false
-            return false
-          }
-        })
-      },
-      async getChartData (value) {
-        await get('/visual/chart?panelId=' + value).then(response => {
-          if (response.code === 200) {
-            this.chartData = response.data.list
-          }
-        })
-
-        // this.$set(this.editObject, 'pid', '')
+      ]
+    }
+  },
+  setup () {
+  },
+  mounted () {
+    if (this.editObject.id) {
+      this.getChartData(this.editObject.panelId)
+    }
+  },
+  watch: {
+    'editObject.panelId': function (newValue, oldValue) {
+      this.editObject.pid = ''
+    }
+  },
+  methods: {
+    isCurrentUser (username) {
+      return localStorage.getItem('cn-username') === username
+    },
+    /* 密码失去焦点 检验确认密码 */
+    pinBlur () {
+      if (this.editObject.pin && this.editObject.pinChange) {
+        this.$refs.chartForm.validateField('pinChange')
       }
+    },
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+
+      this.$refs.chartForm.validate((valid) => {
+        if (valid) {
+          if (this.editObject.id) {
+            put(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.blockOperation.save = false
+          return false
+        }
+      })
+    },
+    async getChartData (value) {
+      await get('/visual/chart?panelId=' + value).then(response => {
+        if (response.code === 200) {
+          this.chartData = response.data.list
+        }
+      })
+
+      // this.$set(this.editObject, 'pid', '')
     }
   }
+}
 </script>
 <style lang="scss">
   .my-editor {
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 64c0ca6b..c339abca 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -553,8 +553,8 @@ import {
   isDomainDnsRecord,
   isAppBasicInfo,
   isAppRelatedDomain,
-  getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter,
-  categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor
+  getChartColor, chartBarColor, timeVerticalFormatter, timeHorizontalFormatter,
+  categoryHorizontalFormatter, categoryVerticalFormatter, getCharBartColor
 } from '@/components/charts/chart-options'
 import ChartError from '@/components/charts/ChartError'
 import EchartsFrame from '@/components/charts/EchartsFrame'
@@ -633,7 +633,7 @@ export default {
             name: '192.168.20.26',
             num: 345
           }
-        ], // table的所有数据
+        ] // table的所有数据
       },
       pieTableData: [],
       singleValue: {
@@ -713,9 +713,9 @@ export default {
               this.initAppRelatedDomain(chartParams)
             } else if (this.isEchartsTimeBar) {
               this.initEchartsTimeBar(chartParams)
-            }else if (this.isEchartsCategoryBar) {
+            } else if (this.isEchartsCategoryBar) {
               this.initEchartsCategoryBar(chartParams)
-            } else{
+            } else {
               this.initECharts(chartParams)
             }
           }
@@ -1654,11 +1654,11 @@ export default {
       })
     },
 
-    handleTimeChartOption(chartParams,dataArray){
+    handleTimeChartOption (chartParams, dataArray) {
       let direction = 'vertical'
-      if(chartParams.direction){
+      if (chartParams.direction) {
         direction = chartParams.direction
-        if(direction=='horizontal'){//柱状图水平方向
+        if (direction == 'horizontal') { // 柱状图水平方向
           this.chartOption.xAxis = {
             axisTick: { show: false },
             axisLine: { show: false },
@@ -1667,7 +1667,7 @@ export default {
               formatter: function (value, index, a, b) {
                 return unitConvert(value, unitTypes.number).join(' ')
               }
-            },
+            }
           }
 
           this.chartOption.yAxis = {
@@ -1676,16 +1676,16 @@ export default {
             axisLine: { show: false },
             axisLabel: {
               interval: 0,
-              //rotate: -40, //设置日期显示样式（倾斜度）
-              formatter: function (value) {//在这里写你需要的时间格式
+              // rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) { // 在这里写你需要的时间格式
                 return window.$dayJs.tz(Number(value)).format('M/D H:m')
               }
             },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
+            axisPointer: { // y轴上显示指针对应的值
+              show: true
+            }
           }
-        } else if(direction=='vertical'){//柱状图竖直方向
+        } else if (direction == 'vertical') { // 柱状图竖直方向
           this.chartOption.yAxis = {
             axisTick: { show: false },
             axisLine: { show: false },
@@ -1703,40 +1703,40 @@ export default {
             axisLine: { show: false },
             axisLabel: {
               interval: 0,
-              //rotate: -40, //设置日期显示样式（倾斜度）
-              formatter: function (value) {//在这里写你需要的时间格式
+              // rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) { // 在这里写你需要的时间格式
                 return window.$dayJs.tz(Number(value)).format('M/D H:m')
               }
             },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
+            axisPointer: { // y轴上显示指针对应的值
+              show: true
+            }
           }
         }
       }
 
-      let itemColorAlternately = false//true|false 柱体色是否轮替
-      if(chartParams.itemColorAlternately){
+      let itemColorAlternately = false// true|false 柱体色是否轮替
+      if (chartParams.itemColorAlternately) {
         itemColorAlternately = chartParams.itemColorAlternately
       }
 
       this.chartOption.tooltip = {
         ...this.chartOption.tooltip,
-        formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter
+        formatter: (direction == 'horizontal') ? timeHorizontalFormatter : timeVerticalFormatter
       }
 
-      this.chartOption.series =  {
+      this.chartOption.series = {
         ...this.chartOption.series[0],
         name: this.chartInfo.name,
         data: dataArray,
         itemStyle: {
-          color:  function(params) {
-            if(itemColorAlternately){
+          color: function (params) {
+            if (itemColorAlternately) {
               return getCharBartColor([params.dataIndex])
-            }else {
+            } else {
               return getCharBartColor(0)
             }
-          },
+          }
         }
       }
     },
@@ -1753,23 +1753,23 @@ export default {
           }
 
           let dataArray = []
-          if(chartParams.direction=='vertical') {//柱状图竖直方向
+          if (chartParams.direction == 'vertical') { // 柱状图竖直方向
             dataArray = response.data.result[0].values.map((r, i) => {
-              return  [Number(r[0]),Number(r[1]),chartParams.unitType]
+              return [Number(r[0]), Number(r[1]), chartParams.unitType]
             })
-          }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+          } else if (chartParams.direction == 'horizontal') { // 柱状图水平方向
             dataArray = response.data.result[0].values.map((r, i) => {
-              return  [ Number(r[1]),Number(r[0]),chartParams.unitType]
+              return [Number(r[1]), Number(r[0]), chartParams.unitType]
             })
           }
 
-          this.handleTimeChartOption(chartParams,dataArray)
+          this.handleTimeChartOption(chartParams, dataArray)
         } else {
           this.isError = true
           this.noData = true
           this.errorInfo = response.msg || response.message || 'Unknown'
 
-          //产生测试数据
+          // 产生测试数据
           this.initTestTimeBarData(chartParams)
         }
         this.myChart.setOption(this.chartOption)
@@ -1783,21 +1783,21 @@ export default {
       })
     },
 
-    initTestTimeBarData(chartParams){
+    initTestTimeBarData (chartParams) {
       this.noData = false
-      let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]]
+      const data = [[1612113120000, '9'], [1612113220000, '2'], [1612113320000, '3'], [1612113420000, '4'], [1612113520000, '1'], [1612113620000, '5'], [1612113720000, '7'], [1612113820000, '9']]
       let dataArray = []
-      if(chartParams.direction=='vertical') {//柱状图竖直方向
+      if (chartParams.direction == 'vertical') { // 柱状图竖直方向
         dataArray = data.map((r, i) => {
-          return  [r[0],Number(r[1]),chartParams.unitType]
+          return [r[0], Number(r[1]), chartParams.unitType]
         })
-      }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+      } else if (chartParams.direction == 'horizontal') { // 柱状图水平方向
         dataArray = data.map((r, i) => {
-          return  [ Number(r[1]),r[0],chartParams.unitType]
+          return [Number(r[1]), r[0], chartParams.unitType]
         })
       }
 
-      this.handleTimeChartOption(chartParams,dataArray)
+      this.handleTimeChartOption(chartParams, dataArray)
     },
 
     initEchartsCategoryBar (chartParams) {
@@ -1812,18 +1812,18 @@ export default {
           }
 
           let dataArray = []
-          if(chartParams.direction=='horizontal'){//柱状图水平方向
-            dataArray = response.data.result.map((r, i) => {return [r.num,r.name]})
-          } else if(chartParams.direction=='vertical'){//柱状图竖直方向
-            dataArray = response.data.result.map((r, i) => {return [r.name,r.num]})
+          if (chartParams.direction == 'horizontal') { // 柱状图水平方向
+            dataArray = response.data.result.map((r, i) => { return [r.num, r.name] })
+          } else if (chartParams.direction == 'vertical') { // 柱状图竖直方向
+            dataArray = response.data.result.map((r, i) => { return [r.name, r.num] })
           }
-          this.handleCategoryChartOption(chartParams,dataArray)
+          this.handleCategoryChartOption(chartParams, dataArray)
         } else {
           this.isError = true
           this.noData = true
           this.errorInfo = response.msg || response.message || 'Unknown'
 
-          //产生测试数据
+          // 产生测试数据
           this.initTestCategoryBarData(chartParams)
         }
         this.myChart.setOption(this.chartOption)
@@ -1837,29 +1837,29 @@ export default {
       })
     },
 
-    handleCategoryChartOption(chartParams,dataArray){
+    handleCategoryChartOption (chartParams, dataArray) {
       let xType = 'category'
       let yType = 'value'
       let direction = 'vertical'
-      if(chartParams.direction){
-          direction = chartParams.direction
-          if(direction=='horizontal'){//柱状图水平方向
-            xType = 'value'
-            yType = 'category'
-          } else if(direction=='vertical'){//柱状图竖直方向
-            xType = 'category'
-            yType = 'value'
-          }
+      if (chartParams.direction) {
+        direction = chartParams.direction
+        if (direction == 'horizontal') { // 柱状图水平方向
+          xType = 'value'
+          yType = 'category'
+        } else if (direction == 'vertical') { // 柱状图竖直方向
+          xType = 'category'
+          yType = 'value'
+        }
       }
 
-      let itemColorAlternately = false//true|false 柱体色是否轮替
-      if(chartParams.itemColorAlternately){
+      let itemColorAlternately = false// true|false 柱体色是否轮替
+      if (chartParams.itemColorAlternately) {
         itemColorAlternately = chartParams.itemColorAlternately
       }
 
       this.chartOption.tooltip = {
         ...this.chartOption.tooltip,
-        formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
+        formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter
       }
       this.chartOption.xAxis = {
         ...this.chartOption.xAxis,
@@ -1869,59 +1869,59 @@ export default {
         ...this.chartOption.yAxis,
         type: yType
       }
-      this.chartOption.series =  {
+      this.chartOption.series = {
         ...this.chartOption.series[0],
         data: dataArray,
         itemStyle: {
-          color:  function(params) {
-            if(itemColorAlternately){
+          color: function (params) {
+            if (itemColorAlternately) {
               return getCharBartColor([params.dataIndex])
-            }else {
+            } else {
               return getCharBartColor(0)
             }
-          },
+          }
         }
       }
     },
 
-    initTestCategoryBarData(chartParams){
+    initTestCategoryBarData (chartParams) {
       this.noData = false
 
       let xType = 'category'
       let yType = 'value'
       let direction = 'vertical'
-      if(chartParams.direction){
+      if (chartParams.direction) {
         direction = chartParams.direction
-        if(direction=='horizontal'){//柱状图水平方向
+        if (direction == 'horizontal') { // 柱状图水平方向
           xType = 'value'
           yType = 'category'
-        } else if(direction=='vertical'){//柱状图竖直方向
+        } else if (direction == 'vertical') { // 柱状图竖直方向
           xType = 'category'
           yType = 'value'
         }
       }
 
-      let itemColorAlternately = false//true|false 柱体色是否轮替
-      if(chartParams.itemColorAlternately){
+      let itemColorAlternately = false// true|false 柱体色是否轮替
+      if (chartParams.itemColorAlternately) {
         itemColorAlternately = chartParams.itemColorAlternately
       }
 
       let dataArray = []
-      if(direction=='horizontal'){//柱状图水平方向
-        dataArray =  [
-          [240,'中国出版集团公司'],
-          [200,'中国铁路总公司'],
-          [175,'中国烟草总公司'],
-          [140,'中国邮政集团公司'],
-          [99,'中国石油天然气集团公司']
+      if (direction == 'horizontal') { // 柱状图水平方向
+        dataArray = [
+          [240, '中国出版集团公司'],
+          [200, '中国铁路总公司'],
+          [175, '中国烟草总公司'],
+          [140, '中国邮政集团公司'],
+          [99, '中国石油天然气集团公司']
         ]
-      } else if(direction=='vertical'){//柱状图竖直方向
-        dataArray =  [
-            ['中国出版集团公司',240],
-            ['中国铁路总公司',200],
-            ['中国烟草总公司',175],
-            ['中国邮政集团公司',140],
-            ['中国石油天然气集团公司',99]
+      } else if (direction == 'vertical') { // 柱状图竖直方向
+        dataArray = [
+          ['中国出版集团公司', 240],
+          ['中国铁路总公司', 200],
+          ['中国烟草总公司', 175],
+          ['中国邮政集团公司', 140],
+          ['中国石油天然气集团公司', 99]
         ]
       }
 
@@ -1933,17 +1933,17 @@ export default {
             width: '20px',
             overflow: 'truncate'
           },
-          formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
+          formatter: (direction == 'horizontal') ? categoryHorizontalFormatter : categoryVerticalFormatter,
           show: true,
           className: 'nz-chart-tooltip',
           extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
         },
-        xAxis:{
+        xAxis: {
           type: xType,
           axisTick: { show: false },
           axisLine: { show: false }
         },
-        yAxis:{
+        yAxis: {
           type: yType,
           axisTick: { show: false },
           axisLine: { show: false }
@@ -1953,23 +1953,23 @@ export default {
           left: 10,
           right: 25,
           bottom: 20,
-          containLabel:true
+          containLabel: true
         },
-        color:chartBarColor,
+        color: chartBarColor,
         series: [{
           barWidth: 15,
           data: dataArray,
           type: 'bar',
-          label: {show: false},
+          label: { show: false },
           barCategoryGap: '10%',
           itemStyle: {
-            color:  function(params) {
-              if(itemColorAlternately){
+            color: function (params) {
+              if (itemColorAlternately) {
                 return getCharBartColor([params.dataIndex])
-              }else {
+              } else {
                 return getCharBartColor(0)
               }
-            },
+            }
           }
         }]
       }
@@ -2288,8 +2288,8 @@ export default {
       chartActiveIpTableOrderOptions,
       chartPieTableTopOptions,
       isEcharts: isEcharts(props.chart.type),
-      isEchartsTimeBar:isEchartsTimeBar(props.chart.type),
-      isEchartsCategoryBar:isEchartsCategoryBar(props.chart.type),
+      isEchartsTimeBar: isEchartsTimeBar(props.chart.type),
+      isEchartsCategoryBar: isEchartsCategoryBar(props.chart.type),
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
       isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
       isSingleValue: isSingleValue(props.chart.type),