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
投稿猜你喜欢
前言JavaScript语言中有一个非常重要又难以掌握，近似神话的概念-闭包。对于有一点JavaScript使用经验但从未真正理解闭包概念的- 一、前言前几天需要划分数据集，就写了一个小demo去完成这个任务。随机划分图片数据集任务描述：我的所有图片保存在同一个文件夹里，需要随机将图
- 目的： 根据传入的选择器类型选出第一个符合的DOM对象。 ①可以通过id获取DOM对象，例如 $("#adom
- 1、python教程基于 python3.10 的持续解读，旨在快速回忆加深理解，节约自己的时间成本1.1 概述python 是一门易于学习
- 废话不多说。直接上代码：sock_post.php:<?phpfunction sock_post($url, $data='
- JSP 注释的详解及简单实例一 三种格式二 举例 <body> <h1>大家好</h1
- 下面介绍mysql中模糊查询的四种用法： 1，％：表示任意0个或多个字符。可匹配任意类型和长度的字符，有些情况下若是中文，请使用两个百分号（
- 本文主要介绍了Python中list[::-1]的几种用法，分享给大家，具体如下：s = "abcde"list的[]中
- 对想要在可视化的环境下制作复杂网页的专业网页制作者来说，Dreamweaver 已经渐渐在网页编辑工具市场中展露头角，成为专业人士
- 1 解决方案【方案一】载入模型结构放在全局，即tensorflow会话外层。'''载入模型结构:最关键的一步'
- 本文实例讲述了Python正则表达式实现简易计算器功能。分享给大家供大家参考，具体如下：需求：使用正则表达式完成一个简易计算器。功能：能够计
- 学习爬虫有一段时间了，今天使用Scrapy框架将校花网的图片爬取到本地。Scrapy爬虫框架相对于使用requests库进行网页的爬取，拥有
- 连接服务器菜单栏找到【工具/Tools】->【Deployment/部署】->【Confinguration…/配置…】。点加号
- center()方法返回集中在长度宽度的字符串。填充是通过使用specifiedfillchar。默认填充字符是一个空格。语法以
- 本文教程为大家分享了mysql installer community 8.0.12.0的安装，供大家参考一、下载mysql-install
- 今天搭了个“发短信”的页面，找朋友测试，没想到一位大侠直接弄了本长篇小说发我手机上……为了我的宝贝手机能继续健康澎湃，给文本区域(texta
- 前几天在“CSS那些事儿”的群中，一位读者朋友（小土豆）问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了，为什么呢，
- 1、安装pymysql库如果你想要使用python操作MySQL数据库，就必须先要安装pymysql库，这个库的安装很简单，直接使用pip
- 虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。1.使用语句来控制文字排版比用好
- 不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。 不过要注意的是使用getElementByI
