Implementing 3D Maps with ECharts in Vue: From 2D to 3D with Configuration and Code Samples

The article demonstrates how to implement a 3D map using ECharts, providing practical configuration examples from 2D to 3D, sharing code snippets, and highlighting common pitfalls encountered while consulting documentation and AI assistance.

Implementation Effect

Importing Map JSON File

To generate map regions you first need a JSON file; you can obtain one from Alibaba Cloud's data visualization platform.

The file contains latitude‑longitude coordinates that define the map rendering. It can be imported directly in Vue.

import beijingGeoJSON from '@/assets/json/beijing.json';

Loading ECharts to Render Map

<div id="main"></div>
import * as echarts from 'echarts';
var myChart = echarts.init(document.getElementById('main'));
let option1 = {
  series: [{
    type: 'map',
    map: 'beijing',
    label: {
      show: true,
      color: "#000",
      fontSize: 8,
      formatter: function (params) { return params.name; }
    },
    itemStyle: {
      normal: {
        areaColor: 'lightblue',
        color: 'white',
        borderColor: 'gray',
        borderWidth: 1
      },
      emphasis: { areaColor: 'red' }
    }
  }]
};
myChart.setOption(option1);
echarts.registerMap('beijing', beijingGeoJSON);

Note that the first argument of registerMap must match the map value in the series, otherwise the map will not render.

Adding Region Labels to the Map

The default style shows no region names; the label property is used to display them.

label: {
  show: true,
  color: "#000",
  fontSize: 8,
  formatter: function (params) { return params.name; }
},

Configuring Default Highlight for a Region

To make a specific district (e.g., Shunyi) highlighted by default, add a selected flag in the data array.

data: [{
  name: '顺义区',
  selected: true
}],

Use itemStyle to define the appearance of highlighted and non‑highlighted areas.

itemStyle: {
  normal: {
    areaColor: 'lightblue',
    color: 'white',
    borderColor: 'gray',
    borderWidth: 1
  },
  emphasis: { areaColor: 'red' }
},

Highlight Configuration Notes

There are two kinds of highlight: default highlight set in data and click‑triggered highlight defined in emphasis . The two requirements are:

When another region is clicked, the default highlighted region should lose its highlight.

When another region is clicked, the default highlighted region should change style to distinguish between default and click highlights.

A simple additional configuration solves the second requirement:

data: [{
  name: '顺义区',
  selected: true,
  itemStyle: {
    areaColor: 'red',
    color: 'red',
    borderWidth: 1
  }
}],

Importing echarts-gl for 3D Effect

import 'echarts-gl';

3D Map Version

Using the geo3D component turns the map into a rotatable 3‑D object.

The itemStyle controls each region’s color, while viewControl adjusts the 3‑D rotation angles.

let option1 = {
  geo3D: {
    map: "beijing",
    roam: true,
    itemStyle: {
      color: "#4189f2",
      opacity: 1,
      borderWidth: .1,
      borderColor: "#eee",
      fontSize: .1
    },
    viewControl: {
      distance: 120,
      alpha: 70,
      beta: 0
    }
  }
};

Background Gradient Implementation

itemStyle: {
  color: {
    type: 'linear',
    x: 0, y: 0, x2: 0, y2: 1,
    colorStops: [
      { offset: 0, color: '#4189f2' },
      { offset: 1, color: '#ffffff' }
    ]
  },
  opacity: 1,
  borderWidth: .1,
  borderColor: "#eee",
  fontSize: .1
},

The gradient made the background become partially transparent, which was not the intended effect.

Instead, a textured background image is applied using realisticMaterial :

realisticMaterial: {
  detailTexture: require('@/assets/images/areabg.jpg'),
  textureTiling: 1
},

When using a background image, the shading must be set to "realistic" and the original itemStyle.color should be removed.

shading: "realistic",
itemStyle: {
  borderWidth: .1,
  borderColor: "#eee",
  fontSize: .1
},

Region Name Implementation

label: {
  show: true,
  color: "lightgrey",
  fontSize: 6,
  formatter: function (params) { return params.name; }
},

The configuration is similar to the 2‑D version, using formatter to display the name from the JSON.

Specific Region Highlight Implementation

For special regions (e.g., provincial capitals) use the regions array; note that background textures may cause color differences.

regions: [{
  name: "顺义区",
  regionHeight: 7,
  itemStyle: { color: "#EC691A" }
}],

regionHeight defines the 3‑D thickness of the area.

Region 3D Bar Chart Data Implementation

A 3‑D bar chart can be used to visualize data per region.

Configure grid3D , the three axes, and a bar3D series that uses the geographic coordinate system.

grid3D: { show: false },
xAxis3D: { type: 'value' },
 yAxis3D: { type: 'value' },
 zAxis3D: { type: 'value' },
series: {
  type: 'bar3D',
  name: 'beijing',
  coordinateSystem: 'geo3D',
  data: barData,
  color: '#EC691A',
  minHeight: 5,
  barSize: 1.5,
  animation: true,
  animationDurationUpdate: 2000
}

Changing the type yields different 3‑D shapes; refer to the official ECharts documentation for details.

Lighting Implementation

Adding a light source improves realism by casting shadows.

light: {
  main: {
    color: "#fff",
    intensity: .4,
    shadowQuality: 'high',
    shadow: true,
    alpha: 45,
    beta: -45
  },
  ambient: { intensity: .6 }
},

The light is angled from the lower left to the upper right to complement the background texture.

Conclusion

The guide covers the core steps for building a 2D/3D ECharts map in Vue, including JSON import, labeling, default and interactive highlighting, background styling, 3D extrusion, and lighting. Some features such as click‑to‑change region colors remain unfinished and will be addressed in a future post.