3D Column

View MarkdownEdit this page

3DColumn charts are columns of varying heights displayed over a geographic area, with the height of the column proportional to its value in the data set.

accomplish

Below we will introduce how to draw a common3DColumn chart.

you canL7Found on the official websiteOnline case

import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    pitch: 66.02383,
    center: [ 121.400257, 31.25287 ],
    zoom: 14.55,
    rotation: 134.95
  })
});
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
  .then(res => res.json())
  .then(data => {
    const pointLayer = new PointLayer({})
    .source(data, {
      parser: {
        type: 'json',
        x: 'longitude',
        y: 'latitude'
      }
    })
    .shape('name', [ 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' ])
    .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]);
    .size('unit_price', h => [ 6, 6, h / 500 ]
    scene.addLayer(pointLayer);
  })

shape

3DColumn chartshapeThe method supports the following parameters:

cylindercylinder
triangleColumntriangular prism
hexagonColumnhexagonal column
squareColumnfour corner pillars

size

3Dcolumn chartsizeSupport setting three dimensions[w, l, z]：

wWidth
llong
zhigh

sizeSet constant

layer.size([2, 2, 3]);

sizeSet callback function

layer.size('unit_price', (h) => {
  return [6, 6, h / 500];
});

animate

3DColumn chart supports growth animation, throughanimateMethod to set, specific usage can be viewedDetailed documentation

style

3DColumn charts have specialstyleAttributes, specific usage can be foundDetailed documentation