大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
前言
如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考。并且配置项手册很详细，几乎囊括了所有的绘图需求。但是再全的配置，偶尔也会有不满足需求的时候。最近在开发过程中就遇到了一个比较头疼的问题。
先看下UI效果
dy20180512171652810.jpg
思路
拿到需求，先看echarts的配置手册，很容易想到使用旭日图来做。
但是还没等大致效果出来，坑就来了，旭日图的配置项里面没有labelline，也就是没有指向色环的那根线。
额。。。咋整
先百度看看吧，找啊找，还是没有解决方案
没办法，迷茫了好一会，只能在配置手册里瞎看。。。突然，我看到了这张图
dy20180512175000465.jpg
灵机一动，是不是可以用饼图来做旭日图呢，只需要把外面一圈不需要的数据设置成透明就行了？
码代码
服务端给的数据结构是这样的
[{
“value”: 60,
“name”: “移动端”,
“children”: [{
“value”: 40,
“name”: “苹果”
}, {
“value”: 10,
“name”: “安卓”
}, {
“value”: 10,
“name”: “塞班”
}]
}, {
“value”: 40,
“name”: “PC”
}, {
“value”: 40,
“name”: “平板”
}]
我们需要两个data，data0 是内环的数据，这个直接就从数组的第一层获取
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
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
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
}
],
};
预览地址
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189389.html原文链接：https://javaforall.net
