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中的console.log()函数详细介绍
Dec 29 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
JavaScript的function函数详细介绍
Nov 20 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python实现注册登录系统
2017/08/08 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python第三方库学习笔记
2020/02/07 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
促销活动策划方案
2014/01/12 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
学习普通话的体会
2014/11/07 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
检察院起诉书
2015/05/20 职场文书
体育教师研修感悟
2015/11/18 职场文书
感谢信
2019/04/11 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers