JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AWS Cloud Spend World Map</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <style>
    #main { width: 900px; height: 600px; margin: auto; }
  </style>
</head>
<body>

<div id="main" style="width: 900px; height: 600px;"></div>
<script>
const data = [
  { name: 'US East (Ohio)', value: [51.43, -0.27, 5967] },
  // ... other regions ...
  { name: 'Africa (Cape Town)', value: [-18.42, 33.97, 588] }
];

const geoCoordMap = {
  'US East (Ohio)': [51.43, -0.27],
  // ... other regions ...
  'Africa (Cape Town)': [-18.42, 33.97]
};

const option = {
  tooltip: {},
  visualMap: [
    {
      show: false,
      type: 'piecewise',
      pieces: [
        {min: 0, max: 500, label: '<500'},
        {min: 501, max: 2000, label: '501-2000'},
        {min: 2001, max: Infinity, label: '>2000'}
      ],
      color: ['#4A7BF7', '#6BAED6', '#FFC938']
    }
  ],
  series: [
    {
      name: 'AWS Cloud Spend',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: data,
      symbolSize: function (data) {
        return Math.sqrt(data.value[2]) / 50;
      },
      label: {
        show: false
      },
      itemStyle: {
        color: '#fff'
      },
      emphasis: {
        label: {
          show: true
        }
      }
    }
  ],
  geo: {
    map: 'world',
    roam: true,
    itemStyle: {
      areaColor: '#e2e9ff',
      borderColor: '#999999'
    },
    regions: [
      // Customize region colors here if needed
    ]
  }
};

const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>

</body>
</html>