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 수정체 구면 투영 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
어쩌면 echarts에 더 좋은 방법echarts를 React에 유용하게 사용하세요. echarts-for-react 기반 Make echarts come in handy for React. Based on 🌈 사용하기 쉬움(기본 레이아웃 및 스타일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.