如何用ECharts实现数据聚类可视化？3个实用案例带你掌握智能分组技术

2026-03-17 02:30:37作者：魏献源Searcher

在数据分析领域，面对海量数据如何快速发现隐藏规律？如何让业务人员直观理解复杂的数据分布特征？本文将通过ECharts实现数据聚类可视化，帮助你掌握智能分组技术，让数据规律一目了然。

数据聚类的核心价值

数据聚类就像自然界中的物以类聚现象，将相似特征的数据点自动归为一类。ECharts通过内置的聚类算法模块，无需深厚的机器学习背景，就能实现专业级的数据分组可视化。这种技术不仅能揭示数据内在结构，还能为决策提供数据支持，是从数据到洞察的关键一步。

数据预处理的3个关键步骤

在进行聚类分析前，数据预处理至关重要。这一步就像烹饪前的食材准备，直接影响最终结果的质量。

数据清洗与标准化

首先需要处理缺失值和异常值，并对数据进行标准化处理，确保不同维度的数据具有可比性。

特征选择

选择合适的特征维度是聚类效果的关键。通常选择具有业务意义且区分度高的特征组合。

数据格式转换

将数据转换为ECharts数据集支持的格式，为后续聚类分析做好准备。

聚类实现的3种方法

方法一：基于DBSCAN的密度聚类

DBSCAN算法通过识别数据中的密集区域来进行聚类，特别适合非凸形状的数据集。

echarts.registerTransform(ecStat.transform.clustering);

option = {
  dataset: [{
    id: 'raw',
    source: data // 原始数据
  }, {
    id: 'clustered',
    fromDatasetId: 'raw',
    transform: {
      type: 'ecStat:clustering',
      config: {
        method: 'dbscan',
        eps: 0.5,
        minSamples: 5,
        dimensions: ['feature1', 'feature2'],
        outputClusterIndexDimension: { name: 'cluster' }
      }
    }
  }]
  // 其他配置...
};

方法二：基于K-means的划分聚类

K-means算法将数据划分为K个不同的簇，适合球形分布的数据。

transform: {
  type: 'ecStat:clustering',
  config: {
    method: 'kmeans',
    clusterCount: 4,
    dimensions: ['feature1', 'feature2'],
    outputClusterIndexDimension: { name: 'cluster' }
  }
}

方法三：层次聚类

层次聚类构建数据的层次结构，适合展示数据间的层级关系。

transform: {
  type: 'ecStat:clustering',
  config: {
    method: 'hierarchical',
    clusterCount: 3,
    dimensions: ['feature1', 'feature2'],
    outputClusterIndexDimension: { name: 'cluster' }
  }
}

聚类可视化的实现路径

原理图解

聚类可视化的核心是将高维数据映射到二维平面，并通过颜色、大小等视觉编码方式展示不同聚类。ECharts通过数据集和数据变换实现这一过程，将原始数据经过聚类算法处理后，再通过自定义系列进行可视化呈现。

关键代码

series: [{
  type: 'scatter',
  datasetId: 'clustered',
  encode: {
    x: 'feature1',
    y: 'feature2',
    itemStyle: {
      color: {
        field: 'cluster',
        type: 'ordinal',
        map: ['#5470c6', '#91cc75', '#fac858', '#ee6666']
      }
    }
  },
  symbolSize: 10
}, {
  // 聚类中心标记
  type: 'scatter',
  datasetId: 'clusterCenters',
  symbol: 'pin',
  symbolSize: 20,
  itemStyle: { color: '#000' }
}]

效果对比

通过聚类可视化，原本杂乱无章的数据点呈现出明显的分组特征，不同颜色代表不同聚类，黑色标记点表示各聚类中心，让数据分布规律一目了然。

实际应用场景分析

场景一：用户行为分析

通过对用户的访问频率、停留时间等行为数据进行聚类，可以识别不同类型的用户群体，为精准营销提供依据。例如，识别出高价值用户群体，针对性地推出会员服务。

场景二：产品质量检测

在制造业中，通过对产品的各项指标数据进行聚类分析，可以快速识别出异常产品，提高质量检测效率。例如，在电子产品生产中，通过聚类分析识别出潜在的故障产品。

场景三：金融风险评估

在金融领域，通过对客户的财务数据进行聚类，可以识别出不同风险等级的客户群体，为信贷决策提供支持。例如，识别出高风险客户，采取相应的风险控制措施。

进阶优化技巧

技巧一：动态调整聚类参数

通过添加交互控件，允许用户动态调整聚类算法的关键参数，实时查看不同参数下的聚类效果。

// 添加滑块控件调整聚类数量
toolbox: {
  feature: {
    dataView: { show: true },
    magicType: { show: true, type: ['line', 'bar'] },
    restore: { show: true },
    saveAsImage: { show: true }
  },
  myTool: {
    show: true,
    title: '调整聚类数量',
    icon: 'M30.5,36.5h5v-5h-5V36.5z M30.5,29.5h5v-5h-5V29.5z M30.5,22.5h5v-5h-5V22.5z M23.5,36.5h5v-5h-5V36.5z M23.5,29.5h5v-5h-5V29.5z M23.5,22.5h5v-5h-5V22.5z M16.5,36.5h5v-5h-5V36.5z M16.5,29.5h5v-5h-5V29.5z M16.5,22.5h5v-5h-5V22.5z',
    onclick: function () {
      // 调整聚类数量的逻辑
    }
  }
}

技巧二：多维度聚类结果联动

将聚类结果与其他图表类型（如柱状图、饼图）联动，展示不同聚类的统计特征，提供更全面的数据分析视角。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts数据聚类可视化示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js"></script>
</head>
<body>
  <div id="main" style="width: 800px;height:600px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('main'));
    echarts.registerTransform(ecStat.transform.clustering);
    
    // 模拟数据
    const data = [];
    for (let i = 0; i < 100; i++) {
      data.push([
        Math.random() * 100, // feature1
        Math.random() * 100, // feature2
        'item' + i
      ]);
    }
    
    const option = {
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'item'
      },
      dataset: [{
        id: 'raw',
        source: data
      }, {
        id: 'clustered',
        fromDatasetId: 'raw',
        transform: {
          type: 'ecStat:clustering',
          config: {
            method: 'dbscan',
            eps: 8,
            minSamples: 5,
            dimensions: [0, 1],
            outputClusterIndexDimension: { name: 'cluster' }
          }
        }
      }],
      xAxis: {
        type: 'value',
        name: '特征1',
        splitLine: { show: true }
      },
      yAxis: {
        type: 'value',
        name: '特征2',
        splitLine: { show: true }
      },
      series: [{
        type: 'scatter',
        datasetId: 'clustered',
        encode: {
          x: 0,
          y: 1,
          itemName: 2,
          itemStyle: {
            color: {
              field: 'cluster',
              type: 'ordinal',
              map: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
            }
          }
        },
        symbolSize: 10,
        label: {
          show: false,
          formatter: function(params) {
            return params.data[2];
          }
        }
      }]
    };
    
    chart.setOption(option);
  </script>
</body>
</html>