相邻层次图

src/components/chart/antvChart.vue

@@ -4,6 +4,7 @@
 <script>
 import DataSet from '@antv/data-set'
 import { Chart } from '@antv/g2'
+const ds = new DataSet()
 export default {
   props: {
     id: {
@@ -24,15 +25,14 @@ export default {
   },
   data() {
     return {
-      chart: null,
-      ds: null
+      chart: null
     }
   },
   watch: {
     option: {
       handler(newValue, oldValue) {
         this.$nextTick(() => {
-          this.changeChart()
+          this.initChart()
         })
       },
       deep: true
@@ -40,87 +40,36 @@ export default {
     data: {
       handler(newValue, oldValue) {
         this.$nextTick(() => {
-          this.changeChart()
+          this.initChart()
         })
       },
       deep: true
     }
   },
   mounted() {
-    this.initChart1()
+    this.initChart()
   },
   methods: {
     initChart() {
-      fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/flare.json')
-        .then((res) => res.json())
-        .then((data) => {
-          const ds = new DataSet()
-          const dv = ds.createView().source(data, {
-            type: 'hierarchy'
-          })
-          dv.transform({
-            type: 'hierarchy.partition'
-          })
-          const chart = new Chart({
-            container: this.id,
-            autoFit: true,
-            height: 500,
-            padding: 0
-          })
-          chart.data(
-            dv.getAllNodes().map((node) => ({
-              name: node.data.name,
-              value: node.value,
-              depth: node.depth,
-              x: node.x,
-              y: node.y
-            }))
-          )
-          console.log(dv.getAllNodes().map((node) => ({
-            name: node.data.name,
-            value: node.value,
-            depth: node.depth,
-            x: node.x,
-            y: node.y
-          })))
-          chart.scale({
-            x: { nice: true },
-            y: { nice: true }
-          })
-          chart.tooltip({
-            showTitle: false,
-            showMarkers: false
-          })
-          chart.axis(false)
-          chart.legend(false)
-          chart
-            .polygon()
-            .position('x*y')
-            .color('name')
-          chart.interaction('element-active')
-          chart.render()
-        })
-    },
-    initChart1() {
-      const ds = new DataSet()
+      this.chart && this.chart.destroy()
       const dv = ds.createView().source(this.data, {
         type: 'hierarchy'
       })
       dv.transform({
         type: 'hierarchy.partition'
       })
-      const chart = new Chart({
+      this.chart = new Chart({
         container: this.id,
         autoFit: true,
         height: 400,
         padding: 0
       })
-      chart.data(
+      this.chart.data(
         dv.getAllNodes().map((node) => {
           if (node) {
             return {
               name: node.data.name,
-              value: node.data.count,
+              value: node.data.value,
               depth: node.depth,
               x: node.x,
               y: node.y
@@ -128,49 +77,43 @@ export default {
           }
         })
       )
-      console.log(dv.getAllNodes().map((node) => {
-        if (node) {
-          return {
-            name: node.data.name,
-            value: node.data.count,
-            depth: node.depth,
-            x: node.x,
-            y: node.y
-          }
-        }
-      }))
-      chart.scale({
+      this.chart.scale({
         x: { nice: true },
         y: { nice: true }
       })
-      chart.tooltip({
+      this.chart.tooltip({
         showTitle: false,
         showMarkers: false
       })
-      chart.axis(false)
-      chart.legend(false)
-      chart
+      this.chart.axis(false)
+      this.chart.legend(false)
+      this.chart
         .polygon()
         .position('x*y')
         .color('name')
-      chart.interaction('element-active')
-      chart.render()
-    },
-    changeChart() {
-      console.log(this.data)
-      const dv = this.ds.createView().source(this.data, {
-        type: 'hierarchy'
-      })
-      dv.transform({
-        type: 'hierarchy.partition'
-      })
-      this.chart.changeData(dv.getAllNodes().map((node) => ({
-        name: node.data.name,
-        value: node.count,
-        depth: node.depth,
-        x: node.x,
-        y: node.y
-      })))
+        .tooltip('name*value', function(name, value) {
+          return {
+            name,
+            value
+          }
+        })
+        .label(
+          'name',
+          {
+            offset: 0,
+            style: {
+              textBaseline: 'middle',
+              fill: '#000',
+              shadowBlur: 10,
+              shadowColor: '#fff'
+            },
+            layout: {
+              type: 'limit-in-shape'
+            }
+          }
+        )
+      this.chart.interaction('element-active')
+      this.chart.render()
     }
   }
 }

src/views/quality/requireStatistics.vue

@@ -142,10 +142,10 @@
         <h3>状态停留分布图</h3>
         <status-stay-chart :chart-data="statusStayData" />
       </div>
-      <!-- <div class="chart-item">
+      <div class="chart-item">
         <h3>需求方向分布图</h3>
         <belong-chart :chart-data="orntDistributeData" />
-      </div> -->
+      </div>
       <div class="chart-item">
         <h3>排期发生变更的任务（{{ changeTotal }}）</h3>
         <change-require-chart :chart-data="changeRequireData" />
@@ -180,7 +180,7 @@ import cycleStatistic from './components/cycleStatistic'
 import developmentCycle from './components/developmentCycle'
 import distributionChart from './components/distributionChart'
 import statusStayChart from './components/statusStayChart'
-// import belongChart from './components/belongChart'
+import belongChart from './components/belongChart'
 import changeRequireChart from './components/changeRequireChart'
 import bugList from './components/bugList'
 export default {
@@ -191,7 +191,7 @@ export default {
     developmentCycle,
     distributionChart,
     statusStayChart,
-    // belongChart
+    belongChart,
     changeRequireChart,
     bugList
   },
@@ -398,8 +398,7 @@ export default {
       let num = 0
       const bfs = (arr) => {
         for (const item of arr) {
-          item.count++
-          num = num + item.count
+          num = num + item.value
           if (item.children && item.children.length > 0) {
             bfs(item.children)
           } else {
@@ -408,7 +407,7 @@ export default {
         }
       }
       bfs(arr)
-      return { children: arr, name: '总量', count: num }
+      return { children: arr, name: '总量', value: num }
     },
     async getReqUnlockData() { // 排期发生变更的需求
       const params = {