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 相关文章推荐
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Python中实现的RC4算法
2015/02/14 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python 实现表情识别
2020/11/21 Python
python之随机数函数的实现示例
2020/12/30 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
幼儿园长自我鉴定
2013/10/17 职场文书
30年同学聚会感言
2014/01/30 职场文书
组织鉴定材料
2014/06/02 职场文书
思想作风建设心得体会
2014/10/22 职场文书
出国留学单位推荐信
2015/03/26 职场文书
投诉信范文
2015/07/02 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书