大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
}
],
};
预览地址
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189389.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...