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.

Echarts highcharts vue.js

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

Previous: What's the point of System.gc ()?

Next: "questions about imac external monitors

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b33370-2be6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b33370-2be6c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?