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


Posted in Javascript onOctober 10, 2020

因为固体物理书上的球面投影图太难看,就自学 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 的地理坐标功能。

总结

到此这篇关于echarts实现晶体球面投影的文章就介绍到这了,更多相关echarts晶体球面投影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
js arguments对象应用介绍
Nov 28 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 #Javascript
vue实现选中效果
Oct 07 #Javascript
electron踩坑之dialog中的callback解决
Oct 06 #Javascript
You might like
收音机的保养
2021/03/01 无线电
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
Python pickle模块用法实例分析
2015/05/27 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
工作年限证明模板
2014/11/01 职场文书
公司2014年度工作总结
2014/12/10 职场文书
高一英语教学反思
2016/03/03 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server