Mon May 8 04:04:00 UTC 2023 inscode

src/components/Pie3D.vue

@@ -10,7 +10,7 @@ import pie from '../utils/pie'
 import { onMounted, reactive } from 'vue';
 
 let config = reactive({
-  
+  color:["#0f7eee","#24Daff","#FFFF80","#caf982","#80DCff"]
 })
 //基础数据
 const salesData = [

src/utils/pie.js

 import * as d3 from 'd3';
+import { pieInner, pieTop, pieOuter } from '../utils/renderUtils'
 /**
  * 生成3d饼图
  * @param {*} id ：id唯一标识
@@ -28,5 +29,53 @@ export default function pie(id, width, height, data, x, y, rx, ry, h, config,ir=
                     .value((d) => {
                         return d.value
                     })(data);
+    // 获取上面插入的g
+    const slices = d3
+                    .select('#pie_chart')
+                    .append('g')
+                    .attr('transform','translate(350,200)')
+                    .attr('class','slices')
+                    .style('cursor','pointer');
+    //生成环形内曲面
+    slices
+        .selectAll('.innerSlice')
+        .data(dataset)
+        .enter()
+        .append('path')
+        .attr('class','innerSlice')
+        .style('fill',(d,index) => {
+            let colorIndex = index % config.color.length
+            return d3.hsl(config.color[colorIndex]).darker(0.7)
+        })
+        .attr('d',d => {
+            return pieInner(d, rx+0.5, ry+0.5, h, ir)
+        });
+    //上层2D平面
+    slices.selectAll('.topSlice')
+        .data(dataset)
+        .enter()
+        .append('path')
+        .transition()
+        .delay(0)
+        .duration(500)
+        .attrTween('d',(d) => {
+            //动画效果
+            let interpolate = d3.interpolate(d.startAngle, d.endAngle);
+            return function(t){
+                d.endAngle = interpolate(t);
+                return pieTop(d, rx, ry, ir)
+            }
+        })
+        .attr('class','topSlice')
+        .style('fill',(d,index) => {
+            let colorIndex = index % config.color.length
+            return config.color[colorIndex]
+        })
+        .style('stroke',(d,index) => {
+            let colorIndex = index % config.color.length
+            console.log(config.color[colorIndex],'==config.color[colorIndex]')
+            return config.color[colorIndex]
+        })
+
     
 }
\ No newline at end of file

src/utils/renderUtils.js

+//生成内曲面
+export function pieInner(d,rx,ry,h,ir){
+    const startAngle = d.startAngle < Math.PI ? Math.PI : d.startAngle;
+    const endAngle = d.endAngle < Math.PI ? Math.PI : d.endAngle;
+
+    const sx = ir * rx * Math.cos(startAngle);
+    const sy = ir * ry * Math.sin(startAngle);
+    const ex = ir * rx * Math.cos(endAngle);
+    const ey = ir * ry * Math.sin(endAngle);
+
+    const ret = [];
+    ret.push(
+        'M',
+        sx,
+        sy,
+        'A',
+        ir * rx,
+        ir * ry,
+        '0 0 1',
+        ex,
+        ey,
+        'L',
+        ex,
+        h + ey,
+        'A',
+        ir * rx,
+        ir * ry,
+        '0 0 0',
+        sx,
+        h + sy,
+        'z'
+    );
+    return ret.join(' ');
+}
+// 生成饼图的顶部
+export function pieTop(d, rx, ry, ir) {
+    if (d.endAngle - d.startAngle === 0) { return 'M 0 0'; }
+    const sx = rx * Math.cos(d.startAngle);
+    const sy = ry * Math.sin(d.startAngle);
+    const ex = rx * Math.cos(d.endAngle);
+    const ey = ry * Math.sin(d.endAngle);
+
+    const ret = [];
+    ret.push(
+        'M',
+        sx,
+        sy,
+        'A',
+        rx,
+        ry,
+        '0',
+        d.endAngle - d.startAngle > Math.PI ? 1 : 0,
+        '1',
+        ex,
+        ey,
+        'L',
+        ir * ex,
+        ir * ey
+    );
+    ret.push(
+        'A',
+        ir * rx,
+        ir * ry,
+        '0',
+        d.endAngle - d.startAngle > Math.PI ? 1 : 0,
+        '0',
+        ir * sx,
+        ir * sy,
+        'z'
+    );
+    return ret.join(' ');
+}
+
+// 外曲面算法
+export function pieOuter(d, rx, ry, h) {
+    const startAngle = d.startAngle > Math.PI ? Math.PI : d.startAngle;
+    const endAngle = d.endAngle > Math.PI ? Math.PI : d.endAngle;
+
+    const sx = rx * Math.cos(startAngle);
+    const sy = ry * Math.sin(startAngle);
+    const ex = rx * Math.cos(endAngle);
+    const ey = ry * Math.sin(endAngle);
+
+    const ret = [];
+    ret.push(
+        'M',
+        sx,
+        h + sy,
+        'A',
+        rx,
+        ry,
+        '0 0 1',
+        ex,
+        h + ey,
+        'L',
+        ex,
+        ey,
+        'A',
+        rx,
+        ry,
+        '0 0 0',
+        sx,
+        sy,
+        'z'
+    );
+    return ret.join(' ');
+}