import { Scatter } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "style": {
      "lineWidth": 1,
      "fillOpacity": 0.3
    },
    "scale": {
      "size": {
        "type": "log",
        "range": [4, 20]
      }
    },
    "shapeField": "point",
    "colorField": "continent",
    "sizeField": "Population",
    "yField": "LifeExpectancy",
    "xField": "GDP",
    "data": {
      "type": "fetch",
      "value": "https://gw.alipayobjects.com/os/antvdemo/assets/data/bubble.json"
    },
    "interaction": {
      "fisheye": true
    }
  };

  return <Scatter {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);