CN-229 Cyptocurrency--挖矿事件统计新图表开发

CN-230 Cyptocurrency--矿机所属单位新图表开发

src/components/charts/ChartTableActiveIp.vue

@@ -22,8 +22,8 @@
       >
         <el-table-column>
           <template #default="{ row }">
-              <div class="header__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
+              <div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
-             <div class="content__name" >
+             <div class="active-ip__content" >
                {{row['name']}}
              </div>
           </template>
@@ -85,7 +85,7 @@ export default {
 
 <style>
 
-  .header__icon {
+  .active-ip__icon {
     overflow: hidden;
     position: absolute;
     top: 8px;
@@ -103,7 +103,7 @@ export default {
   .ip-green {
     color: #23BF9A;
   }
-  .content__name {
+  .active-ip__content {
     position: absolute;
     top: 7px;
     left: 35px;

src/components/charts/chart-options.js

@@ -11,9 +11,13 @@ 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 function getChartColor (index) {
   return chartColor[index % chartColor.length]
 }
+export function getCharBartColor (index) {
+  return chartBarColor[index % chartBarColor.length]
+}
 const line = {
   tooltip: {
     appendToBody: true,
@@ -464,11 +468,116 @@ const ipOpenPortBar = {
     barCategoryGap: '10%'
   }]
 }
+const categoryBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: categoryVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'category',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  grid: {
+    top: 20,
+    left: 10,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+        color:  function(params) {
+          return getCharBartColor([params.dataIndex])
+        },
+    }
+  }]
+}
+
+const timeBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: timeVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'time',
+    axisTick: { show: false },
+    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(':');
+      }
+    }
+  },
+  grid: {
+    top: 20,
+    left: 25,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      formatter: function (value, index, a, b) {
+        return unitConvert(value, unitTypes.number).join(' ')
+      }
+    },
+    minInterval: 1
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+      color:  function(params) {
+        return getCharBartColor([params.dataIndex])
+      },
+    }
+  }]
+}
 const typeOptionMappings = [
   { value: 11, option: line }, // 常规折线图
   { value: 12, option: lineWithStatistics }, // 带统计表格的折线图
   { value: 13, option: lineStack }, // 折线堆叠图
   { value: 22, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
+  { value: 23, option: timeBar }, // 矿机所属单位
+  { value: 24, option: categoryBar }, // 挖矿事件统计
   { value: 31, option: pieWithTable }, // 常规折线图
   { value: 33, option: ipHostedDomain }, // ip详情--托管域名
   { value: 34, option: ipHostedDomain }, // app详情--相关域名
@@ -499,6 +608,14 @@ export function getTypeCategory (type) {
     return typeCategory.TABS
   }
 }
+/* 柱状图:挖矿事件统计(time类型柱状图) */
+export function isEchartsTimeBar (type) {
+  return type == 23
+}
+/* 柱状图:矿机所属单位(category类型柱状图) */
+export function isEchartsCategoryBar (type) {
+  return type == 24
+}
 /* 饼图柱状图等 */
 export function isEcharts (type) {
   return type >= 11 && type <= 50
@@ -631,3 +748,69 @@ function axiosFormatter (params) {
   str += '</div>'
   return str
 }
+
+export function timeVerticalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[1], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+
+export function timeHorizontalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[1]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[0], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+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 += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+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 += '</div>'
+  })
+  str += '</div>'
+  return str
+}

src/components/rightBox/settings/ChartBox.vue

@@ -54,13 +54,13 @@
                        size="small"
                        @change="getChartData">
 
-                <el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('cyptocurrency.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('overall.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.appEntityDetail" :label="$t('entities.appEntityDetail')" :value="panelTypeAndRouteMapping.appEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.appEntityDetail" :label="$t('entities.appEntityDetail')" :value="panelTypeAndRouteMapping.appEntityDetail"></el-option>
 
             </el-select>
           </el-form-item>
@@ -131,269 +131,282 @@
 </template>
 
 <script>
-import rightBoxMixin from '@/mixins/rightBox'
+  import rightBoxMixin from '@/mixins/rightBox'
-import { get, post, put } from '@/utils/http'
+  import { get, post, put } from '@/utils/http'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
+  import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api } from '@/utils/api'
+  import { api } from '@/utils/api'
-import { VAceEditor } from 'vue3-ace-editor'
+  import { VAceEditor } from 'vue3-ace-editor'
-import 'ace-builds/src-noconflict/mode-javascript'
+  import 'ace-builds/src-noconflict/mode-javascript'
-import 'ace-builds/src-noconflict/mode-json'
+  import 'ace-builds/src-noconflict/mode-json'
-import 'ace-builds/src-noconflict/theme-chrome'
+  import 'ace-builds/src-noconflict/theme-chrome'
 
-export default {
+  export default {
-  name: 'ChartBox',
+    name: 'ChartBox',
-  mixins: [rightBoxMixin],
+    mixins: [rightBoxMixin],
-  components: {
+    components: {
-    VAceEditor
+      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: 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记录'
-        }
-      ]
-    }
-  },
-  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
     },
-    /* 密码失去焦点 检验确认密码 */
+    data () {
-    pinBlur () {
+      return {
-      if (this.editObject.pin && this.editObject.pinChange) {
+        url: api.chart,
-        this.$refs.chartForm.validateField('pinChange')
+        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: '近期挖矿事件'
+          }
+        ]
       }
     },
-    save () {
+    setup () {
-      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) {
+    mounted () {
-      await get('/visual/chart?panelId=' + value).then(response => {
+      if (this.editObject.id) {
-        if (response.code === 200) {
+        this.getChartData(this.editObject.panelId)
-          this.chartData = response.data.list
+      }
+    },
+    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.$set(this.editObject, 'pid', '')
+        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 {

src/views/charts/Chart.vue

@@ -113,7 +113,7 @@
           <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
         </template>
       </el-popover>
-      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+      <span class="header__operation-btn" @click="refresh" ><i class="cn-icon cn-icon-refresh"></i></span>
     </template>
     <template #default>
       <!-- IP详情 开放端口 -->
@@ -271,6 +271,7 @@
           </template>
         </el-select>
       </div>
+      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
     </template>
   </chart-table-active-ip>
   <!-- 表格 -->
@@ -536,6 +537,8 @@ import {
   layoutConstant,
   isEchartsWithTable,
   isEchartsWithStatistics,
+  isEchartsTimeBar,
+  isEchartsCategoryBar,
   isMapLine,
   isMapBlock,
   isSingleValueWithEcharts,
@@ -550,7 +553,8 @@ import {
   isDomainDnsRecord,
   isAppBasicInfo,
   isAppRelatedDomain,
-  getChartColor
+  getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter,
+  categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor
 } from '@/components/charts/chart-options'
 import ChartError from '@/components/charts/ChartError'
 import EchartsFrame from '@/components/charts/EchartsFrame'
@@ -630,7 +634,6 @@ export default {
             num: 345
           }
         ], // table的所有数据
-        currentPageData: [] // table当前页的数据
       },
       pieTableData: [],
       singleValue: {
@@ -708,7 +711,11 @@ export default {
               this.initIpHostedDomain(chartParams)
             } else if (this.isAppRelatedDomain) {
               this.initAppRelatedDomain(chartParams)
-            } else {
+            } else if (this.isEchartsTimeBar) {
+              this.initEchartsTimeBar(chartParams)
+            }else if (this.isEchartsCategoryBar) {
+              this.initEchartsCategoryBar(chartParams)
+            } else{
               this.initECharts(chartParams)
             }
           }
@@ -1646,6 +1653,328 @@ export default {
         }, 250)
       })
     },
+
+    handleTimeChartOption(chartParams,dataArray){
+      let direction = 'vertical'
+      if(chartParams.direction){
+        direction = chartParams.direction
+        if(direction=='horizontal'){//柱状图水平方向
+          this.chartOption.xAxis = {
+            axisTick: { show: false },
+            axisLine: { show: false },
+            type: 'value',
+            axisLabel: {
+              formatter: function (value, index, a, b) {
+                return unitConvert(value, unitTypes.number).join(' ')
+              }
+            },
+          }
+
+          this.chartOption.yAxis = {
+            type: 'category',
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              interval: 0,
+              //rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) {//在这里写你需要的时间格式
+                return window.$dayJs.tz(Number(value)).format('M/D H:m')
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+          }
+        } else if(direction=='vertical'){//柱状图竖直方向
+          this.chartOption.yAxis = {
+            axisTick: { show: false },
+            axisLine: { show: false },
+            type: 'value',
+            axisLabel: {
+              formatter: function (value, index, a, b) {
+                return unitConvert(value, unitTypes.number).join(' ')
+              }
+            },
+            minInterval: 1
+          }
+          this.chartOption.xAxis = {
+            type: 'category',
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              interval: 0,
+              //rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) {//在这里写你需要的时间格式
+                return window.$dayJs.tz(Number(value)).format('M/D H:m')
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+          }
+        }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      this.chartOption.tooltip = {
+        ...this.chartOption.tooltip,
+        formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter
+      }
+
+      this.chartOption.series =  {
+        ...this.chartOption.series[0],
+        name: this.chartInfo.name,
+        data: dataArray,
+        itemStyle: {
+          color:  function(params) {
+            if(itemColorAlternately){
+              return getCharBartColor([params.dataIndex])
+            }else {
+              return getCharBartColor(0)
+            }
+          },
+        }
+      }
+    },
+
+    initEchartsTimeBar (chartParams) {
+      const queryParams = { ...this.queryTimeRange, ...this.entity }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          if (this.$_.isEmpty(response.data.result)) {
+            this.noData = true
+            return
+          } else {
+            this.noData = false
+          }
+
+          let dataArray = []
+          if(chartParams.direction=='vertical') {//柱状图竖直方向
+            dataArray = response.data.result[0].values.map((r, i) => {
+              return  [Number(r[0]),Number(r[1]),chartParams.unitType]
+            })
+          }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+            dataArray = response.data.result[0].values.map((r, i) => {
+              return  [ Number(r[1]),Number(r[0]),chartParams.unitType]
+            })
+          }
+
+          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)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+    },
+
+    initTestTimeBarData(chartParams){
+      this.noData = false
+      let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]]
+      let dataArray = []
+      if(chartParams.direction=='vertical') {//柱状图竖直方向
+        dataArray = data.map((r, i) => {
+          return  [r[0],Number(r[1]),chartParams.unitType]
+        })
+      }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+        dataArray = data.map((r, i) => {
+          return  [ Number(r[1]),r[0],chartParams.unitType]
+        })
+      }
+
+      this.handleTimeChartOption(chartParams,dataArray)
+    },
+
+    initEchartsCategoryBar (chartParams) {
+      const queryParams = { ...this.queryTimeRange, ...this.entity }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          if (this.$_.isEmpty(response.data.result)) {
+            this.noData = true
+            return
+          } else {
+            this.noData = false
+          }
+
+          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]})
+          }
+          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)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+    },
+
+    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'
+          }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      this.chartOption.tooltip = {
+        ...this.chartOption.tooltip,
+        formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
+      }
+      this.chartOption.xAxis = {
+        ...this.chartOption.xAxis,
+        type: xType
+      }
+      this.chartOption.yAxis = {
+        ...this.chartOption.yAxis,
+        type: yType
+      }
+      this.chartOption.series =  {
+        ...this.chartOption.series[0],
+        data: dataArray,
+        itemStyle: {
+          color:  function(params) {
+            if(itemColorAlternately){
+              return getCharBartColor([params.dataIndex])
+            }else {
+              return getCharBartColor(0)
+            }
+          },
+        }
+      }
+    },
+
+    initTestCategoryBarData(chartParams){
+      this.noData = false
+
+      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'
+        }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      let dataArray = []
+      if(direction=='horizontal'){//柱状图水平方向
+        dataArray =  [
+          [240,'中国出版集团公司'],
+          [200,'中国铁路总公司'],
+          [175,'中国烟草总公司'],
+          [140,'中国邮政集团公司'],
+          [99,'中国石油天然气集团公司']
+        ]
+      } else if(direction=='vertical'){//柱状图竖直方向
+        dataArray =  [
+            ['中国出版集团公司',240],
+            ['中国铁路总公司',200],
+            ['中国烟草总公司',175],
+            ['中国邮政集团公司',140],
+            ['中国石油天然气集团公司',99]
+        ]
+      }
+
+      this.chartOption = {
+        tooltip: {
+          appendToBody: true,
+          trigger: 'axis',
+          textStyle: {
+            width: '20px',
+            overflow: 'truncate'
+          },
+          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:{
+          type: xType,
+          axisTick: { show: false },
+          axisLine: { show: false }
+        },
+        yAxis:{
+          type: yType,
+          axisTick: { show: false },
+          axisLine: { show: false }
+        },
+        grid: {
+          top: 20,
+          left: 10,
+          right: 25,
+          bottom: 20,
+          containLabel:true
+        },
+        color:chartBarColor,
+        series: [{
+          barWidth: 15,
+          data: dataArray,
+          type: 'bar',
+          label: {show: false},
+          barCategoryGap: '10%',
+          itemStyle: {
+            color:  function(params) {
+              if(itemColorAlternately){
+                return getCharBartColor([params.dataIndex])
+              }else {
+                return getCharBartColor(0)
+              }
+            },
+          }
+        }]
+      }
+    },
+
     initEchartsWithStatistics (chartParams) {
       const queryParams = { ...this.queryTimeRange, ...this.entity }
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -1959,6 +2288,8 @@ export default {
       chartActiveIpTableOrderOptions,
       chartPieTableTopOptions,
       isEcharts: isEcharts(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),