Class: BarLayer

.Visuals.EchartsGL. BarLayer

基于EchartsGL的三维柱状图

new BarLayer()

Author:
  • liuck
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//option参见:http://echarts.baidu.com/option-gl.html#series-bar3D
//构造EchartsGL可视化图层
var echartsgl = new GeoGlobe.Visuals.EchartsGL({
    visualMap: {
        ...
    },
    mapbox3D: {
        ...
    }
});
//构造3D柱图层
var barLayer = new GeoGlobe.Visuals.EchartsGL.BarLayer({
    id: '3D bar',
    name: '3D柱',
    data: [{
        "type": "Feature",
        "properties": {
            "id": 10001,
            "name": "1号柱",
            "height": 1000
        },
        "geometry": {
            "type": "Point",
            "coordinates": [114.20257245367856, 30.773372078561778]
        },
        "itemStyle": {
            ...
        },
        "label": {
            ...
        },
        "emphasis": {
            ...
        }
    }],
    shading: 'lambert',
    minHeight: 0.1,
    barSize: 0.1,
    silent: true,
    animationEasingUpdate: 2000
});
//添加到EchartsGL图层
barLayer.addTo(echartsgl);
//绘制
echartsgl.render();

Members


animation :Boolean

是否开启动画。
Type:
  • Boolean
Default Value:
  • true
Source:
View2D/Visuals/EchartsGL/BarLayer.js

animationDurationUpdate :Int

过渡动画的时长。
Type:
  • Int
Default Value:
  • 500
Source:
View2D/Visuals/EchartsGL/BarLayer.js

animationEasingUpdate :String

过渡动画的缓动效果。
Type:
  • String
Default Value:
  • 'cubicOut'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

bevelSize :Int

支持设置为从 0 到 1 的值。默认为 0,即没有倒角
Type:
  • Int
Default Value:
  • 0
Source:
View2D/Visuals/EchartsGL/BarLayer.js

bevelSmoothness :Int

柱子倒角的光滑/圆润度,数值越大越光滑/圆润。
Type:
  • Int
Default Value:
  • 2
Source:
View2D/Visuals/EchartsGL/BarLayer.js

colorMaterial :Object

color 材质相关的配置项,在 shading 为'color'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
}

colorMaterial :Object

color 材质相关的配置项,在 shading 为'color'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
1
2
3
4
5
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
}

<constant> coordinateSystem :String

为常量值,固定为'mapbox3D'
Type:
  • String
Default Value:
  • 'mapbox3D'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

data :Array

geojson结构
Type:
  • Array
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[{
"type": "Feature",
"properties": {
        "id": 10001,
        "name": "1号柱",
        "height": 1000
    },
"geometry": {
        "type": "Point",
        "coordinates": [114.20257245367856, 30.773372078561778]
    },
    "itemStyle": {
        ...
    },
    "label": {
        ...
    },
    "emphasis": {
        ...
    }
}]

emphasis :Object

柱子的标签配置
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
6
7
8
{
    itemStyle : {
        ...
    },
    label: {
        ...
    }
}

id :String

图层id
Type:
  • String
Default Value:
  • '1'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

itemStyle :Object

柱子的样式,包括颜色和不透明度。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
{
    color: [1, 1, 1, 1],
    opacity: 1
}

label :Object

柱子的标签配置
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    show: false,
    distance: 2,
    formatter: ...
    textStyle: {
        color: '#fff',
        borderWidth: 1,
        borderColor: '#fff',
        fontFamily: 'sans-serif',
        fontSize: 20,
        fontWeight: normal
    }
}

lambertMaterial :Object

lambert 材质相关的配置项,在 shading 为'lambert'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
}

lambertMaterial :Object

lambert lambert 材质相关的配置项,在 shading 为'lambert'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
1
2
3
4
5
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
}

minHeight :Int

最小柱子高度
Type:
  • Int
Default Value:
  • 0
Source:
View2D/Visuals/EchartsGL/BarLayer.js

name :String

用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
Type:
  • String
Default Value:
  • ''
Source:
View2D/Visuals/EchartsGL/BarLayer.js

realisticMaterial :Object

真实感材质相关的配置项,在 shading 为'realistic'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/BarLayer.js
Example
1
2
3
4
5
6
7
8
9
10
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
    roughness: 0.5,
    metalness: 0,
    roughnessAdjust: 0.5,
    metalnessAdjust: 0.5,
    normalTexture: ...,
}

realisticMaterial :Object

真实感材质相关的配置项,在 shading 为'realistic'时有效。
Type:
  • Object
Default Value:
  • null
Source:
View2D/Visuals/EchartsGL/MapLayer.js
Example
1
2
3
4
5
6
7
8
9
10
{
    detailTexture: ...,
    textureTiling: 1,
    textureOffset: 0,
    roughness: 0.5,
    metalness: 0,
    roughnessAdjust: 0.5,
    metalnessAdjust: 0.5,
    normalTexture: ...,
}

shading :String

支持下面三种着色方式,'color' 只显示颜色,不受光照等其它因素的影响。'lambert' 通过经典的 lambert 着色表现光照带来的明暗。'realistic' 真实感渲染,配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。
Type:
  • String
Default Value:
  • null -
Source:
View2D/Visuals/EchartsGL/BarLayer.js

silent :Boolean

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
Type:
  • Boolean
Default Value:
  • false
Source:
View2D/Visuals/EchartsGL/BarLayer.js

stack :String

相同 stack 值的柱状图系列数据会有叠加。注意不同系列需要叠加的数据项在数组中的索引必须是一样的。
Type:
  • String
Default Value:
  • ''
Source:
View2D/Visuals/EchartsGL/BarLayer.js

<constant> type :String

为常量值,固定为'bar3D'
Type:
  • String
Default Value:
  • 'bar3D'
Source:
View2D/Visuals/EchartsGL/BarLayer.js

zlevel :Int

组件所在的层。
Type:
  • Int
Default Value:
  • -10
Source:
View2D/Visuals/EchartsGL/BarLayer.js

zlevel :Number

组件所在的层
Type:
  • Number
Default Value:
  • -10
Source:
View2D/Visuals/EchartsGL/MapLayer.js

Methods


addTo(echartsgl)

关联Three
Parameters:
Name Type Description
echartsgl GeoGlobe.Visuals.EchartsGL
Source:
View2D/Visuals/EchartsGL/BarLayer.js

getRenderOption()

获取绘制的option结构数据
Source:
View2D/Visuals/EchartsGL/BarLayer.js
See:
Returns:
options
Type
Object

remove()

从父对象中移除自己
Source:
View2D/Visuals/EchartsGL/BarLayer.js

render()

绘制
Source:
View2D/Visuals/EchartsGL/BarLayer.js