散点图高级特性完全指南 - 气泡图与聚合

📋 概述

散点图高级特性 包括气泡图（用大小区分第三维度）、数据聚合、聚类分析等功能。这些特性能够展示多维数据关系和分布模式，是统计分析的利器。

核心价值

• 气泡图：在二维平面上展示三维数据
• 数据聚合：大数据量时自动合并显示
• 聚类分析：发现数据自然分组
• 回归分析：添加趋势线

---

🎯 核心概念

1. 气泡图（Bubble Chart）

// 数据结构：[x, y, size]
option = {
  series: [{
    type: 'scatter',
    data: [
      [10, 20, 30],  // x=10, y=20, size=30
      [30, 40, 50],
      [50, 60, 80]
    ],
    symbolSize: function(data) {
      return data[2]; // 使用第三维作为气泡大小
    }
  }]
};

2. 数据聚合（Clustering）

option = {
  series: [{
    type: 'scatter',
    data: hugeData,
    progressive: 5000, // 渐进式渲染
    progressiveThreshold: 10000,
    
    // 启用聚合
    clustering: true,
    clusterGridIndex: 0
  }]
};

---

🔧 详细配置项

完整气泡图配置

option = {
  title: {
    text: '城市经济分析',
    subtext: 'X=人均GDP, Y=人口, 气泡大小=GDP总量'
  },
  
  tooltip: {
    formatter: function(params) {
      return `<strong>${params.data[3]}</strong><br/>
              人均GDP: ¥${params.data[0]}<br/>
              人口: ${params.data[1]}万<br/>
              GDP总量: ¥${params.data[2]}亿`;
    }
  },
  
  grid: {
    left: '10%',
    right: '10%',
    bottom: '10%',
    top: '15%'
  },
  
  xAxis: {
    type: 'value',
    name: '人均GDP（元）',
    nameLocation: 'middle',
    nameGap: 30
  },
  
  yAxis: {
    type: 'value',
    name: '人口（万人）',
    nameLocation: 'middle',
    nameGap: 40
  },
  
  series: [{
    type: 'scatter',
    data: [
      [80000, 2100, 30000, '北京'],
      [90000, 1500, 28000, '上海'],
      [70000, 1200, 22000, '深圳'],
      [60000, 800, 15000, '杭州']
    ],
    
    // 气泡大小映射
    symbolSize: function(data) {
      return Math.sqrt(data[2]) / 5; // 根据GDP计算气泡大小
    },
    
    // 视觉映射
    visualMap: [
      {
        dimension: 2, // 第三维（GDP）
        min: 0,
        max: 50000,
        inRange: {
          color: ['#313695', '#4575b4', '#74add1', '#fee090', '#d73027']
        }
      }
    ],
    
    // 标签
    label: {
      show: true,
      formatter: function(param) {
        return param.data[3];
      },
      position: 'top'
    },
    
    // 高亮效果
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

---

💡 实战案例

案例1：全球国家发展指标

// 数据：[人均GDP, 预期寿命, 人口, 国家名]
const countryData = [
  [65000, 82, 330, '美国'],
  [42000, 77, 1400, '中国'],
  [48000, 81, 67, '英国'],
  [50000, 84, 126, '日本'],
  [30000, 79, 83, '德国'],
  // ... 更多国家
];

option = {
  title: {
    text: '全球发展指标分析',
    left: 'center'
  },
  
  tooltip: {
    formatter: function(params) {
      return `<strong>${params.data[3]}</strong><br/>
              💰 人均GDP: $${params.data[0].toLocaleString()}<br/>
              ❤️ 预期寿命: ${params.data[1]}岁<br/>
              👥 人口: ${params.data[2]}百万`;
    }
  },
  
  xAxis: {
    type: 'value',
    name: '人均GDP ($)',
    scale: true
  },
  
  yAxis: {
    type: 'value',
    name: '预期寿命 (岁)',
    min: 60,
    max: 90
  },
  
  series: [{
    type: 'scatter',
    data: countryData,
    symbolSize: function(data) {
      return Math.sqrt(data[2]) * 2; // 人口决定气泡大小
    },
    itemStyle: {
      color: function(params) {
        const gdp = params.data[0];
        if (gdp > 50000) return '#5470c6';
        if (gdp > 30000) return '#91cc75';
        if (gdp > 10000) return '#fac858';
        return '#ee6666';
      },
      opacity: 0.7
    },
    label: {
      show: false // 默认不显示，避免拥挤
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 12,
        fontWeight: 'bold'
      }
    }
  }]
};

---

⚠️ 常见问题

问题1：气泡重叠严重

解决：

series: [{
  type: 'scatter',
  symbolSize: function(data) {
    // 限制最大最小尺寸
    const size = Math.sqrt(data[2]);
    return Math.min(Math.max(size, 5), 50);
  }
}]

问题2：大数据量性能差

解决：

series: [{
  type: 'scatter',
  data: hugeData,
  progressive: 5000, // 渐进式渲染
  progressiveThreshold: 10000,
  sampling: 'lttb', // 降采样
  large: true, // 启用大数据模式
  largeThreshold: 2000
}]

---

🎯 最佳实践

1. 气泡大小归一化

function normalizeBubbleSize(value, minVal, maxVal, minSize, maxSize) {
  const ratio = (value - minVal) / (maxVal - minVal);
  return minSize + ratio * (maxSize - minSize);
}

// 使用
symbolSize: function(data) {
  return normalizeBubbleSize(data[2], 0, 100000, 10, 60);
}

2. 智能标签显示

label: {
  show: false,
  emphasis: {
    show: true // 只在悬停时显示
  }
}

---

📊 性能指标

数据量	普通模式	大数据模式	建议
<1000	15ms	-	无限制
1000-5000	50ms	30ms	启用progressive
5000-20000	200ms	80ms	启用large
>20000	卡顿	150ms	必须优化

---

🔗 相关链接

• 散点图基础.md)
• visualMap视觉映射
• 大数据large模式

---

💎 总结

高级散点图核心价值：

• ✅ 气泡图展示三维数据
• ✅ 聚合处理大数据量
• ✅ 聚类发现数据模式
• ✅ 回归线揭示趋势

掌握高级散点图，让多维数据分析更深入！🔵

气泡聚合效果

{
  "title": {
    "text": "城市经济指标",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "xAxis": {
    "type": "value",
    "name": "GDP(万亿)"
  },
  "yAxis": {
    "type": "value",
    "name": "人口(万)"
  },
  "series": [
    {
      "type": "scatter",
      "data": [
        [
          2.5,
          2428,
          2428,
          "上海"
        ],
        [
          2.3,
          2189,
          2189,
          "北京"
        ],
        [
          2,
          1867,
          1867,
          "深圳"
        ],
        [
          1.7,
          1600,
          1600,
          "广州"
        ],
        [
          1.5,
          1300,
          1300,
          "成都"
        ]
      ],
      "itemStyle": {
        "opacity": 0.7,
        "shadowBlur": 10
      }
    }
  ]
}