EchartsLayer (ECharts Layer)

Create and manage ECharts chart layer objects, supporting overlaying ECharts visualizations on maps.

Constructor

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

Parameters (Options)

Layer Options

Parameter	Type	Default	Description
pointerEvents	Boolean	-	Whether to allow mouse events to pass through
depthTest	Boolean	true	Whether to enable depth testing (hide points occluded by the globe in 3D mode)
autoHeight	Boolean	false	Whether to automatically get terrain height
fixedHeight	Number	0	Fixed height value (meters)
zIndex	Number	9	Layer z-index
animation	Boolean	false	Whether to enable animation
visualMap	Object	-	Visual mapping component configuration
series	Array	-	Series data configuration array
ge3dMap	Object	{}	ge3dMap coordinate system configuration

ECharts Options (Detailed Description)

animation

Whether to enable animation effects.

animation: boolean

visualMap

Visual mapping component for visual encoding, mapping data to visual elements.

visualMap: {
  min: number,           // Minimum value
  max: number,           // Maximum value
  bottom: string,        // Distance from bottom, e.g., "5%"
  right: string,         // Distance from right, e.g., "5%"
  itemHeight: number,    // Graphic height
  show: boolean          // Whether to show
}

series

Series data configuration array, where each element represents a series.

series: Array<{
  type: string,                    // Chart type, e.g., "scatter", "effectScatter", etc.
  coordinateSystem: string,         // Coordinate system type, supports "ge3dMap", "cartesian2d", "cartesian3D"
  showEffectOn: string,            // Effect trigger timing, e.g., "render"
  colorBy: string,                 // Color mapping method, e.g., "data"
  effectType: string,              // Effect type, e.g., "ripple" (ripple effect)
  zlevel: number,                  // Used for Canvas layering, Canvas with larger zlevel is placed above Canvas with smaller zlevel
  rippleEffect: Object,            // Ripple effect configuration
  label: Object,                   // Label configuration
  symbol: string,                  // Marker shape, e.g., "circle", "pin", etc.
  itemStyle: Object,               // Graphic style configuration
  data: Array                      // Data array
}>

series.rippleEffect

Ripple effect configuration object.

rippleEffect: {
  period: number,                  // Animation period in seconds
  scale: number,                   // Maximum scale ratio of ripples in animation
  brushType: string,              // Ripple drawing method, options: "stroke" and "fill"
  number: number,                 // Number of ripples
  color: string | Object          // Ripple color, can be a string or gradient color object
}

rippleEffect.color Gradient Color Configuration:

color: {
  type: 'linear',                 // Gradient type, 'linear' means linear gradient
  x: number,                      // X coordinate of gradient start point
  y: number,                      // Y coordinate of gradient start point
  x2: number,                     // X coordinate of gradient end point
  y2: number,                     // Y coordinate of gradient end point
  colorStops: Array<{             // Color gradient configuration array
    offset: number,               // Color stop position, range 0-1
    color: string                 // Color value
  }>,
  global: boolean                 // Whether to use global coordinates, default false
}

series.label

Label configuration object.

label: {
  normal: {                       // Label configuration in normal state
    show: boolean,                // Whether to show label
    fontWeight: string,           // Font weight, e.g., "bolder"
    formatter: string,           // Label content formatter, e.g., "{b}" means display data item name
    position: string,            // Label position, e.g., "top"
    offset: Array<number>,       // Label offset, [x, y]
    color: string                // Label color
  },
  emphasis: {                    // Label configuration in emphasis state
    show: boolean                // Whether to show label
  }
}

series.itemStyle

Graphic style configuration object.

itemStyle: {
  normal: {                      // Style configuration in normal state
    show: boolean,               // Whether to show
    shadowBlur: number,          // Shadow blur size
    shadowColor: string         // Shadow color
  }
}

series.data

Data array, where each data item contains position and value information.

data: Array<{
  key: string,                   // Data item unique identifier
  name: string,                  // Data item name
  latitudeAndLongitude: string,  // Latitude and longitude string, format "lng,lat"
  counts: number,                // Value
  value: Array<number>           // Value array, format [lng, lat, value] or [lng, lat]
}>

Data Format Description:

• value: [lng, lat, value] - Three-element array containing longitude, latitude, and value
• value: [lng, lat] - Two-element array containing only longitude and latitude
• When using coordinateSystem: "ge3dMap", coordinates will be automatically mapped to the map

ge3dMap

ge3dMap coordinate system configuration object.

ge3dMap: {
  // Coordinate system related configuration
  // This configuration is used when coordinateSystem: "ge3dMap" is set in series
}

Properties

Property	Type	Description
echartsInstance	echarts.ECharts	ECharts instance object
pointerEvents	Boolean	Whether to allow mouse events to pass through

Methods

resize

Resize the chart to adapt to container size changes.

resize(): void

setEchartsOption

Set ECharts configuration options.

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

Parameters:

• option - ECharts configuration object
• notMerge - Optional, whether not to merge configuration, default false
• lazyUpdate - Optional, whether to delay update, default false

setVisible

Set layer visibility.

setVisible(visible: boolean): void

Parameters:

• visible - Whether to be visible

getBounds

Get the geographic boundary range of layer data.

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

Parameters:

• returnObject - Optional, if set to { returnObject: true }, returns object format { xmin, xmax, ymin, ymax }, otherwise returns Cesium.Rectangle object

Returns:

• Cesium.Rectangle - Rectangle boundary object, or object containing { xmin, xmax, ymin, ymax }, returns null if no data

addEventListener

Add event listener.

addEventListener(eventName: string, handler: Function, context?: any): void

Parameters:

• eventName - Event name
• handler - Event handler function
• context - Optional, context for event handler function

onByQuery

Add event listener by query condition.

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

Parameters:

• eventName - Event name
• query - Query condition, can be a string or object
• handler - Event handler function
• context - Optional, context for event handler function

Returns:

• EchartsLayer - Returns current instance, supports method chaining

removeEventListener

Remove event listener.

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

Parameters:

• eventName - Event name
• handler - Event handler function

Returns:

• EchartsLayer - Returns current instance, supports method chaining

Coordinate System

EchartsLayer supports multiple coordinate systems:

• ge3dMap - ge3d map coordinate system, maps longitude and latitude coordinates to the map
• cartesian2d - 2D Cartesian coordinate system
• cartesian3D - 3D Cartesian coordinate system

When using coordinateSystem: "ge3dMap", longitude and latitude coordinates in the data will be automatically converted to screen coordinates and displayed on the map.

Example

// Create ECharts layer
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: 10,
        brushType: "fill",
        number: 6,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'WHITE' },
            { offset: 0.5, color: 'yellow' },
            { offset: 1, color: 'red' }
          ],
          global: false
        }
      },
      label: {
        normal: {
          show: true,
          fontWeight: "bolder",
          formatter: "{b}",
          position: "top",
          offset: [5, 0],
          color: "#ff00B6"
        },
        emphasis: { show: true }
      },
      symbol: "circle",
      itemStyle: {
        normal: {
          show: true,
          shadowBlur: 10,
          shadowColor: "#ff0000"
        }
      },
      data: [
        {
          key: "Riyadh",
          name: "Riyadh",
          latitudeAndLongitude: "46.6753,24.7136",
          counts: 15,
          value: [46.6753, 24.7136, 15]
        },
        {
          key: "Jeddah",
          name: "Jeddah",
          latitudeAndLongitude: "39.192,21.4858",
          counts: 6,
          value: [39.192, 21.4858, 6]
        }
      ]
    }
  ]
};

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

// Listen for window resize events
window.addEventListener("resize", function () {
  echartsLayer.resize();
});