echarts实现晶体球面投影的实例教程
作者：锦绣兮前程 发布时间：2023-09-02 10:35:12
标签：echarts,球面,投影
因为固体物理书上的球面投影图太难看，就自学 javascipt 用 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
0
投稿猜你喜欢
- 在Web 开发中，JavaScript的一个很重要的作用就是对DOM进行操作，可你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行
导言很多Web程序都支持用户帐号，根据不同的登录用户提供不同的选项，报表等功能。例如，就我们的教程中，我们要允许供应商公司的一些账户能登录网- Union 与 Union ALL 的作用都是合并 SELECT 的查询结果集，那么它们有什么不同呢？ Union 将查询到的结果集合并后进
- 本文实例讲述了php+mysqli使用面向对象方式更新数据库的方法，分享给大家供大家参考。具体实现方法如下：<?php//第一步：创建
- 一个项目开发完毕后总有一种想法，就是生成可执行文件，总不能一直用python xxx执行吧。以下操作同时适用于windows和Linux下的
- 很多时候，我们都在说设计需要引导用户，尤其是在对初级用户的引导上，很大程度决定着产品能否快速聚拢用户的可能；但同样很多时候，用户并不需要引导
- Linux/Unix的系统上，一般默认的 python 版本为 2.x，我们可以将 python3.x 安装在 /usr/local/pyt
- 随着十几年前“用户体验”这一概念的提出，“用户研究”也逐渐发展成为一个新兴的行业。那么，“用户研究”究竟包括哪些工作内容，在企业中如何开展，
- 先来看看Global.asax文件代码：<script language="VB" runat
- 作用域为已声明标识符所表示的常量、类型、变量、函数或包在源代码中的作用范围。Go 语言中变量可以在三个地方声明：函数内定义的变量称为局部变量
- Python局部函数及用法通过前面的学习我们知道，Python 函数内部可以定义变量，这样就产生了局部变量，有读者可能会问，Python 函
- 可以说，互联网就是由一个个链接进行信息流通的。没有连接的网站如同一潭死水，毫无生气。当一个访客进入你的网站，在浏览的过程中，如果你的内容不引
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 很久没有发表文章了，最近一直在研究产品设计标准的问题，之前有发过一篇关于 Axure的教程 ，相信很多人已经学会如何使用，这次我给大家介绍一
- 您是否常常在做网页的过程中发现一个问题呢？当图片上传的时候，如果图片太大 ，就会把网页撑破，唯一做的就要先把它用软件缩小，再上传上
- 我的朋友没在服务器上设置DSN，可他一样访问数据库，他是怎样做到的？ 其实，只要我们知道数据库文件名(比如Access、Parad
- 从百度百科中扣去的这个图片轮播代码，图片向左不间断滚动，有停顿：<!DOCTYPE html PUBLIC "-//W3C/
- 滚动图片可以说是做网站经常会遇到的，特别是做企业网站，最常用的像产品展示，图片展示等，滚动的好处是吸引眼球，让人一下就注意到。之前本站发了一
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- 代码如下:--新增表字段 ALTER procedure [dbo].[sp_Web_TableFiled_Insert] (
