mirror of https://gitee.com/antv-l7/antv-l7
122 lines
2.3 KiB
Markdown
122 lines
2.3 KiB
Markdown
---
|
||
title: 3D 柱图
|
||
order: 5
|
||
---
|
||
|
||
`markdown:docs/common/style.md`
|
||
|
||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||
|
||
## 使用
|
||
|
||
3D 柱图通过 PointLayer 对象实例化，将 shape 设置成不同的 3Dshape
|
||
|
||
```javascript
|
||
import { PointLayer } from '@antv/l7';
|
||
```
|
||
|
||
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ'>
|
||
|
||
### shape
|
||
|
||
3D Shape 支持
|
||
|
||
- cylinder
|
||
- triangleColumn
|
||
- hexagonColumn
|
||
- squareColumn
|
||
|
||
### size
|
||
|
||
3D 柱图 size 需要设置三个维度 [w, l, z]
|
||
|
||
- w 宽
|
||
- l 长
|
||
- z 高度
|
||
|
||
size 设置成常量
|
||
|
||
```
|
||
layer.size([2,2,3])
|
||
```
|
||
|
||
size 回调函数设置
|
||
|
||
```
|
||
layer.size('unit_price', h => {
|
||
return [ 6, 6, h / 500 ];
|
||
})
|
||
```
|
||
|
||
```javascript
|
||
const column = new PointLayer({})
|
||
.source(data)
|
||
.shape('name', [
|
||
'cylinder',
|
||
'triangleColumn',
|
||
'hexagonColumn',
|
||
'squareColumn',
|
||
])
|
||
.size('unit_price', (h) => {
|
||
return [6, 6, h / 500];
|
||
})
|
||
.color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
|
||
.style({
|
||
opacity: 1.0,
|
||
});
|
||
```
|
||
|
||
### animate
|
||
|
||
3D 柱图支持生长动画
|
||
animate 方法支持的布尔值和对象参数
|
||
|
||
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*l-SUQ5nU6n8AAAAAAAAAAAAAARQnAQ'>
|
||
|
||
```javascript
|
||
animate(true)
|
||
animate(false)
|
||
|
||
animate(animateOptions)
|
||
|
||
animateOptions: {
|
||
enable: boolean;
|
||
speed?: number = 0.01;
|
||
repeat?: number = 1;
|
||
}
|
||
```
|
||
|
||
## 额外的 style 配置
|
||
|
||
- sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
|
||
|
||
- targetColor 设置 3D 柱图终止颜色
|
||
|
||
- opacityLinear 设置 3D 柱图透明度渐变
|
||
|
||
<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*oZWGSIceykwAAAAAAAAAAAAAARQnAQ'>
|
||
|
||
```javascript
|
||
style({
|
||
opacityLinear: {
|
||
enable: true, // true - false
|
||
dir: 'up', // up - down
|
||
},
|
||
});
|
||
```
|
||
|
||
- lightEnable 是否开启光照
|
||
|
||
```javascript
|
||
layer.style({
|
||
opacity: 0.8,
|
||
sourceColor: 'red',
|
||
targetColor: 'yellow',
|
||
});
|
||
```
|
||
|
||
[光标柱图](../../../examples/point/column#column_light)
|
||
[渐变柱图](../../../examples/point/column#column_linear)
|
||
|
||
`markdown:docs/common/layer/base.md`
|