How to use echarts, or Highcharts to make a non-overlapping bubble chart,

currently, if you want to display some bubbles randomly in a panel, you need the three largest values to be displayed in the middle, and the rest are randomly distributed around.
as shown in the following effect diagram, currently using echarts basically overlaps because of the need to set the coordinates of the point. I wrote down the coordinates of the first three, and how to deal with the coordinates of the back points can not overlap.

clipboard.png

Jul.26,2021

Echart three-point diagram is an example

var data = [
    [[28604,77,17096869,'Australia',1990],
    [31163,77.4,27662440,'Canada',1990],
    [1516,68,1154605773,'China',1990],
    [13670,74.7,10582082,'Cuba',1990],
    [28599,75,4986705,'Finland',1990]]
];
data

symbolSize: function (data) {
    return Math.sqrt(data[2]) / 5e2;
}
symbolSize

Menu