气泡图

new Scatter('chart-basic', {
    data,
    xField: 'price',
    yField: 'sales',
    sizeField: 'profit',
    size: [8, 30],  // 减小最大气泡尺寸，防止溢出
    colorField: 'category',
    color: ['#5B8FF9', '#5AD8A6', '#FF9500'],
    shape: 'circle',
    pointStyle: { 
        fillOpacity: 0.6,
        stroke: '#fff',
        lineWidth: 1
    },
    padding: [40, 80, 50, 50],  // 右侧大幅增加空间，防止X轴标签和大气泡溢出
    meta: {
        price: { range: [0.12, 0.88] },  // 缩小映射范围，确保气泡不紧贴边缘
        sales: { range: [0.12, 0.88] },
    },
    xAxis: { 
        label: { style: { fontSize: 11, fill: '#1D1D1F' } },
        line: { style: { stroke: '#E8E8ED' } },
        tickLine: null,
    },
    yAxis: { 
        label: { style: { fontSize: 11, fill: '#1D1D1F' } },
        grid: { line: { style: { stroke: '#E8E8ED', lineDash: [4, 4] } } },
        line: null,
    },
    legend: false,
    tooltip: {
        fields: ['product', 'price', 'sales', 'profit'],
    },
}).render();