前言
如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考。并且配置项手册很详细，几乎囊括了所有的绘图需求。但是再全的配置，偶尔也会有不满足需求的时候。最近在开发过程中就遇到了一个比较头疼的问题。
先看下UI效果
思路
拿到需求，先看echarts的配置手册，很容易想到使用旭日图来做。
但是还没等大致效果出来，坑就来了，旭日图的配置项里面没有labelline，也就是没有指向色环的那根线。
额。。。咋整
先百度看看吧，找啊找，还是没有解决方案
没办法，迷茫了好一会，只能在配置手册里瞎看。。。突然，我看到了这张图
![带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;
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
带labelline的日辉图