@echarts-extension/venn

Language: English | 中文

ECharts extension chart for hollow and bubble Venn diagrams. Import this package for side effects to register series.type = 'venn'.

| Hollow Venn | Bubble Venn | | --- | --- | | | |

Install

npm install echarts @echarts-extension/venn

Hollow Venn

import * as echarts from 'echarts';
import '@echarts-extension/venn';

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

chart.setOption({
  series: [
    {
      type: 'venn',
      layout: 'hollow',
      data: [
        { name: 'A', sets: ['A'], value: 100 },
        { name: 'B', sets: ['B'], value: 96 },
        { name: 'C', sets: ['C'], value: 82 },
        { name: 'A&B', sets: ['A', 'B'], value: 34 },
        { name: 'A&C', sets: ['A', 'C'], value: 24 },
        { name: 'B&C', sets: ['B', 'C'], value: 20 },
        { name: 'A&B&C', sets: ['A', 'B', 'C'], value: 12 }
      ],
      hollowStyle: { borderWidth: 6 },
      label: { show: true }
    }
  ]
});

Bubble Venn

chart.setOption({
  series: [
    {
      type: 'venn',
      layout: 'bubble',
      data: [
        { name: 'Radiohead', value: 100 },
        { name: 'Kanye West', value: 64 },
        { name: 'The Beatles', value: 58 },
        { name: 'Pink Floyd', value: 44 }
      ],
      itemStyle: { opacity: 0.6 },
      label: { show: true }
    }
  ]
});

Data

• Hollow mode uses set rows with sets, such as ['A'], ['A', 'B'], or ['A', 'B', 'C'].
• Bubble mode uses flat rows with name and value.
• value controls relative set or bubble size.

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. | 'venn' | | 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 | Venn sets and intersections. Each item uses name, value, and optional sets. | Array<object> | | data.name | Display name. | string \| number | | data.value | Numeric value. | number | | data.sets | Optional set names used by this item. | string[] | | layout | Selects the Venn layout mode, or passes a layout object with type. | 'hollow' \| 'bubble' \| { type: 'hollow' \| 'bubble' } | | layoutOptions | Nested layout sizing options. | Object | | layoutOptions.padding | Inset around the Venn layout. | number | | layoutOptions.minRadius | Smallest circle radius. | number | | layoutOptions.maxRadius | Largest circle radius. | number | | vennType | Alias for selecting the Venn layout mode. | 'hollow' \| 'bubble' | | mode | Alias for selecting the Venn layout mode. | 'hollow' \| 'bubble' | | padding | Inset around the Venn layout. | number | | minRadius | Smallest circle radius. | number | | maxRadius | Largest circle radius. | number | | itemStyle | Styles Venn circles. | 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 | | hollowStyle | Styles the hollow overlay in hollow mode. | Object | | hollowStyle.color | Primary color. | string | | hollowStyle.opacity | Opacity. | number | | hollowStyle.borderWidth | Border width. | number | | label | Styles set and intersection 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 | | emphasis | Styles circles 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 |