---
title: "空心韦恩图"
language: "zh"
canonical: "https://g2.antv.antgroup.com/zh/examples/general/venn/venn-hollow/"
version: "5.4.8"
---

# 空心韦恩图

[运行示例](https://g2.antv.antgroup.com/zh/examples/general/venn/venn-hollow/)

[资料索引](/llms.txt)

页面需要一个 `id="container"` 的 DOM 元素。以下为原始示例源码。

## 源码

```ts
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'path',
  data: {
    type: 'inline',
    value: [
      { sets: ['A'], size: 15, label: 'A' },
      { sets: ['B'], size: 12, label: 'B' },
      { sets: ['C'], size: 10, label: 'C' },
      { sets: ['A', 'B'], size: 2, label: 'A&B' },
      { sets: ['A', 'C'], size: 2, label: 'A&C' },
      { sets: ['B', 'C'], size: 1, label: 'B&C' },
      { sets: ['A', 'B', 'C'], size: 1 },
    ],
    transform: [
      {
        type: 'venn',
      },
    ],
  },
  encode: { d: 'path', color: 'key', shape: 'hollow' },
  labels: [
    {
      position: 'inside',
      text: (d) => d.label || '',
      fill: '#000',
    },
  ],
  style: { opacity: 0.6, lineWidth: 8 },
  tooltip: false,
});

chart.render();
```