Map Components | Smartchart开发手册

Introduction #

SmartChart supports multiple map visualization components, including regional heatmaps (province/city color mapping), scatter point maps (geographic coordinate markers), flyline maps (city flow relationships), Baidu map base overlay, and Three.js driven 3D globe effects. Map data is rendered through ECharts map series.

Map Type	Description
Regional Heatmap	`type:'map'`, load GeoJSON to register map
Scatter Map	`type:'effectScatter'`, with `geoCoordMap` coordinates
Flyline Map	`type:'lines'`, shows inter-city flows
Baidu Base Map	`ds_loadBmap()`, requires AK configuration
3D Effects	`ds_load3d()`, Three.js driven

Use Cases #

SmartChart supports various map components for:

Regional distribution heatmaps (province/city color mapping)
Point scatter maps (marking geographic coordinate locations)
Flyline maps (showing flow between origin and destination)
Baidu map base overlay (satellite, street, and other real map bases)
3D globe/terrain maps

For detailed usage, refer to the video tutorial: Map Components and 3D

ECharts Map Basic Usage #

Load Map JSON Data #

Use ds_loadjson to load map GeoJSON data and register it with ECharts:

// Load China map
ds_loadjson('/static/echart/map/china.json', 'china')

// Load province map (Guangdong example)
ds_loadjson('/static/echart/map/province/guangdong.json', 'Guangdong')

option__name__ = {
    series: [{
        type: 'map',
        map: 'china',    // Must match registered name
        data: ds_createMap_all(__dataset__)
    }]
}

Ripple Scatter Map #

Mark geographic coordinates on the map to show value magnitudes:

let dataset = __dataset__  // [['city','value'], ['Changsha', 100], ['Guangzhou', 200]]
let geoCoordMap = {
    'Changsha': [112.93, 28.23],
    'Guangzhou': [113.27, 23.13]
}

let scatterList = get_geoscatterList(dataset, geoCoordMap)
// Generated format: [{name:'Changsha', value:[112.93, 28.23, 100]}, ...]

option__name__ = {
    geo: { map: 'china', roam: true },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: scatterList,
        symbolSize: val => val[2] / 10
    }]
}

Flyline Map #

Show flow relationships between cities:

let dataset = __dataset__  // [['source','target','value'], ['Beijing','Shanghai',100], ...]
let geoCoordMap = {
    'Beijing': [116.46, 39.92],
    'Shanghai': [121.48, 31.22]
}

let flyList = get_geoflyList(dataset, geoCoordMap)
// Generated format: [[{coord:[116.46,39.92], value:100}, {coord:[121.48,31.22]}], ...]

option__name__ = {
    geo: { map: 'china', roam: true },
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        data: flyList,
        effect: { show: true, symbol: 'arrow', symbolSize: 6 },
        lineStyle: { color: '#1890ff', width: 1, curveness: 0.2 }
    }]
}

Baidu Map Base Configuration #

Using Baidu map real base maps requires applying for an AK (API Key).

Configure AK #

Add the following configuration in SmartChart Home → Service Configuration:

{
  "_CONFIG": {
    "bmap_ak": "your_baidu_map_ak"
  }
}

Apply for Baidu Map AK #

Go to Baidu Map Open Platform and register an account
Create an application, select “Browser” type
Copy the generated AK into the configuration above

Baidu Map + ECharts Overlay Example #

// Load Baidu map (auto-reads ak from service configuration)
ds_loadBmap()

let dataset = __dataset__
let geoCoordMap = { /* city coordinate dictionary */ }
let scatterList = get_geoscatterList(dataset, geoCoordMap)

option__name__ = {
    bmap: {
        center: [116.46, 39.92],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: [{ featureType: 'all', elementType: 'geometry', stylers: { color: '#0e2050' } }]
        }
    },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: scatterList
    }]
}

3D Graphics #

Load SmartChart’s built-in Three.js libraries for 3D globe, 3D bar charts, and other effects:

// Load 3D dependency libraries
ds_load3d()

// Then use methods from threeDict for 3D development
// For specific parameters, refer to 3D graphic templates in the Graphics Store