环形图中心汇总数据以及浮窗

发表于 更新于 分类于

思路就是在环形图中间放置一个饼图

  • 三步:
    • 先把饼图中间开个洞，变成环形图
    • 再到往饼图中间放个饼图，背景透明
    • 设置label

推荐使用全局tooltip，这样series数据都能触发hover事件。

不能使用title和graphic来充当中心的label，只有数据项才会触发弹窗事件，action操作tooltip.showTip也无效。(曾在graphic的mouseover事件里尝试过)

可以直接把下面代码copy到官网代码视图部分运行
example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
            ]
        },
         {
            name: '搜索引擎',
            type: 'pie',
            radius: ['0%', '30%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
                show: true,
                position: 'center',
                verticalAlign: 'bottom',
                formatter: `{a}:{c}`,
                lineHeight: 30,
                color: '#30323b',
                fontSize: 14,
                fontWeight: 'lighter',
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
                color: 'rgba(255, 0, 0, 0)'
            }
        }
    ]
};