Render dots on echarts scatter map

achieve effect

As shown in the figure above, we often encounter some requirements to draw some solid circles with different diameters on the map according to the size of the data.
First of all, we have to draw the map first, and then draw the circles associated with the data.

In order to make it easier for scatter to establish a coordinate system, we use geo to draw custom maps instead of Baidu maps or Google maps.

Implementation steps

The first step is to introduce the json data of a map. Here I choose the world map.

import world from '@/common/map/world.js';

The second step is to find a map data and register it in echarts.

echarts.