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 的地理坐标功能。
总结
到此这篇关于echarts实现晶体球面投影的文章就介绍到这了,更多相关echarts晶体球面投影内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ECharts仪表盘实例代码(附源码下载)
大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用. 效果演示 源码下载 HTML 首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性. <script src="echarts.min.js"></script> <div id=
-
详解ECharts使用心得总结
前言 上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个ECharts报表呈现组件,挺不错的一个组件,而且地图数据都是离线的,真心很赞.但是,使用起来却颇费了一番工夫.所以就把使用中的一些心得体会跟大家分享一下. 1. 插件的下载 以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要
-
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 ra
-
Echarts实例教程之树形图表的实现方法
树图主要用来可视化树形数据结构,是一种特殊的层次类型. 实现方法,将series->type设置为tree. Echarts的树形图表,可以是正交的,也可以是径向的. 正交树: 径向树: 实现方法,修改:series->layout设置,orthogonal为正向,radial为径向. 可以自定义,如从右向左: 实现方法,修改:series->orient设置,支持LR.RL.TB.BT,其中RL,就是从右向左. 可以自定义图标:支持'circle', 'rect', 'roundRec
-
Git 命令行教程及实例教程(附github注册)
本篇博客主要讲解以下问题: Git 常用命令 创建新仓库 检出仓库 添加与提交 推送改动 分支 更新与合并 标签 替换本地改动 Git实例教程 操作小技巧 Git 常用命令常用命令 创建新仓库 创建新文件夹,打开,然后执行 git init 以创建新的 git 仓库. 检出仓库 执行如下命令以创建一个本地仓库的克隆版本: git clone /path/to/repository 如果是远端服务器上的仓库,你的命令会是这个样子: git clone username@host:/path/to/
-
web标准布局实例教程，用定位轻松解决CSS复杂布局
我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------
-
Vue.js组件使用开发实例教程
组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p
-
ThinkPHP跳转页success及error模板实例教程
本文以实例讲解了ThinkPHP跳转页面的success与error方法所对应的视图与控制器的实现方法,通过本实例教程可以帮助读者更好的掌握success方法与error方法的使用. 首先是控制器中,可以使用下代码: <?php // 本文档自动生成,仅供测试运行 class IndexAction extends Action { /** +---------------------------------------------------------- * 默认操作 +----------
-
Yii2搭建后台并实现rbac权限控制完整实例教程
1.安装yii2 未安装的请参考yii2史上最简单式安装教程,没有之一 已安装的请继续看下一步操作 2.配置数据库 2.1 配置数据库 修改common/config/main-local.php 实际项目中本地的数据库往往跟线上数据库不一致, 我们这里配置到main-local.php就可以了,产品上线后,我们可以使用git或者svn忽略掉main-local.php,线上直接部署. 我们这里使用的mysql数据库,配置如下 当然啦,上面红圈圈的信息需要你自己手动修改掉,要是十分巧合跟我的一样
-
Yii2 rbac权限控制之菜单menu实例教程
在上篇文章给大家介绍了yii2搭建完美后台并实现rbac权限控制实例教程中完美实现了yii2的后台搭建和rbac权限控制,如果你还没有实现,请先看上文再回来参考本文,因为本文是在上文的基础上进行完善和补充. 部分小伙们纷纷反映,最后菜单menu怎么控制权限呀,看不懂,搞不定,而且你那貌似没搞完,瞎忽悠!确实没那么全,今天看我们如何实现菜单完美权限化.先罗列下主要讲的内容,不需要的没必要看下去,只为分享给有需要的人. 利用menu表添加菜单 左侧菜单结果adminlte完美呈现 菜单前面自定义ic
-
Python实现命令行通讯录实例教程
1.实现目标 编写一个命令行通讯录程序,可以添加.查询.删除通讯录好友及电话 2.实现方法 创建一个类来表示一个人的信息.使用字典存储每个人的对象,名字作为键. 使用pickle模块永久地把这些对象存储下来. 使用字典内建的方法添加.删除修改人员信息. 3.思维导图 4.编写伪代码 # 1.创建字典用来存储通讯录信息 # 2.创建人员类,包含姓名.关系.电话三个属性 # 3.创建操作类,包含增加.查询.删除人员,退出,保存并退出五个方法 # 4.程序运行 # 5.判断通讯录文件是否存在 # 6.
-
Yii2 rbac权限控制操作步骤实例教程
本篇的主题是 rbac权限控制的详细操作步骤,注意是操作步骤哦,关于配置与rbac的搭建,我们在yii2搭建完美后台并实现rbac权限控制实例教程说的再清楚不过了. 但是,在很多人的反馈下,说是完全按照本主的步骤来的,丝毫不差,为啥菜单不显示,为啥不显示呢不显示?艾玛,最终在群里帮人调试的时候找到原因了,si分的不容易啊.原因就是你学会了搭建没学会操作啊,啊,啊,我们今天就来详细的说说这rbac的权限控制具体怎么操作!当然,大前提下是你已经按照我们上文成功搭建一套完美的后台并实现了rbac权限控