CN-269 图表重构-echarts类型图表重构

src/assets/css/components/index.scss

@@ -27,6 +27,9 @@
 @import './views/charts/chartAppBasicInfo';
 @import './views/charts/chartDomainDnsRecord';
 @import './views/charts/chartDomainWhois';
+@import './views/charts/chartEchartWithTable';
 @import './views/charts/ipBasicInfo';
+@import './views/charts/chartEchartIpHostedDomain';
+@import './views/charts/chartEchartAppRelateDomain';
 
 //@import '../chart';

src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss

@@ -0,0 +1,70 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout > .vue-grid-item {
+      .cn-chart {
+         .app-detail__related-domain {
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+          width: 100%;
+         .related-domain__list {
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 25%;
+            overflow: auto;
+            padding-bottom: 20px;
+            border-bottom: 1px solid $--right-box-border-color;
+
+            .related-domain__list-title {
+              padding: 13px 30px 0;
+              height: 40px;
+              color: #6B717B;
+            }
+
+            .related-domain__list-body {
+              display: flex;
+              flex-direction: column;
+              height: calc(100% - 40px);
+              overflow: hidden auto;
+            }
+
+            .related-domain__list-row {
+              padding: 5px 30px;
+              color: #3976CB;
+
+              i {
+                color: #B8C1D1;
+              }
+            }
+          }
+
+          .related-domain__chart {
+            display: flex;
+            flex-direction: row;
+            flex: 1;
+
+            & > div {
+              flex: 0 0 50%;
+              display: flex;
+              flex-direction: column;
+
+              .related-domain__chart-title {
+                padding-left: 20px;
+                line-height: 50px;
+                flex: 0 0 50px;
+              }
+
+              .chart-drawing {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header {
+  border-bottom: 1px solid $--right-box-border-color;
+}

src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss

@@ -0,0 +1,67 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout > .vue-grid-item {
+      .cn-chart {
+        .ip-detail__hosted-domain {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          .hosted-domain__list {
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 25%;
+            overflow: auto;
+            padding-bottom: 20px;
+            border-bottom: 1px solid $--right-box-border-color;
+
+            .hosted-domain__list-title {
+              padding: 13px 30px 0;
+              height: 40px;
+              color: #6B717B;
+            }
+
+            .hosted-domain__list-body {
+              display: flex;
+              flex-direction: column;
+              height: calc(100% - 40px);
+              overflow: hidden auto;
+            }
+
+            .hosted-domain__list-row {
+              padding: 5px 30px;
+              color: #3976CB;
+
+              i {
+                color: #B8C1D1;
+              }
+            }
+          }
+
+          .hosted-domain__chart {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+
+            & > div {
+              flex: 0 0 50%;
+              display: flex;
+              flex-direction: column;
+
+              .hosted-domain__chart-title {
+                padding-left: 20px;
+                line-height: 50px;
+                flex: 0 0 50px;
+              }
+
+              .chart-drawing {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/assets/css/components/views/charts/chartEchartWithTable.scss

@@ -0,0 +1,78 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .cn-chart__echarts {
+          display: flex;
+          flex-direction: column;
+          height:100%;
+          .cn-chart__body {
+            flex: auto;
+            display: flex;
+            overflow: hidden auto;
+
+            .el-table {
+              padding: 0 10px;
+
+              &:before {
+                height: 0;
+              }
+              thead {
+                color: #333;
+              }
+              th.is-leaf, td {
+                border-bottom: none;
+              }
+              th {
+                padding-bottom: 5px;
+              }
+              td {
+                padding: 4px 0;
+                color: #333;
+              }
+            }
+
+            .chart-drawing{
+              height: calc(100% - 36px) !important;
+            }
+          }
+          .cn-chart__body.pie-with-table {
+            flex-basis: 40%;
+          }
+          .cn-chart__footer.pie-with-table {
+            flex-basis: 60%;
+            padding: 10px 30px 30px;
+          }
+        }
+        .pie-table {
+          font-size: 14px;
+          color: #333333;
+          font-weight: 500;
+
+          .el-table__header-wrapper {
+            .cell {
+              color: #333;
+            }
+          }
+          .el-table__expanded-cell[class*=cell] {
+            padding: 0;
+          }
+
+          .expand-table .el-table__body .el-table__row:last-of-type td {
+            border: none;
+          }
+          .expand-table {
+            font-weight: 400;
+            color: #606266;
+
+            .el-table__body-wrapper {
+              height: auto !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/charts/Chart2.vue

@@ -153,6 +153,42 @@
               @showLoading="showLoading"
       ></chart-echart-with-statistics>
 
+      <chart-echart-pie
+              v-else-if="isEchartsPie"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :result-type="resultType"
+              @showLoading="showLoading"
+      ></chart-echart-pie>
+
+      <chart-echart-with-table
+              v-else-if="isEchartsWithTable"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :query-params="queryParams"
+              :result-type="resultType"
+              :order-pie-table="orderPieTable"
+              @showLoading="showLoading"
+      ></chart-echart-with-table>
+
+      <chart-echart-ip-hosted-domain
+              v-else-if="isIpHostedDomain"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :query-params="queryParams"
+              @showLoading="showLoading"
+              :entity="entity"
+      ></chart-echart-ip-hosted-domain>
+
+      <chart-echart-app-relate-domain
+              v-else-if="isAppRelatedDomain"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :query-params="queryParams"
+              @showLoading="showLoading"
+              :entity="entity"
+      ></chart-echart-app-relate-domain>
+
     </template>
   </div>
 </template>
@@ -168,6 +204,10 @@ import ChartGroup from '@/views/charts/charts/ChartGroup'
 import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
 import ChartEchartLine from '@/views/charts/charts/ChartEchartLine'
 import ChartEchartWithStatistics from '@/views/charts/charts/ChartEchartWithStatistics'
+import ChartEchartPie from '@/views/charts/charts/ChartEchartPie'
+import ChartEchartWithTable from '@/views/charts/charts/ChartEchartWithTable'
+import ChartEchartIpHostedDomain from '@/views/charts/charts/ChartEchartIpHostedDomain'
+import ChartEchartAppRelateDomain from '@/views/charts/charts/ChartEchartAppRelateDomain'
 import ChartActiveIpTable from '@/views/charts/charts/ChartActiveIpTable'
 import ChartTimeBar from './charts/ChartTimeBar'
 import ChartCategoryBar from './charts/ChartCategoryBar'
@@ -189,6 +229,7 @@ import {
   isTitle,
   isMap,
   getOption,
+  isEchartsPie,
   isEchartsWithTable,
   isEchartsWithStatistics,
   isEchartsTimeBar,
@@ -230,14 +271,18 @@ export default {
     ChartNoData,
     ChartTabs,
     ChartMap,
-    ChartEchartLine,
     ChartBlock,
     ChartTimeBar,
     ChartCategoryBar,
     ChartIpOpenPortBar,
     ChartRelationShip,
     ChartGroup,
-    ChartEchartWithStatistics
+    ChartEchartLine,
+    ChartEchartWithStatistics,
+    ChartEchartPie,
+    ChartEchartWithTable,
+    ChartEchartIpHostedDomain,
+    ChartEchartAppRelateDomain
   },
   props: {
     chartInfo: Object,
@@ -250,7 +295,8 @@ export default {
     panelLock: Boolean,
     entity: Object,
     isError: Boolean,
-    table: Object
+    table: Object,
+    orderPieTable: Object
   },
   computed: {
     isNoData () {
@@ -270,7 +316,11 @@ export default {
     },
     showLoading (show) {
       this.$emit('showLoading', show)
+    },
+    initEchartsWithTable () {
+      this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(`chart${this.chartInfo.id}`)
     }
+
   },
   watch: {
     chartData: {
@@ -286,6 +336,7 @@ export default {
       isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
       isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
       isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
+      isEchartsPie: isEchartsPie(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
       isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
       isSingleValue: isSingleValue(props.chartInfo.type),

src/views/charts/ChartHeader.vue

@@ -71,8 +71,26 @@
       </div>
     </template>
 
+    <template v-else-if="isEchartsWithTable">
+      <div class="header__operations">
+        <div class="header__operation header__operation--table" >
+          <el-select
+                  size="mini"
+                  v-model="orderPieTable"
+                  class="option__select select-column"
+                  placeholder=""
+                  popper-class="option-popper"
+                  @change="orderPieTableChange"
+          >
+            <el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
+          </el-select>
+        </div>
+        <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+      </div>
+    </template>
+
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable && !isEchartsWithTable">
       <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
         <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
         <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -90,11 +108,11 @@
 </template>
 
 <script>
-import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup } from './charts/tools'
+import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup, isEchartsWithTable } from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import { chartTableTopOptions, chartActiveIpTableOrderOptions } from '@/utils/constants'
+import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions } from '@/utils/constants'
 
 export default {
   name: 'ChartHeader',
@@ -108,7 +126,8 @@ export default {
       type: Boolean,
       default: false
     },
-    table: Object
+    table: Object,
+    orderPieTable: Object
   },
   components: {
     ChartError
@@ -171,6 +190,9 @@ export default {
     },
     activeIpTableLimitChange () {
       this.$emit('tableChange')
+    },
+    orderPieTableChange () {
+      this.$emit('orderPieTableChange', this.orderPieTable)
     }
   },
   setup (props) {
@@ -182,12 +204,14 @@ export default {
       chartTimeFilter,
       chartTableTopOptions,
       chartActiveIpTableOrderOptions,
+      chartPieTableTopOptions,
       isTitle: isTitle(props.chartInfo.type),
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
       isCurrentTable: isCurrentTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
+      isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
       isGroup: isGroup(props.chartInfo.type)
     }
   }

src/views/charts/PanelChart.vue

@@ -13,11 +13,13 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :table="table"
+        :order-pie-table="orderPieTable"
         @loadMore="loadMore"
         @refresh="refresh"
         @groupShow="groupShow"
         @showFullscreen="showFullscreen"
         @tableChange="tableChange"
+        @orderPieTableChange="orderPieTableChange"
     ></chart-header>
     <!-- chart -->
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
@@ -34,6 +36,7 @@
         :entity="entity"
         :table="table"
         :is-fullscreen="isFullscreen"
+        :order-pie-table="orderPieTable"
         @showLoading="showLoading"
     ></chart>
   </div>
@@ -322,8 +325,13 @@ export default {
       return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
     },
     groupShow (chartInfo) {
-      this.$emit('groupShow',chartInfo)
+      this.$emit('groupShow', chartInfo)
     },
+    orderPieTableChange (orderPieTable) {
+      this.orderPieTable = orderPieTable
+      this.getChartData()
+      this.$refs.chart.initEchartsWithTable()
+    }
   },
   mounted () {
     this.showLoading(true)

src/views/charts/charts/ChartEchartAppRelateDomain.vue

@@ -0,0 +1,111 @@
+<template>
+   <div class="app-detail__related-domain">
+      <div class="related-domain__list">
+         <div class="related-domain__list-title">{{$t('overall.domain')}}</div>
+         <div class="related-domain__list-body">
+            <div class="related-domain__list-row" v-for="(data, i) in chartData" :key="i"><i class="cn-icon cn-icon-domain"></i>&nbsp;{{data}}</div>
+         </div>
+      </div>
+      <div class="related-domain__chart">
+         <div>
+            <div class="related-domain__chart-title">{{$t('entities.byCategory')}}</div>
+            <div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
+         </div>
+         <div>
+            <div class="related-domain__chart-title">{{$t('entities.byCredit')}}</div>
+            <div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {
+  ipHostedDomain
+} from '@/views/charts/charts/options/pie'
+import { replaceUrlPlaceholder, lineToSpace } from '@/utils/tools'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'ChartEchartAppRelateDomain',
+  data () {
+    return {
+      myChart: null,
+      myChart2: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    entity: Object
+  },
+  methods: {
+    initAppRelatedDomain (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(`chart${this.chartInfo.id}-0`)
+      const dom2 = document.getElementById(`chart${this.chartInfo.id}-1`)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      !this.myChart2 && (this.myChart2 = echarts.init(dom2))
+      this.chartOption = this.$_.cloneDeep(ipHostedDomain)
+      this.$emit('showLoading', true)
+      this.chartOption.series[0].data = [
+        {
+          name: 'test1',
+          value: 32
+        },
+        {
+          name: 'test2',
+          value: 21
+        },
+        {
+          name: 'test3',
+          value: 20
+        },
+        {
+          name: 'test4',
+          value: 7
+        }
+      ]
+      this.loadEchartPie()
+      /*
+        get(replaceUrlPlaceholder(chartParams.url, { appName: this.entity.appName })).then(response => {
+           if (response.code === 200) {
+              if (this.$_.isEmpty(response.data.result)) {
+                 this.noData = true
+              } else {
+                 this.detailData = response.data.result
+                 this.noData = false
+              }
+           }
+        }).finally(() => {
+           setTimeout(() => {
+              this.$emit('showLoading', false)
+           }, 250)
+        })
+         */
+    },
+
+    loadEchartPie () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+        this.myChart2.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initAppRelatedDomain(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>

src/views/charts/charts/ChartEchartIpHostedDomain.vue

@@ -0,0 +1,116 @@
+<template>
+  <!-- IP详情 托管域名 -->
+   <div class="ip-detail__hosted-domain">
+      <div class="hosted-domain__list">
+         <div class="hosted-domain__list-title">{{$t('overall.domain')}}</div>
+         <div class="hosted-domain__list-body">
+            <div class="hosted-domain__list-row" v-for="(data, i) in chartData" :key="i">{{data}}</div>
+         </div>
+      </div>
+      <div class="hosted-domain__chart">
+         <div>
+            <div class="hosted-domain__chart-title">{{$t('entities.byCategory')}}</div>
+            <div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
+         </div>
+         <div>
+            <div class="hosted-domain__chart-title">{{$t('entities.byCredit')}}</div>
+            <div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {
+  ipHostedDomain
+} from '@/views/charts/charts/options/pie'
+import { replaceUrlPlaceholder } from '@/utils/tools'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'ChartEchartIpHostedDomain',
+  data () {
+    return {
+      myChart: null,
+      myChart2: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    entity: Object
+  },
+  methods: {
+    initIpHostedDomain (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id + '-0')
+      const dom2 = document.getElementById(id + '-1')
+      !this.myChart && (this.myChart = echarts.init(dom))
+      !this.myChart2 && (this.myChart2 = echarts.init(dom2))
+      this.chartOption = this.$_.cloneDeep(ipHostedDomain)
+      this.$emit('showLoading', true)
+      const byType = new Promise(resolve => {
+        get(replaceUrlPlaceholder(chartParams.byTypeUrl, { ip: this.entity.ip })).then(response => {
+          if (response.code === 200) {
+            if (this.$_.isEmpty(response.data.result)) {
+              // this.noData0 = true
+            } else {
+              // this.noData0 = false
+              const chartOption = this.$_.cloneDeep(this.chartOption)
+              const data = response.data.result.map(d => {
+                return {
+                  data: d,
+                  name: d.category,
+                  value: parseInt(d.count),
+                  unitType: chartParams.unitType
+                }
+              })
+              chartOption.series[0].data = data
+              this.myChart.setOption(chartOption)
+            }
+          }
+          resolve()
+        })
+      })
+      const byCredit = new Promise(resolve => {
+        get(replaceUrlPlaceholder(chartParams.byCreditUrl, { ip: this.entity.ip })).then(response => {
+          if (response.code === 200) {
+            if (this.$_.isEmpty(response.data.result)) {
+              // this.noData1 = true
+            } else {
+              // this.noData1 = false
+              const chartOption = this.$_.cloneDeep(this.chartOption)
+              const data = response.data.result.map(d => {
+                return {
+                  data: d,
+                  name: d.reputation,
+                  value: parseInt(d.count),
+                  unitType: chartParams.unitType
+                }
+              })
+              chartOption.series[0].data = data
+              this.myChart2.setOption(chartOption)
+            }
+          }
+          resolve()
+        })
+      })
+      Promise.all([byType, byCredit]).finally(response => {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 1000)
+      })
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initIpHostedDomain(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>

src/views/charts/charts/ChartEchartPie.vue

@@ -0,0 +1,107 @@
+<template>
+   <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+</template>
+
+<script>
+import unitConvert from '@/utils/unit-convert'
+import * as echarts from 'echarts'
+import { lineToSpace } from '@/utils/tools'
+import { unitTypes } from '@/utils/constants'
+import {
+  pieWithTable
+} from '@/views/charts/charts/options/pie'
+
+export default {
+  name: 'ChartEchartPie',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object
+  },
+  methods: {
+    initPie (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(pieWithTable)
+      if (chartParams.showLegend === false) {
+        this.chartOption.legend.show = false
+      }
+      const allZero = this.timeLineIsAllZero(this.chartData)
+      if (allZero) {
+        this.chartOption.yAxis = {
+          ...this.chartOption.yAxis,
+          min: 0,
+          max: 5,
+          interval: 1
+        }
+      }
+      this.chartOption.series[0].data = this.chartData.map(d => {
+        return {
+          data: d,
+          name: lineToSpace(d.name),
+          value: parseInt(d.num),
+          unitType: chartParams.unitType
+        }
+      })
+      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+      const gridTop = 10 + 27 * rows
+
+      if (chartParams.unitType === unitTypes.byte) {
+        this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
+          return unitConvert(value, unitTypes.byte).join(' ')
+        }
+        this.chartOption.grid = {
+          top: gridTop,
+          left: 75
+        }
+      } else {
+        this.chartOption.grid = {
+          top: gridTop
+        }
+      }
+      this.loadEchartPie()
+    },
+    loadEchartPie () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    },
+    timeLineIsAllZero (data) {
+      if (this.resultType === 'matrix') {
+        let allZero = true
+        try {
+          data.forEach(d => {
+            d.values.forEach(r => {
+              if (r[1] && r[1] !== '0') {
+                allZero = false
+                throw new Error('break')
+              }
+            })
+          })
+        } catch (e) {}
+        return allZero
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initPie(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>

src/views/charts/charts/ChartEchartWithTable.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="cn-chart__echarts" >
+    <div class="cn-chart__body pie-with-table" >
+      <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+    </div>
+    <div class="cn-chart__footer pie-with-table" >
+      <pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :time-filter="queryParams" :order="orderPieTable"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import PieTable from '@/components/charts/PieTable'
+import {
+  pieWithTable
+} from '@/views/charts/charts/options/pie'
+import { getUnitType } from '@/utils/unit-convert'
+import { replaceUrlPlaceholder } from '@/utils/tools'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'ChartEchartWithTable',
+  data () {
+    return {
+      myChart: null,
+      chartOption: null,
+      pieTableData: [],
+      selectPieChartName: '',
+      allSelectPieChartName: []
+    }
+  },
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object,
+    queryParams: Object,
+    orderPieTable: Object
+  },
+  components: {
+    PieTable
+  },
+  mounted () {
+  },
+  methods: {
+    initEchartsWithTable (id) {
+      const chartParams = this.chartInfo.params
+      const dom = document.getElementById(id)
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = this.$_.cloneDeep(pieWithTable)
+
+      chartParams.valueColumn = this.orderPieTable
+      const unitType = getUnitType(chartParams.valueColumn)
+      const tableQueryParams = this.$_.cloneDeep(this.queryParams)
+      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
+
+      const allZero = this.timeLineIsAllZero(this.chartData)
+      if (allZero) {
+        this.chartOption.yAxis = {
+          ...this.chartOption.yAxis,
+          min: 0,
+          max: 5,
+          interval: 1
+        }
+      }
+
+      const data = this.chartData.map(d => {
+        if (d[chartParams.nameColumn]) {
+          this.allSelectPieChartName.push(d[chartParams.nameColumn])
+        }
+        return {
+          data: d,
+          name: d[chartParams.nameColumn],
+          value: parseInt(d[chartParams.valueColumn]),
+          unitType: unitType
+        }
+      })
+
+      this.allSelectPieChartName = tableQueryParams[chartParams.nameColumn]
+      this.chartOption.series[0].data = data
+      if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
+        this.chartOption.legend.type = 'scroll'
+      }
+
+      console.log('table===' + JSON.stringify(this.chartOption))
+
+      this.loadEchartWithTable()
+
+      if (!this.$_.isEmpty(data)) {
+        get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
+          if (response.code === 200) {
+            this.pieTableData = response.data.result
+          } else {
+            // this.isError = true
+            this.noData = true
+            // this.errorInfo = response.msg || response.message || 'Unknown'
+          }
+        })
+      }
+
+      const self = this
+      // legend点击事件
+      this.myChart.off('legendselectchanged')
+      this.myChart.on('legendselectchanged', function (params) {
+        self.myChart.setOption({
+          legend: { selected: { [params.name]: true } }
+        })
+        const index = self.chartOption.series[0].data.findIndex(d => d.name === params.name)
+        if (self.selectPieChartName !== params.name) {
+          self.myChart.dispatchAction({
+            type: 'select',
+            seriesIndex: 0,
+            dataIndex: index
+          })
+          self.selectPieChartName = params.name
+          self.loadPieTableData(params.name)
+        } else {
+          self.myChart.dispatchAction({
+            type: 'unselect',
+            seriesIndex: 0,
+            dataIndex: index
+          })
+          self.selectPieChartName = ''
+          self.loadPieTableData(this.allSelectPieChartName)
+        }
+      })
+      // 饼图色块点击事件
+      this.myChart.off('click')
+      this.myChart.on('click', function (echartParams) {
+        console.log(echartParams)
+        console.log(self.selectPieChartName)
+        // 若是已选，则点击后取消选择，并查询全部数据
+        if (echartParams.name === self.selectPieChartName) {
+          console.log(1)
+          self.selectPieChartName = ''
+          self.loadPieTableData(this.allSelectPieChartName)
+        } else { // 否则查询当前name数据
+          self.selectPieChartName = echartParams.name
+          self.loadPieTableData(echartParams.name)
+        }
+      })
+    },
+
+    loadPieTableData (name = '') {
+      const childrenParams = this.$_.cloneDeep(this.queryParams)
+      childrenParams[this.chartInfo.params.nameColumn] = name
+      get(replaceUrlPlaceholder(this.chartInfo.params.urlTable, childrenParams)).then(response => {
+        if (response.code === 200) {
+          this.pieTableData = response.data.result
+        }
+      })
+    },
+
+    loadEchartWithTable () {
+      this.$emit('showLoading', true)
+      try {
+        this.myChart.setOption(this.chartOption)
+      } finally {
+        setTimeout(() => {
+          this.$emit('showLoading', false)
+        }, 200)
+      }
+    },
+    timeLineIsAllZero (data) {
+      if (this.resultType === 'matrix') {
+        let allZero = true
+        try {
+          data.forEach(d => {
+            d.values.forEach(r => {
+              if (r[1] && r[1] !== '0') {
+                allZero = false
+                throw new Error('break')
+              }
+            })
+          })
+        } catch (e) {}
+        return allZero
+      }
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        this.initEchartsWithTable(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>

src/views/charts/charts/chart-options.js

@@ -664,6 +664,10 @@ export function isSingleValueWithEchartsTemp (type) {
 export function isEchartsWithTable (type) {
   return type === 31
 }
+/* 普通饼图 */
+export function isEchartsPie (type) {
+  return type === 32
+}
 /* table */
 export function isTable (type) {
   return type >= 61 && type <= 70

src/views/charts/charts/tools.js

@@ -69,6 +69,10 @@ export function isMapBlock (type) {
 export function isEchartsLine (type) {
   return type === 11
 }
+/* 普通饼图 */
+export function isEchartsPie (type) {
+  return type === 32
+}
 /* 带统计的折线图 */
 export function isEchartsWithStatistics (type) {
   return type === 12