因為固體物理書上的球面投影圖太難看，就自學 javascipt 用 echarts 做了個可交互的，效果如下：
上面為立方晶系主要晶面（晶向）的球面投影，具體計算代碼如下：
|
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
|
import mathimport numpy as npdef c_scale(A): A = np.array(A) n_dim = A.shape[1]; n_size = A.shape[0] scale2 = np.zeros(n_size) for j in range(n_dim): for i in range(n_size): scale2[i] += A[i,j]**2 scale = scale2 ** 0.5 return scaledef normalize(A): # 二維數組歸一化 A = np.array(A) scale = c_scale(A) A = np.divide(A.T,scale).T return A def cal_point_dict(input_str_list): points = []; points_dicts = [] for input_str in input_str_list: input_str=input_str.replace('[',''); input_str=input_str.replace(']','') try: data = input_str.split(' ') point = [] # 求解投影點 for j in range(len(data)): point.append(int(data[j])) points.append(point) except: data = input_str.split(',') point = [] # 求解投影點 for j in range(len(data)): point.append(int(data[j])) points.append(point) points_p = normalize(points) for i in range(len(points_p)): points_dict={} points_dict['name']=input_str_list[i] points_dict['value']=points_p[i].tolist() points_dicts.append(points_dict) return points_dicts# 各晶面指數input_str_list = ['[0 0 1]','[1 0 0]','[0 1 0]','[0 0 -1]','[-1 0 0]','[0 -1 0]', '[1 0 1]','[0 1 1]','[1 1 0]','[-1 0 -1]','[0 -1 -1]','[-1 -1 0]', '[1 0 -1]','[0 1 -1]','[1 -1 0]','[-1 0 1]','[0 -1 1]','[-1 1 0]', '[1 1 1]','[-1 1 1]','[1 -1 1]','[1 1 -1]', '[-1 -1 -1]','[1 -1 -1]','[-1 1 -1]','[-1 -1 1]']points_dicts = cal_point_dict(input_str_list)points_dicts # 將該數據復制到 球坐標.html 下 |
繪圖 html 源碼：
|
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
|
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;//var data = [{name:'[1 0 0]',value:[1,0,0]},{name:'[0 1 1]',value:[0,1,1]}];var data1 = [{'name': '[0 0 1]', 'value': [0.0, 0.0, 1.0]}, {'name': '[1 0 0]', 'value': [1.0, 0.0, 0.0]}, {'name': '[0 1 0]', 'value': [0.0, 1.0, 0.0]}, {'name': '[0 0 -1]', 'value': [0.0, 0.0, -1.0]}, {'name': '[-1 0 0]', 'value': [-1.0, 0.0, 0.0]}, {'name': '[0 -1 0]', 'value': [0.0, -1.0, 0.0]}, {'name': '[1 0 1]', 'value': [0.7071067811865475, 0.0, 0.7071067811865475]}, {'name': '[0 1 1]', 'value': [0.0, 0.7071067811865475, 0.7071067811865475]}, {'name': '[1 1 0]', 'value': [0.7071067811865475, 0.7071067811865475, 0.0]}, {'name': '[-1 0 -1]', 'value': [-0.7071067811865475, 0.0, -0.7071067811865475]}, {'name': '[0 -1 -1]', 'value': [0.0, -0.7071067811865475, -0.7071067811865475]}, {'name': '[-1 -1 0]', 'value': [-0.7071067811865475, -0.7071067811865475, 0.0]}, {'name': '[1 0 -1]', 'value': [0.7071067811865475, 0.0, -0.7071067811865475]}, {'name': '[0 1 -1]', 'value': [0.0, 0.7071067811865475, -0.7071067811865475]}, {'name': '[1 -1 0]', 'value': [0.7071067811865475, -0.7071067811865475, 0.0]}, {'name': '[-1 0 1]', 'value': [-0.7071067811865475, 0.0, 0.7071067811865475]}, {'name': '[0 -1 1]', 'value': [0.0, -0.7071067811865475, 0.7071067811865475]}, {'name': '[-1 1 0]', 'value': [-0.7071067811865475, 0.7071067811865475, 0.0]}, {'name': '[1 1 1]', 'value': [0.5773502691896258, 0.5773502691896258, 0.5773502691896258]}, {'name': '[-1 1 1]', 'value': [-0.5773502691896258, 0.5773502691896258, 0.5773502691896258]}, {'name': '[1 -1 1]', 'value': [0.5773502691896258, -0.5773502691896258, 0.5773502691896258]}, {'name': '[1 1 -1]', 'value': [0.5773502691896258, 0.5773502691896258, -0.5773502691896258]}, {'name': '[-1 -1 -1]', 'value': [-0.5773502691896258, -0.5773502691896258, -0.5773502691896258]}, {'name': '[1 -1 -1]', 'value': [0.5773502691896258, -0.5773502691896258, -0.5773502691896258]}, {'name': '[-1 1 -1]', 'value': [-0.5773502691896258, 0.5773502691896258, -0.5773502691896258]}, {'name': '[-1 -1 1]', 'value': [-0.5773502691896258, -0.5773502691896258, 0.5773502691896258]}] ;var radius = 1;option = { tooltip: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, grid3D: {}, animation: true, series: [{ name: '參考球', type: 'surface', parametric: true, // shading: 'albedo', wireframe: { show: true }, shading: 'color', itemStyle: { color: [1, 1, 1, 1], opacity: 0.8 }, parametricEquation: { u: { min: -Math.PI, max: Math.PI, step: Math.PI / 20 }, v: { min: 0, max: Math.PI, step: Math.PI / 20 }, x: function (u, v) { return radius * Math.sin(v) * Math.sin(u); }, y: function (u, v) { return radius * Math.sin(v) * Math.cos(u); }, z: function (u, v) { return radius * Math.cos(v); } } }, { name: '球面投影點', type: 'scatter3D', blendMode: 'darken', showEffectOn: 'render', zlevel: 2, symbol : 'circle', label: { show: true, position: 'top', formatter: '{b}'}, symbolSize: 10, data: data1 } ]};;if (option && typeof option === "object") { myChart.setOption(option, true);} </script> </body></html> |
然而這樣畫出的圖形還不能實現 3D 空間中的遮擋關系，要進一步實現可能還要借助 echarts 的地理坐標功能。
總結
到此這篇關于echarts實現晶體球面投影的文章就介紹到這了,更多相關echarts晶體球面投影內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_45920673/article/details/108966185
