EchartsLayer (ECharts Layer)

Create and manage an ECharts layer on a 3D map.

Constructor

new ge3d.object.EchartsLayer(options?: {}): EchartsLayer

Parameters (Options)

Parameter	Type	Default	Description
option	Object	-	ECharts configuration object (see ECharts Option below)
pointerEvents	Boolean	-	Whether to enable pointer events
depthTest	Boolean	true	Enable depth testing
autoHeight	Boolean	false	Enable automatic height calculation
fixedHeight	Number	0	Fixed height value
zIndex	Number	9	Z-index of the layer
ge3dMap	Object	-	ge3dMap coordinate system configuration

ECharts Option

The option parameter accepts a standard ECharts configuration object with support for ge3dMap coordinate system.

Basic Options

Parameter	Type	Default	Description
animation	Boolean	true	Whether to enable animation
visualMap	Object	-	Visual mapping component configuration (see VisualMap Options below)

VisualMap Options

Parameter	Type	Default	Description
min	Number	-	Minimum value for visual mapping
max	Number	-	Maximum value for visual mapping
bottom	String	-	Distance from bottom (e.g., "5%")
right	String	-	Distance from right (e.g., "5%")
itemHeight	Number	-	Height of visual map items
show	Boolean	true	Whether to show visual map

Series Options

The series parameter is an array of series configurations. Each series can use ge3dMap coordinate system.

EffectScatter Series

Parameter	Type	Default	Description
type	String	-	Series type, set to "effectScatter"
coordinateSystem	String	-	Coordinate system, use "ge3dMap" for 3D map
showEffectOn	String	-	When to show effect ("render" or "emphasis")
colorBy	String	-	Color mapping method ("data" or "series")
effectType	String	-	Effect type (e.g., "ripple")
zlevel	Number	0	Z-level for rendering
rippleEffect	Object	-	Ripple effect configuration (see RippleEffect Options below)
label	Object	-	Label configuration (see Label Options below)
symbol	String	-	Symbol type ("circle", "pin", "diamond", etc.)
itemStyle	Object	-	Item style configuration (see ItemStyle Options below)
data	Array	-	Data array (see Data Format below)
markLine	Object	-	Mark line configuration

RippleEffect Options

Parameter	Type	Default	Description
period	Number	-	Animation period
scale	Number	-	Scale factor
brushType	String	-	Brush type ("fill" or "stroke")

Label Options

Parameter	Type	Default	Description
normal	Object	-	Normal state label configuration
normal.show	Boolean	-	Whether to show label
normal.formatter	String	-	Label formatter (e.g., "{b}")
normal.position	String	-	Label position (e.g., "top")
normal.offset	Array	-	Label offset [x, y]
normal.color	String	-	Label color
emphasis	Object	-	Emphasis state label configuration
emphasis.show	Boolean	-	Whether to show label on emphasis

ItemStyle Options

Parameter	Type	Default	Description
normal	Object	-	Normal state style configuration
normal.show	Boolean	-	Whether to show item
normal.shadowBlur	Number	-	Shadow blur radius
normal.shadowColor	String	-	Shadow color

Lines Series

Parameter	Type	Default	Description
type	String	-	Series type, set to "lines"
coordinateSystem	String	-	Coordinate system, use "ge3dMap" for 3D map
zlevel	Number	0	Z-level for rendering
effect	Object	-	Line effect configuration (see LineEffect Options below)
lineStyle	Object	-	Line style configuration (see LineStyle Options below)
data	Array	-	Line data array (see LineData Format below)

LineEffect Options

Parameter	Type	Default	Description
show	Boolean	-	Whether to show effect
period	Number	-	Animation period
trailLength	Number	-	Trail length
symbol	String	-	Symbol type (e.g., "arrow")
symbolSize	Number	-	Symbol size
shadowBlur	Number	-	Shadow blur radius
shadowColor	String	-	Shadow color

LineStyle Options

Parameter	Type	Default	Description
type	String	-	Line type ("solid", "dashed", "dotted", or array [5, 10] for custom)
width	Number	-	Line width
opacity	Number	-	Line opacity (0-1)
curveness	Number	-	Line curveness (0-1)
color	String/Object	-	Line color (string or gradient object)
shadowBlur	Number	-	Shadow blur radius
shadowColor	String	-	Shadow color

LineStyle Color Gradient

When color is an object, it can be a gradient configuration:

Parameter	Type	Default	Description
type	String	-	Gradient type ("linear" or "radial")
x	Number	-	Start x coordinate (0-1)
y	Number	-	Start y coordinate (0-1)
x2	Number	-	End x coordinate (0-1)
y2	Number	-	End y coordinate (0-1)
colorStops	Array	-	Color stops array
colorStops[].offset	Number	-	Color stop offset (0-1)
colorStops[].color	String	-	Color at this stop
global	Boolean	false	Whether gradient is global

Data Format

For EffectScatter series, data items can be objects with the following structure:

Parameter	Type	Description
key	String	Unique key identifier
name	String	Display name
latitudeAndLongitude	String	Latitude and longitude string (e.g., "46.6753,24.7136")
counts	Number	Count value
value	Array	Value array [lng, lat, value]

LineData Format

For Lines series, data items should be objects with the following structure:

Parameter	Type	Description
coords	Array	Array of coordinate pairs [[lng1, lat1], [lng2, lat2]]
value	Number	Line value

Properties

Property	Type	Description
echartsInstance	echarts.EChartsType	ECharts instance
pointerEvents	Boolean	Whether pointer events are enabled

Methods

setEchartsOption

Set ECharts configuration option

setEchartsOption(option: Object, notMerge?: Boolean, lazyUpdate?: Boolean): void

Parameters:

• option: ECharts configuration object
• notMerge: Whether to not merge with previous option (optional)
• lazyUpdate: Whether to lazy update (optional)

resize

Resize the ECharts layer

resize(): void

setVisible

Set layer visibility

setVisible(visible: Boolean): void

Parameters:

• visible: Whether to show the layer

getBounds

Get the bounds of the layer data

getBounds(returnObject?: { returnObject: Boolean }): Cesium.Rectangle | Object | null

Parameters:

• returnObject: If provided with returnObject: true, returns an object with {xmin, xmax, ymin, ymax}. Otherwise returns a Cesium.Rectangle.

Returns:

• Cesium.Rectangle or Object with bounds, or null if no data

addEventListener

Add event listener

addEventListener(eventName: String, handler: Function, context?: Object): void

Parameters:

• eventName: Event name (ECharts event name)
• handler: Event handler function
• context: Context object (optional)

onByQuery

Add event listener by query

onByQuery(eventName: String, query: String | Object, handler: Function, context?: Object): EchartsLayer

Parameters:

• eventName: Event name
• query: Query string or object to filter events
• handler: Event handler function
• context: Context object (optional)

Returns:

• Returns EchartsLayer instance for chaining

removeEventListener

Remove event listener

removeEventListener(eventName: String, handler: Function): EchartsLayer

Parameters:

• eventName: Event name
• handler: Event handler function

Returns:

• Returns EchartsLayer instance for chaining

Coordinate System

The EchartsLayer supports the ge3dMap coordinate system, which allows ECharts to render on the 3D map. When using ge3dMap coordinate system:

• Data coordinates should be in [longitude, latitude] format
• The coordinate system automatically handles 3D projection
• Supports depth testing and automatic height calculation

Example

const options = {
  animation: false,
  visualMap: { 
    min: 0, 
    max: 15, 
    bottom: "5%", 
    right: "5%", 
    itemHeight: 30, 
    show: true 
  },
  series: [
    {
      type: "effectScatter",
      coordinateSystem: "ge3dMap",
      showEffectOn: "render",
      colorBy: 'data',
      effectType: 'ripple',
      zlevel: 0,
      rippleEffect: { 
        period: 15, 
        scale: 12, 
        brushType: "fill" 
      },
      label: { 
        normal: { 
          show: true, 
          formatter: "{b}", 
          position: "top", 
          offset: [5, 0], 
          color: "#ff00B6" 
        }, 
        emphasis: { show: true } 
      },
      symbol: "pin",
      itemStyle: { 
        normal: { 
          show: true, 
          shadowBlur: 10, 
          shadowColor: "#3300ff" 
        } 
      },
      data: [
        { 
          key: "Riyadh", 
          name: "Riyadh", 
          latitudeAndLongitude: "46.6753,24.7136", 
          counts: 15, 
          value: [46.6753, 24.7136, 15] 
        }
      ]
    },
    {
      type: "lines",
      coordinateSystem: "ge3dMap",
      zlevel: 0,
      effect: { 
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 1.0)',
        show: true, 
        period: 4, 
        trailLength: 20, 
        symbol: "arrow", 
        symbolSize: 24 
      },
      lineStyle: { 
        type: "dashed",
        width: 2, 
        opacity: 1, 
        curveness: 0.3, 
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, 
            color: 'yellow'
          }, {
            offset: 1, 
            color: 'red'
          }],
          global: false
        }
      },
      data: [
        {
          coords: [
            [46.6753, 24.7136],
            [39.192, 21.4858]
          ],
          value: 1
        }
      ]
    }
  ]
};

const echartsLayer = new ge3d.object.EchartsLayer(options);
core.addObject(echartsLayer);

window.addEventListener("resize", function () {
  echartsLayer.resize();
});