feat：饼图使用D3实现

nezha-fronted/src/components/chart/chart.vue

@@ -18,18 +18,9 @@
         @chartIsNoData="chartIsNoData"
         :from="from"
       ></chart-time-series>
-      <chart-pie
-        :ref="'chart' + chartInfo.id"
-        v-if="isChartPie(chartInfo.type)"
-        :chart-data="chartData"
-        :chart-info="chartInfo"
-        :chart-option="chartOption"
-        :is-fullscreen="isFullscreen"
-        @chartIsNoData="chartIsNoData"
-      ></chart-pie>
       <chart-doughnut
         :ref="'chart' + chartInfo.id"
-        v-if="isDoughnut(chartInfo.type)"
+        v-if="isChartPie(chartInfo.type)||isDoughnut(chartInfo.type)"
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"

nezha-fronted/src/components/chart/chart/chartDoughnut.vue

@@ -172,7 +172,7 @@ export default {
         .attr('viewBox', [-width / 2, -height / 2, width, height])
 
       const outerRadius = (Math.min(width, height) / 2) * 0.6 // outer radius of pie, in pixels
-      const innerRadius = outerRadius * 0.67 // inner radius of pie, in pixels (non-zero for donut)
+      const innerRadius = outerRadius * (this.chartInfo.type === 'doughnut' ? 0.67 : 0) // inner radius of pie, in pixels (non-zero for donut)
       const padAngle = 0 // angular separation between wedges
       const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)
       const pie = d3.pie()
@@ -200,9 +200,7 @@ export default {
 
       // 图形
       chart.selectAll('path')
-        .data(arcs.filter(function (d) {
-          return d.data.value
-        }))
+        .data(arcs)
         .join('path')
         .attr('fill', d => d.data.background)
         .attr('d', arc)
@@ -216,12 +214,7 @@ export default {
         .on('mouseleave', this.doughnutLeave)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
-          let currentArc = this._current
-          if (!currentArc) {
-            currentArc = { startAngle: 0, endAngle: 0 }
-          }
-          const i = d3.interpolate(currentArc, d)
-          this._current = i(1) // 当饼图更新时，从当前角度过渡到新角度
+          const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
           return function (t) {
             return arc(i(t))
           }
@@ -248,6 +241,7 @@ export default {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
         })
         .transition('opacity').duration(animate === true ? 600 : 0)
+        .delay(200)
         .style('opacity', 1)
         .on('end', function () {
           d3.select(this).classed('no-events', false)

nezha-fronted/src/components/chart/chart/chartRose.vue

@@ -215,9 +215,7 @@ export default {
       }
       // 图形
       chart.selectAll('path')
-        .data(arcs.filter(function (d) {
-          return d.data.value
-        }))
+        .data(arcs)
         .join('path')
         .attr('fill', d => d.data.background)
         .attr('d', arc)
@@ -231,16 +229,7 @@ export default {
         .on('mouseleave', this.roseLeave)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
-          let currentArc = this._current
-          if (!currentArc) {
-            currentArc = { startAngle: 0, endAngle: 0 }
-          }
-          const i = d3.interpolate(currentArc, d)
-          this._current = i(1) // 当饼图更新时，从当前角度过渡到新角度
-          const arc = d3.arc()
-            .innerRadius(innerRadius)
-            .outerRadius(scale(d.value))
-            .cornerRadius(radius)
+          const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
           return function (t) {
             return arc(i(t))
           }
@@ -267,6 +256,7 @@ export default {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
         })
         .transition('opacity').duration(animate === true ? 600 : 0)
+        .delay(200)
         .style('opacity', 1)
         .on('end', function () {
           d3.select(this).classed('no-events', false)

nezha-fronted/src/components/chart/chart/legend.vue

@@ -139,7 +139,7 @@ export default {
         this.clickLegendTreemap(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
         return
       }
-      if (this.chartInfo.type === 'doughnut' || this.chartInfo.type === 'rose') {
+      if (this.chartInfo.type === 'pie' || this.chartInfo.type === 'doughnut' || this.chartInfo.type === 'rose') {
         this.clickLegendD3(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
         return
       }