@echarts-extension/pack-bubble

Language: English | 中文

ECharts extension chart for flat packed bubble diagrams. Import this package for side effects to register series.type = 'packBubble'.

Install

npm install echarts @echarts-extension/pack-bubble

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/pack-bubble';

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  series: [
    {
      type: 'packBubble',
      data: [
        { name: 'China', value: 1412, region: 'Asia' },
        { name: 'India', value: 1408, region: 'Asia' },
        { name: 'USA', value: 335, region: 'North America' },
        { name: 'Indonesia', value: 281, region: 'Asia' }
      ],
      categoryField: 'region',
      gap: 2,
      maxRadius: 76,
      fillRatio: 0.72,
      label: { show: true, minRadius: 28 }
    }
  ]
});

Data

Use an array of objects:

• valueField defaults to value and controls circle radius.
• nameField defaults to name and controls labels.
• categoryField groups colors when provided.
• Use item-level itemStyle or label to override individual bubbles.

Options

This table is generated by scripts/sync-options-from-readmes.mjs --write-readmes. Update the English README option table, then run npm run docs:sync-options to refresh the docs page.

| Option | Description | Values | | --- | --- | --- | | type | Registers this package series with ECharts. | 'packBubble' | | silent | Disables mouse events for the series when true. | boolean | | width | Series box width. | number \| string (pixel or percent) | | height | Series box height. | number \| string (pixel or percent) | | top | Distance from the top of the chart container. | number \| string (pixel or percent) | | right | Distance from the right of the chart container. | number \| string (pixel or percent) | | bottom | Distance from the bottom of the chart container. | number \| string (pixel or percent) | | left | Distance from the left of the chart container. | number \| string (pixel or percent) | | data | Flat bubble records with value and optional category fields. | Array<object> | | data.value | Numeric value. | number | | data.name | Display name. | string \| number | | data.category | Category name or id. | string \| number | | layout | Nested layout options for the bubble packing engine. | Object | | layout.padding | Inset around the packed bubbles. | number \| object | | layout.padding.top | Top inset. | number | | layout.padding.right | Right inset. | number | | layout.padding.bottom | Bottom inset. | number | | layout.padding.left | Left inset. | number | | layout.gap | Space between packed bubbles. | number | | layout.fast | Uses the fast layout path when true. | boolean | | layout.fastThreshold | Item count threshold for the fast layout path. | number | | layout.minRadius | Smallest bubble radius. | number | | layout.maxRadius | Largest bubble radius. | number | | layout.fillRatio | How densely bubbles fill the available area. | number | | layout.center | Center point for the layout. | [number \| string, number \| string] | | layout.sort | Sorts bubbles before layout. | boolean \| 'asc' \| 'desc' \| 'none' | | layoutOptions | Alias for nested layout options. | Object | | layoutOptions.padding | Inset around the packed bubbles. | number \| object | | layoutOptions.padding.top | Top inset. | number | | layoutOptions.padding.right | Right inset. | number | | layoutOptions.padding.bottom | Bottom inset. | number | | layoutOptions.padding.left | Left inset. | number | | layoutOptions.gap | Space between packed bubbles. | number | | layoutOptions.fast | Uses the fast layout path when true. | boolean | | layoutOptions.fastThreshold | Item count threshold for the fast layout path. | number | | layoutOptions.minRadius | Smallest bubble radius. | number | | layoutOptions.maxRadius | Largest bubble radius. | number | | layoutOptions.fillRatio | How densely bubbles fill the available area. | number | | layoutOptions.center | Center point for the layout. | [number \| string, number \| string] | | layoutOptions.sort | Sorts bubbles before layout. | boolean \| 'asc' \| 'desc' \| 'none' | | padding | Inset around the packed bubbles. | number \| object | | padding.top | Top inset. | number | | padding.right | Right inset. | number | | padding.bottom | Bottom inset. | number | | padding.left | Left inset. | number | | gap | Space between packed bubbles. | number | | minRadius | Smallest bubble radius. | number | | maxRadius | Largest bubble radius. | number | | fillRatio | How densely bubbles fill the available area. | number | | center | Center point for the packed bubble layout. | [number \| string, number \| string] | | valueField | Field used for bubble size. | string | | nameField | Field used for labels and names. | string | | categoryField | Field used for color grouping. | string | | sort | Sorts bubbles before layout. | boolean \| 'asc' \| 'desc' \| 'none' | | colors | Palette used for categories. | string[] | | enterAnimation | Animates bubbles into place. | boolean \| object | | enterAnimation.show | Shows the animation when true. | boolean | | enterAnimation.enabled | Enables the animation when true. | boolean | | enterAnimation.duration | Animation duration. | number \| function | | enterAnimation.delay | Delay before the animation starts. | number \| function | | enterAnimation.stagger | Delay added between items. | number \| function | | enterAnimation.easing | Animation easing name. | string | | itemStyle | Styles bubbles. | Object | | itemStyle.color | Primary color. | string | | itemStyle.opacity | Opacity. | number | | itemStyle.borderColor | Border color. | string | | itemStyle.borderWidth | Border width. | number | | itemStyle.shadowBlur | Shadow blur radius. | number | | itemStyle.shadowColor | Shadow color. | string | | label | Styles bubble labels. | Object | | label.show | Shows labels when true. | boolean | | label.color | Label text color. | string | | label.fontSize | Label text size. | number | | label.fontWeight | Label font weight. | string \| number | | label.formatter | Formats label text. | string \| function | | label.lineHeight | Label line height. | number | | label.minRadius | Minimum radius required before the label is shown. | number | | emphasis | Styles bubbles while hovered. | Object | | emphasis.itemStyle | Nested item style option. | object | | emphasis.itemStyle.color | Fill color. | string | | emphasis.itemStyle.fill | Alias for fill color. | string | | emphasis.itemStyle.opacity | Fill opacity. | number | | emphasis.itemStyle.borderColor | Border color. | string | | emphasis.itemStyle.borderWidth | Border width. | number | | emphasis.itemStyle.borderRadius | Corner radius. | number | | emphasis.itemStyle.shadowBlur | Shadow blur radius. | number | | emphasis.itemStyle.shadowColor | Shadow color. | string | | emphasis.itemStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.edgeStyle | Nested edgeStyle option. | object | | emphasis.edgeStyle.color | Fill color. | string | | emphasis.edgeStyle.fill | Alias for fill color. | string | | emphasis.edgeStyle.opacity | Fill opacity. | number | | emphasis.edgeStyle.borderColor | Border color. | string | | emphasis.edgeStyle.borderWidth | Border width. | number | | emphasis.edgeStyle.borderRadius | Corner radius. | number | | emphasis.edgeStyle.shadowBlur | Shadow blur radius. | number | | emphasis.edgeStyle.shadowColor | Shadow color. | string | | emphasis.edgeStyle.lineWidth | Stroke width used by icon or shape styles. | number | | emphasis.focus | Nested focus option. | string | | emphasis.blurScope | Nested blurScope option. | string |