Echarts 3D饼图开发_echarts viewcontrol

近期的开发需求，需要开发一个3D饼图。不同于echarts的二维饼图，有完善的API，开发起来比较顺手。3D类的图资料较少，就连Echarts官网提供的相关API信息也是模模糊糊的，理解起来不容易。

以饼图为例子。一个完整的2D饼图是由一个或者多个扇形组成的；而一个完整的3D饼图是由一个或者多个扇形曲面组成。

Echarts曲面绘制通过series-surface. type ="surface"配置项来设置，详细参数说明，请参考官网。
｜——》任意门

其实光看官网的配置参数，会很难理解。因为没有足够的示例，无法进行调试测试，导致对于知识难掌握，容易产生厌烦情绪。（没错！说的就是俺）

最好的办法就是先去社区或者网络找找有没有相关案例，感谢这些乐于分享知识的开发者们。——》Echarts社区入口

其实也有不少，但是并不能完全满足我的开发需求。只能通过现有的满足条件的案例，拿到代码后再跑一遍，理解里面的配置项的涵义，再自己慢慢调整开发。

下面对实现流程进行简单解析。

准备工作

依赖除了必要的echarts依赖外，还需echarts-gl。
｜——》任意门

在这里要注意版本匹配，否则会报错：

echarts-gl 2.x版本的是和echarts 5.X的版本相匹配的。
echarts-gl 1.x版本的是和echarts 4.X的版本相匹配的。

也就是说如果你echarts是4.x的，但是echarts-gl是2.x的，这是万万使不得的，会报错哦～

3D饼图实现

如下图的3D饼图，是由4个扇形曲面实现。

生成扇形的曲面参数方程

用于 series-surface.parametricEquation

 function getParametricEquation(startRatio, endRatio, isSelected, isHovered) {
            // 计算
            let midRatio = (startRatio + endRatio) / 2;
            let startRadian = startRatio * Math.PI * 2;
            let endRadian = endRatio * Math.PI * 2;
            let midRadian = midRatio * Math.PI * 2;
            // 如果只有一个扇形，则不实现选中效果。
            if (startRatio === 0 && endRatio === 1) {
                isSelected = false;
            }
            // 计算选中效果分别在 x 轴、y 轴方向上的位移（位移均为 0）
            let offsetX = 0;
            let offsetY = 0;
            // 计算选中效果在 z 轴方向上的位移（未选中，位移均为 0）
            let offsetZ = isSelected ? 0.15 : 0;
            // 计算高亮效果的放大比例（未高亮，则比例为 1）
            let hoverRate = isHovered ? 1.05 : 1;
            let tmp = 0;
            // 返回曲面参数方程
            return {
                u: {
                    min: 0,
                    max: Math.PI * 2,
                    step: Math.PI / 100,
                },
                v: {
                    min: 0,
                    max: Math.PI,
                    step: Math.PI / 50,
                },
                x: function (u, v) {
                    if (midRatio - 0.5 < 0) {
                        if (u < startRadian || u > midRadian + Math.PI) {
                            tmp =
                                u - Math.PI - midRadian < 0
                                    ? u + Math.PI - midRadian
                                    : u - Math.PI - midRadian;
                            return (
                                offsetX +
                                ((Math.sin(startRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                        if (u > endRadian && u < midRadian + Math.PI) {
                            tmp = midRadian + Math.PI - u;
                            return (
                                offsetX +
                                ((Math.sin(endRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                    } else {
                        if (u < startRadian && u > midRadian - Math.PI) {
                            tmp = u + Math.PI - midRadian;
                            return (
                                offsetX +
                                ((Math.sin(startRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                        if (u > endRadian || u < midRadian - Math.PI) {
                            tmp =
                                midRadian - Math.PI - u < 0
                                    ? midRadian + Math.PI - u
                                    : midRadian - Math.PI - u;
                            return (
                                offsetX +
                                ((Math.sin(endRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                    }
                    return offsetX + Math.sin(v) * Math.sin(u) * hoverRate;
                },
                y: function (u, v) {
                    if (midRatio - 0.5 < 0) {
                        if (u < startRadian || u > midRadian + Math.PI) {
                            tmp =
                                u - Math.PI - midRadian < 0
                                    ? u + Math.PI - midRadian
                                    : u - Math.PI - midRadian;
                            return (
                                offsetY +
                                ((Math.cos(startRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                        if (u > endRadian && u < midRadian + Math.PI) {
                            tmp = midRadian + Math.PI - u;
                            return (
                                offsetY +
                                ((Math.cos(endRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                    } else {
                        if (u < startRadian && u > midRadian - Math.PI) {
                            tmp = u + Math.PI - midRadian;
                            return (
                                offsetY +
                                ((Math.cos(startRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                        if (u > endRadian || u < midRadian - Math.PI) {
                            tmp =
                                midRadian - Math.PI - u < 0
                                    ? midRadian + Math.PI - u
                                    : midRadian - Math.PI - u;
                            return (
                                offsetY +
                                ((Math.cos(endRadian) * tmp) /
                                    (Math.PI - midRadian + startRadian)) *
                                hoverRate
                            );
                        }
                    }
                    return offsetY + Math.sin(v) * Math.cos(u) * hoverRate;
                },
                z: function (u, v) {
                    return offsetZ + (Math.cos(v) > 0 ? 0.1 : -0.1);
                },
            };
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

大部分小可爱肯定会在这一步感到疑惑，u、v、x、y、z这都是啥呀(((o(?▽?)o)))？赶紧去官网查查。
然而，

┻━┻︵╰(‵□′)╯︵┻━┻

没错，依然还是不懂呀