echarts饼图labelLine颜色_旭日图怎么做

echarts饼图labelLine颜色_旭日图怎么做前言如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考。并且配置项手册很详细,几乎囊括了所有的绘图需求。但是再全的配置,偶尔也会有不满足需求的时候。最近在开发过程中就遇到了一个比较头疼的问题。先看下UI效果dy20180512171652810.jpg思路拿到需求,先看echarts的配置手册,很容易想到使用旭日图来做。但是还没等大致…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言

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

先看下UI效果

echarts饼图labelLine颜色_旭日图怎么做

dy20180512171652810.jpg

思路

拿到需求,先看echarts的配置手册,很容易想到使用旭日图来做。

但是还没等大致效果出来,坑就来了,旭日图的配置项里面没有labelline,也就是没有指向色环的那根线。

额。。。咋整

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

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

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账号...

(0)


相关推荐

  • 好用又好玩的微信小程序大全「建议收藏」

    小马哥去合肥坐公交车,把小程序推广的更加的接地气和实用,微信的巨大用户量,让小程序有天然的流量入口,其次小程序不用下载安装耗费流量,占用手机的存储空间,启动速度比APP相当,下面是网友整理的目前好用的微信小程序大全,有的是软件开放的,有的可能是在好建小程序免费生成的,建议大家根据自己的喜好和需要收藏!【热门小程序】美团外卖滴滴公交查询车来了

  • Makefile教程(绝对经典,所有问题看这一篇足够了)「建议收藏」

    Makefile教程(绝对经典,所有问题看这一篇足够了)「建议收藏」该篇文章为转载,是对原作者系列文章的总汇加上标注。支持原创,请移步陈浩大神博客:http://blog.csdn.net/haoel/article/details/2886makefile很重要   什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makefil…

  • 【C语言天天练(二四)】内存分配

    【C语言天天练(二四)】内存分配

  • 窗口风格(Window style)

    窗口风格(Window style)窗口风格(Windowstyle)CWnd::ModifyStyle(dwStyledwRemove,dwStyledwAdd,intnFlag);CWnd::ModifyStyleEx(dwStyledwRemove,dwStyledwAdd,intnFlag);设置要添加和要去除的扩展风格参数:dwRemove指定了在修改风格时要清除的窗口风格。

  • 【CMake】cmake的install指令「建议收藏」

    【CMake】cmake的install指令「建议收藏」在cmake的时候,最常见的几个步骤就是:mkdirbuild&&cdbuildcmake..makemakeinstall那么,makeinstall的时候,是需要我们定义一个install的目标么?显然并不需要,作为一个经常需要被运行的指令,官方提供了一个命令install,只需要经过该命令的安装内容,不需要显示地定义install目标。此时,mak…

  • Java将Map数据转换为JSON对象数据

    Java将Map数据转换为JSON对象数据//pom.xml导入jar包<!–拼接json–><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</versi…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号