JavaScript
搜索
分类

echarts实现晶体球面投影的实例教程

作者：锦绣兮前程 时间：2023-09-02 10:35:12　

因为固体物理书上的球面投影图太难看，就自学 javascipt 用 echarts 做了个可交互的，效果如下：

echarts实现晶体球面投影的实例教程echarts实现晶体球面投影的实例教程

上面为立方晶系主要晶面（晶向）的球面投影，具体计算代码如下：


import math
import numpy as np

def 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 scale

def 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 源码：


<!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 的地理坐标功能。

来源：https://blog.csdn.net/weixin_45920673/article/details/108966185

标签：echarts,球面,投影
0
投稿

猜你喜欢

  • python反转单链表算法题

    2023-04-02 04:26:49

  • 一篇文章带你了解python标准库--math模块

    2021-02-22 07:35:12

  • pytorch tensor内所有元素相乘实例

    2023-05-16 15:28:16

  • Python中的作用域规则详解

    2022-08-12 23:54:04

  • 微信小程序实现登陆注册滑块验证

    2023-08-24 17:36:26

  • mysql prompt的用法详解

    2024-01-28 07:30:32

  • sqlserver 聚集索引和非聚集索引实例

    2024-01-18 21:29:12

  • Python的加密模块md5、sha、crypt使用实例

    2022-02-17 14:44:44

  • Python中docx2txt库的使用说明

    2022-03-23 18:58:46

  • python爬虫获取京东手机图片的图文教程

    2023-12-24 08:29:21

  • 十个惊艳的Pythonic单行代码

    2022-07-29 06:34:20

  • 基于Python实现自动化生成数据报表

    2021-11-07 00:42:16

  • vue中Npm run build 根据环境传递参数方法来打包不同域名

    2024-04-27 16:17:22

  • pymssql ntext字段调用问题解决方法

    2022-04-22 06:55:06

  • IE8网页显示不正常 用”兼容性视图”搞定

    2009-03-28 11:13:00

  • Python基础教程之增加和去除数字的千位分隔符

    2021-12-04 13:46:12

  • Python接口自动化之文件上传/下载接口详解

    2022-01-02 17:32:28

  • python实现马丁策略回测3000只股票的实例代码

    2023-03-02 01:12:29

  • 对Python中的@classmethod用法详解

    2023-07-22 17:55:54

  • python 操作sqlite数据库的方法

    2024-01-26 04:18:43
    • asp之家 网络编程 m.aspxhome.com