echarts 实现晶体球面投影

因为固体物理书上的球面投影图太难看，就自学 javascipt 用 echarts 做了个可交互的，效果如下：

上面为立方晶系主要晶面（晶向）的球面投影，具体计算代码如下：

import math
import numpy as npdef 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]**2scale = scale2 ** 0.5return scaledef normalize(A): # 二维数组归一化A = np.array(A)scale = c_scale(A)A = np.divide(A.T,scale).Treturn Adef 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 实现晶体球面投影相关推荐

芯片内亿万的晶体管制程工艺
芯片内亿万的晶体管制程工艺一．原理晶体管并非是安装上去的,芯片制造其实分为沙子-晶圆,晶圆-芯片这样的过程,而在芯片制造之前,IC涉及要负责设计好芯片,然后交给晶圆代工厂. 芯片设计分为前端设计和 ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市，并定义复杂样式
实现如下效果用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...

echarts 实现晶体球面投影

echarts 实现晶体球面投影相关推荐

最新文章

热门文章