使用 antv/g2 绘制‘旭日图’

1607 字

8 分钟

使用 antv/g2 绘制‘旭日图’

2024-04-15

前端

数据可视化

/

Antv-G2

为什么标题中的旭日图打双引号呢，是因为虽然它的样式长得像是旭日图，但是数据结构却和旭日图所需要的相差远。

在官方示例中，旭日图的数据结构是父节点不设置值的大小，而是由它的所有子节点累加确认的。因此，旭日图是**父节点一定对应一个或者多个子节点，且这些子节点不能超过内圈父节点的范围。**而现在产品想要的效果是父节点和子节点没有关联，只是父节点的值需要等于子节点的累加值（这里的父节点由两部分组成），这样的话子节点一定会跨过这两个父节点的临界，产品原型如下

Untitled

径向堆叠条形图#

因此，旭日图并不满足这个需求，我和产品反映了这个问题，他说让我使用径向堆叠条形图试试，在我一番调试下，发现这个虽然在外观上能实现这样的图形，但是在其他的很多方面都是不符合需求的。

使用径向堆叠图实现的效果

由于径向堆叠图的数据结构通常是同一组类型在不同状态（时期）下的数据，而这个需求的数据结构是不同类型在在不同状态（时期）的数据，所以导致它有诸多问题

主要就是 tooltip 展示问题

内层展示还算是正常

Untitled

外层展示就完全不对应了

Untitled

我猜测这是由于径向堆叠图的数据结构设计是想要展示内外侧是相同的，但是这里我给出的数据确实不同的，而它展示的逻辑可能是，由 chart.data.transform 的 fields 数组中定义所有字段依次展示。

这是会导致 tooltip 不对应的问题。

1
const data = [
2
  {
3
    State: '',
4
    天猫: 25,
5
    天猫_购买: 15,
6
    京东: 20,
7
    京东_购买: 10,
8
    抖音: 10,
9
    抖音_购买: 5,
10
    微信: 10,
11
    微信_购买: 5,
12
  },
13
  {
14
    State: ' ',
15
    百利: 5,
16
    百利_购买: 5,
17
    尊尼获加: 5,
18
    尊尼获加_购买: 5,
19
    帝亚吉欧: 10,
20
    帝亚吉欧_购买: 10,
21
  },
22
];
23

24
// chart.data 如下
25
{
26
  value: data,
27
  transform: [
28
    {
29
      type: 'fold',
30
      fields: ['天猫', '天猫_购买', '京东', '京东_购买', '抖音', '抖音_购买', '微信', '微信_购买', '百利', '百利_购买', '尊尼获加', '尊尼获加_购买', '帝亚吉欧', '帝亚吉欧_购买'],
31
      key: 'key',
32
      value: '会员总数',
33
      retains: ['State'],
34
    },
35
  ],
36
}

最终解决方案#

最后我想到 echart 中之前画过嵌套饼图，但是在 antv/g2（v5）版本的图标示例中并没有嵌套饼图的例子，查看文档发现，实现双视图需要使用到复合实现，我们这里的需求是视图的层叠，因此使用的是空间复合。

按照官方示例很容易就绘制出了嵌套饼图，但是这里会出现图形大小层叠的问题，导致外层图形的 tooltip 无法正常使用。这是因为每个圆环实际上是在一个正方形的区域内绘制的，这个区域的大小是由圆环的直径决定的。如果你创建了两个嵌套的圆环，后一个圆环可能会在事件处理上覆盖前一个圆环，导致前一个圆环的tooltip失效。具体表现图如下

Untitled

而我在文档中并没有发现能够改变这一规则的属性，因此我想如果改变内圈直径，使其大小不遮挡外层圆环，这样的话就不会影响外层 tooltip 触发。最后我使用 attr 修改圆环的宽高，然后再使用coordinate.outerRadius 和 coordinate.innerRadius 修改圆环视觉上的大小，最终实现代码如下

1
const data1 = [
2
  { item: '天猫', bgColor: '#e8b038', count: 20, percent: 0.2 },
3
  { item: '天猫-purchase', bgColor: '#e8b038', type: 'purchase', count: 10, percent: 0.1 },
4
  { item: '京东', bgColor: '#528df3', count: 10, percent: 0.1 },
5
  { item: '京东-purchase', bgColor: '#528df3', type: 'purchase', count: 10, percent: 0.1 },
6
  { item: '抖音', bgColor: '#ff3d72', count: 20, percent: 0.2 },
7
  { item: '抖音-purchase', bgColor: '#ff3d72', type: 'purchase', count: 10, percent: 0.1 },
8
  { item: '微信', bgColor: '#00a54e', count: 15, percent: 0.15 },
9
  { item: '微信-purchase', bgColor: '#00a54e', type: 'purchase', count: 5, percent: 0.05 },
10
];
11

12
const data2 = [
13
  { item: '帝亚吉欧', bgColor: '#9ecbfb', count: 10, percent: 0.1 },
14
  { item: '帝亚吉欧-purchase', type: 'purchase', bgColor: '#9ecbfb', count: 5, percent: 0.05 },
15
  { item: '尊尼获加', bgColor: '#add7fc', count: 7, percent: 0.07 },
16
  { item: '尊尼获加-purchase', type: 'purchase', bgColor: '#add7fc', count: 3, percent: 0.03 },
17
  { item: '百利', bgColor: '#bfe2fd', count: 3, percent: 0.03 },
18
  { item: '百利-purchase', type: 'purchase', bgColor: '#bfe2fd', count: 2, percent: 0.02 },
19
  { item: 'not-show', bgColor: 'transparent', count: 70, percent: 0.7 },
20
];
21

22
// 创建图表实例
23
const chart = new Chart({
24
  container: 'channel-members',
25
  height: 311,
26
});
27
const layer = chart.spaceLayer();
28

29
layer
30
  .interval()
31
  .data(data2)
32
  .coordinate({ type: 'theta', outerRadius: 1.1, innerRadius: 0.82 })
33
  .transform({ type: 'stackY' })
34
  .attr('x', 640 / 2 - 150)
35
  .attr('y', 311 / 2 - 150)
36
  .attr('width', 300)
37
  .attr('height', 300)
38
  .encode('y', 'percent')
39
  .style('fill', (d: any) => {
40
    const result = {
41
      image: lines({
42
        backgroundColor: d.bgColor,
43
        backgroundOpacity: 0.6,
44
        stroke: d.bgColor,
45
        lineWidth: 1,
46
        spacing: 0,
47
      }),
48
      repetition: 'repeat',
49
      transform: 'rotate(30deg)',
50
    }
51
    if (d.type === 'purchase') {
52
      result.image = lines({
53
        backgroundColor: 'transparent',
54
        backgroundOpacity: 0.6,
55
        stroke: d.bgColor,
56
        lineWidth: 1,
57
        spacing: 10,
58
      });
59
    }
60
    return result;
61
  })
62
  .interaction('tooltip', { disableNative: true })
63
  .tooltip((data) => {
64
    if (data.item === '') {
65
      return '';
66
    }
67
    return {
68
      name: data.item,
69
      value: `${data.percent * 100}%`,
70
    }
71
  });
72

73
layer
74
  .interval()
75
  .data(data1)
76
  .coordinate({ type: 'theta', outerRadius: 3.2, innerRadius: 1.6 })
77
  .transform({ type: 'stackY' })
78
  .attr('x', 640 / 2 - 50)
79
  .attr('y', 311 / 2 - 50)
80
  .attr('width', 100)
81
  .attr('height', 100)
82
  .encode('y', 'percent')
83
  .style('fill', (d: any) => {
84
    const result = {
85
      image: lines({
86
        backgroundColor: d.bgColor,
87
        backgroundOpacity: 0.6,
88
        stroke: d.bgColor,
89
        lineWidth: 1,
90
        spacing: 0,
91
      }),
92
      repetition: 'repeat',
93
      transform: 'rotate(30deg)',
94
    }
95
    if (d.type === 'purchase') {
96
      result.image = lines({
97
        backgroundColor: 'transparent',
98
        backgroundOpacity: 0.6,
99
        stroke: d.bgColor,
100
        lineWidth: 1,
101
        spacing: 10,
102
      });
103
    }
104
    return result;
105
  })
106
  .tooltip((data) => ({
107
    name: data.item,
108
    value: `${data.percent * 100}%`,
109
  }));
110

111
chart.on(`element:${ChartEvent.POINTER_OVER}`, ({ data }) => {
112
  if (data.data.item === 'not-show') {
113
    return;
114
  }
115
  chart.emit('tooltip:show', { data })
116
});
117
chart.on(`element:${ChartEvent.POINTER_MOVE}`, ({ data }) => {
118
  if (data.data.item === 'not-show') {
119
    return;
120
  }
121
  chart.emit('tooltip:show', { data })
122
});
123
chart.on(`plot:${ChartEvent.POINTER_OVER}`, () => chart.emit('tooltip:hide'));
124

125
chart.render();

由于只有天猫拥有子店铺，所以外层圆环是不完整的，这里使用 data.item === ‘not-show’ 控制是否显示，实现是通过style.fill 填充透明色。如果不设置这一项的话，剩下的项会填充整个圆环，不符合需求。这样设置后将鼠标放置到外层空白区域仍然会触发 tooltip，这里我的解决方案是使用自定义交互事件，判断是否 data.item === ‘not-show’ 为 true，如果不是则触发 tooltip 。

最终实现效果如下

Untitled