WEB

echarts之用饼图制作带labelline的旭日图(一)

作者：Donkey

前言

如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考。并且配置项手册很详细，几乎囊括了所有的绘图需求。但是再全的配置，偶尔也会有不满足需求的时候。最近在开发过程中就遇到了一个比较头疼的问题。
先看下UI效果
带labelline的日辉图

思路

拿到需求，先看echarts的配置手册，很容易想到使用旭日图来做。
但是还没等大致效果出来，坑就来了，旭日图的配置项里面没有labelline，也就是没有指向色环的那根线。

额。。。咋整

先百度看看吧，找啊找，还是没有解决方案

没办法，迷茫了好一会，只能在配置手册里瞎看。。。突然，我看到了这张图

带labelline的日辉图

灵机一动，是不是可以用饼图来做旭日图呢，只需要把外面一圈不需要的数据设置成透明就行了？

码代码

服务端给的数据结构是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[{
    "value": 60,
    "name": "移动端",
    "children": [{
        "value": 40,
        "name": "苹果"
    }, {
        "value": 10,
        "name": "安卓"
    }, {
        "value": 10,
        "name": "塞班"
    }]
}, {
    "value": 40,
    "name": "PC"
}, {
    "value": 40,
    "name": "平板"
}]

我们需要两个data，data0 是内环的数据，这个直接就从数组的第一层获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data0 = [];
for (var i = 0; i < originaldata.length; i++) {
    var obj = originaldata[i];//从服务端给的数组中取出数据
    data0.push({
        value: obj.value,
        name: obj.name,
        itemStyle: {
            color: color0[i]
        },
        labelLine: {
            length: 40,
            length2: 10
        }
    });
}

接下来获取外环的数据 data1

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
var data1 = [];
for (var i = 0; i < originaldata.length; i++) {
    var obj = originaldata[i];
    var kids = obj.children;
    //没有子数据，直接加入data1
    if (typeof(kids) === 'undefined') {
        data1.push({
            value: obj.value,
            name: obj.name,
            //没有子数据，将其设置为透明
            itemStyle: {
                color: 'transparent'
            }
        });
    } else {
        for (var k = 0; k < kids.length; k++) {
            var kid = kids[k];
            data1.push({
                value: kid.value,
                name: kid.name,
                itemStyle: {
                    color: color1[k]
                },
                label: {
                    normal: {
                        position: 'outside',
                        formatter: '{b} {d}% ',
                        color: '#909090'
                    }
                }
            });
        }
    }
}

最后在option中设置data0 和 data1

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
option = {
    backgroundColor: '#161823',
    series: [{
            name: '访问来源',
            type: 'pie',//饼图
            animation: false,
            radius: ['47%', '74%'],//内环尺寸
            label: {
                normal: {
                    position: 'outside',
                    formatter: '{b} {d}% ',
                    color: '#fff'
                }
            },
            labelLine: {
                normal: {
                    show: true
                },
            },
            data: data0
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['74%', '84%'],//外环尺寸
            animation: false,
            data: data1
        }
    ],
};

预览地址

http://gallery.echartsjs.com/editor.html?c=xBJmySVERf&v=1