ipecharts.option.seriesitems.surface module#
- class ipecharts.option.seriesitems.surface.Surface(**kwargs: Any)[source]#
Bases:
BaseWidget- Warning:
Autogenerated class
Surface. Support to drawn the [Parameter surface] (<https://en.wikipedia.org/wiki/Parametric_surface>) by [parametric](#series-surface.parametric).
The figure below is a parametric surface similar to a metal part configured as a metal material.
- type Unicode('surface')#
- name Unicode(None)#
Series name used for displaying in [tooltip](https://echarts.apache.org/zh/option.html#tooltip) and filtering with [legend](https://echarts.apache.org/zh/option.html#legend), or updating data and configuration with setOption.
- coordinateSystem Unicode(None)#
The coordinate used in the series, whose options are:
‘cartesian3D’
Use a 3D rectangular coordinate (also known as Cartesian coordinate), with [xAxisIndex](#series-.xAxisIndex) and [yAxisIndex](#series-.yAxisIndex) to assign the corresponding axis component.
- grid3DIndex Float(None)#
Use the index of the [grid3D](#grid3D) component. The first [grid3D](#grid3D) component is used by default.
- parametric Bool(None)#
Whether it is a parametric surface.
- wireframe Dict()#
The wireframe of the surface.
- equation Dict()#
The function expression of the surface. If you need to display a function surface, you can set the function expression by [equation](#series-surface.equation) without setting [data](#series-surface.data). For example, the ripple effect can be simulated by the following function.
``` equation: {
- x: {
step: 0.1, min: -3, max: 3,
}, y: {
step: 0.1, min: -3, max: 3,
}, z: function (x, y) {
return Math.sin(x * x + y * y) * x / 3.14
}
}
- parametricEquation Dict()#
The [parameter equation] of the surface (<https://zh.wikipedia.org/wiki/%E5%8F%83%E6%95%B8%E6%96%B9%E7%A8%8B)>. When [data](#series-surface.data) is not set, the parameter parameter equation can be declared by [parametricEquation](#series-surface.equation). Valid when [parametric](#series-surface) is true.
The parametric equations is [x](#series-surface.parametricEquation.x), [y](#series-surface.parametricEquation.y), [z](#series-surface.parametricEquation.z) about the equations of the parameters [u](#series-surface.parametricEquation.u), [v](#series-surface.parametricEquation.v).
The following parametric equation is to plot the parametric surface of a similar metal part in the previous figure:
``` var aa = 0.4; var r = 1 - aa * aa; var w = sqrt(r); … parametricEquation: {
- u: {
min: -13.2, max: 13.2, step: 0.5
}, v: {
min: -37.4, max: 37.4, step: 0.5
}, x: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)) return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
}, y: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)) return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
}, z: function (u, v) {
var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2)) return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
}
}
- itemStyle Dict()#
The color, opacity, and other styles of the surface.
- data Any(None)#
The data array of the surface.
The data is an array of linear stores containing multiply X vertices by Y vertices data. A 5 x 5 surface has a total of 25 vertices, and the index of the data in the array is as follows
The data used in the above figure:
``` data: [
[-1,-1,0],[-0.5,-1,0],[0,-1,0],[0.5,-1,0],[1,-1,0], [-1,-0.5,0],[-0.5,-0.5,1],[0,-0.5,0],[0.5,-0.5,-1],[1,-0.5,0], [-1,0,0],[-0.5,0,0],[0,0,0],[0.5,0,0],[1,0,0], [-1,0.5,0],[-0.5,0.5,-1],[0,0.5,0],[0.5,0.5,1],[1,0.5,0], [-1,1,0],[-0.5,1,0],[0,1,0],[0.5,1,0],[1,1,0]
]
Each item is x, y, z.
For the parametric equation, each item needs to store five data, namely x, y, z and the parameters u, v. The index of the data is in the order of u, v. For example the following data:
``` data: [
// v is 0, u is from -3.14 to 3.13 [0,0,1,-3.14,0],[0,0,1,-1.57,0],[0,0,1,0,0],[0,0,1,1.57,0],[0,0,1,3.14,0], // v is 1.57, u is from -3.14 to 3.13 [0,-1,0,-3.14,1.57],[-1,0,0,-1.57,1.57],[0,1,0,0,1.57],[1,0,0,1.57,1.57],[0,-1,0,3.14,1.57], // v is 3.14, u is from -3.14 to 3.13 [0,0,-1,-3.14,3.14],[0,0,-1,-1.57,3.14],[0,0,-1,0,3.14],[0,0,-1,1.57,3.14],[0,0,-1,3.14,3.14]]
]
More likely, we need to assign name to each data item, in which case each item should be an object:
``` [{
// name of date item name: ‘data1’, // value of date item is 8 value: [12, 14, 10]
- }, {
name: ‘data2’, value: 20
}]
Each data item can be further customized:
``` [{
name: ‘data1’, value: [12, 14, 10]
- }, {
// name of data item name: ‘data2’, value : [34, 50, 15], // user-defined special itemStyle that only useful for this data item itemStyle:{}
}]
- shading Unicode(None)#
The coloring effect of 3D graphics in surface. The following three coloring methods are supported in echarts-gl:
‘color’ Only display colors, not affected by other factors such as lighting.
‘lambert’ Through the classic [lambert] coloring, can express the light and dark that the light shows.
‘realistic’ Realistic rendering, combined with [light.ambientCubemap](#globe.light.ambientCubemap) and [postEffect](#globe.postEffect), can improve the quality and texture of the display. [Physical Based Rendering (PBR)] (<https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/>) is used in ECharts GL to represent realistic materials.
- realisticMaterial Dict()#
The configuration item of the realistic material is valid when [shading](#series-surface.shading) is ‘realistic’.
- lambertMaterial Dict()#
The configuration item of the lambert material is valid when [shading](#series-surface.shading) is ‘lambert’.
- colorMaterial Dict()#
The color material related configuration item is valid when [shading](#series-surface.shading) is ‘color’.
- zlevel Float(None)#
The layer in which the component is located.
zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate zlevel. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid the crash.
Canvases with bigger zlevel will be placed on Canvases with smaller zlevel.
Note: The layers of the components in echarts-gl need to be separated from the layers of the components in echarts. The same zlevel cannot be used for both WebGL and Canvas drawing at the same time.
- silent Bool(None)#
Whether the graph doesn`t respond and triggers a mouse event. The default is false, which is to respond to and trigger mouse events.
- animation Bool(None)#
Whether to enable animation.
- animationDurationUpdate Float(None)#
The duration time for update the transition animation.
- animationEasingUpdate Unicode(None)#
The easing effect for update transition animation.