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)
blank

相关推荐

  • 第七章 :Hadoop+Zookeeper 3节点高可用集群搭建和原理解释[通俗易懂]

    第七章 :Hadoop+Zookeeper 3节点高可用集群搭建和原理解释[通俗易懂]第七章 :Hadoop+Zookeeper 3节点高可用集群搭建和原理解释

  • 如何画好业务架构图图片_产品业务流程图怎么画

    如何画好业务架构图图片_产品业务流程图怎么画1:什么是业务架构图描述系统对用户提供了什么业务功能。业务架构图是一种表达业务层级和关系的工具。业务架构图可以降低业务系统的复杂度,提高客户理解度,最终给客户最直观的业务体现。2:怎么画出一个好的业务架构图呢?2.1:熟悉功能必须要对功能特别熟悉,明白自己的软件的业务都有哪些,哪些是核心业务,哪些是边缘业务以及他们之间的关系是什么。2.2:分层将业务进行分层,一般来说上层是具体业务,下层比较抽象。下层为上层进行提供服务。在业务架构图中,上下要进行对齐,体现出它们的支持关系。2.3分功能

    2022年10月11日
  • 物联网实践

    物联网实践

  • SpringBoot文件上传下载和多文件上传(图文详解)

    SpringBoot文件上传下载和多文件上传(图文详解)最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的java代码:1、开发环境:IDEA15+Maven+JDK1.82、新建一个maven工程:3、工程框架4、pom.xml文件依赖项

    2022年6月12日
  • BufferedWriter写int型数据

    BufferedWriter写int型数据在做项目的过程中遇到用BufferedWriter.writer(…)写文件的,但是在写入int型数据时是乱码。在翻阅了API后发现,BufferedWriter.writer(intc)方法写的不是一个int型数据,而是一个character型数据:因此,在用BufferedWriter.writer写数据的时候,如果要写int型数据,可以先把它转成String型的数据,这样就

  • webide配置_web vscode

    webide配置_web vscode背景为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的WebIDE产品,WebIDE能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。WebIDE入口地址:https://ide.fc.aliyun.com介绍WebIDE是一个基于H5支持多语言的集成开发环境。相当于VSCo…

    2022年10月18日

发表回复

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

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