首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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晶体球面投影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

锦绣兮前程

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
解析js如何获取css样式
Dec 11 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
详解TypeScript中的类型保护
Apr 29 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
Tkinter(4) Apache(17) 数据重复(1) sortInts(1) feDisplacementMap(1) Hudi(1) Navigator(1) WebSockets(3) Pool(1) GUI(2)
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Js中sort()方法的用法
2006/11/04 Javascript
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JavaScript获取当前网页标题（title）的方法
2015/04/03 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python中的localtime()方法使用详解
2015/05/22 Python
Phantomjs抓取渲染JS后的网页（Python代码）
2016/05/13 Python
利用Python批量压缩png方法实例（支持过滤个别文件与文件夹）
2017/07/30 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
基于wxPython的GUI实现输入对话框（1）
2019/02/27 Python
python flask安装和命令详解
2019/04/02 Python
27个经典Linux面试题及答案，你知道几个？
2014/03/11 面试题
大学活动邀请函
2014/01/28 职场文书
中秋节超市促销方案
2014/01/30 职场文书
医院检讨书范文
2014/02/01 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
升学宴演讲稿
2014/09/01 职场文书
颐和园的导游词
2015/01/30 职场文书