你正在查看 v1.0.1 文档。切换到最新版请访问：/

气泡散点

功能说明（What）

气泡散点通过点大小表达第三维度，适合展示三维关联关系。

应用场景（When）

• 三维数据关系（x/y/size）
• 强调权重或规模

快速上手（How - Quick）

import { BaseScatter } from '@ymhc/harmonycharts';
import type { BaseScatterConfig } from '@ymhc/harmonycharts';

@Entry
struct Index {
  @Prop baseScatterConfig: BaseScatterConfig = {
    series: [{
      name: 'Bubble',
      data: [[10, 20, 6], [15, 35, 10], [20, 22, 8], [25, 45, 12]],
      symbolSize: (val) => Number(val[2])
    }],
    tooltip: { show: true, trigger: 'item', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BaseScatter({ config: this.baseScatterConfig, chartHeight: 220 })
    }
  }
}

运行结果

完整示例配置（整页可用）

const option: HarmonyChartsOption = {
  grid: { top: 28, left: 12, right: 12, bottom: 24 },
  tooltip: { show: true, trigger: 'item', confine: true },
  legend: { show: true },
  xAxis: { type: 'value' },
  yAxis: { type: 'value', includeZero: true },
  series: [
    { type: 'scatter', name: 'Bubble', data: [[10, 20, 6], [15, 35, 10], [20, 22, 8], [25, 45, 12]], symbolSize: (val) => Number(val[2]) }
  ]
};

默认值（精确工程默认）

该页面默认值与 BaseScatter 一致，详见总览页「默认值（精确工程默认）」。

配置项说明（API）

参数	说明	类型	默认值
symbolSize	点大小	number | callback	8
itemStyle	点样式	ItemStyleOption	-

事件与交互（Events）

chart.on('click', (params) => {
  // params.seriesType === 'scatter'
});

高级用法（Advanced）

• 使用颜色表示第四维度

注意事项 / 设计说明（Notes）

• symbolSize 回调返回值需为 number。