echarts 图表_ECHARTS

echarts 图表_ECHARTS旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。ECharts创建旭日图很简单,只需要在series配置项中声明类型为sunburst即可,data数据结构以树形结构声明,看下一个简单的实例:varoption={series:{type:’sunburst’,data:…

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

Jetbrains全系列IDE稳定放心使用

旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。

ECharts 创建旭日图很简单,只需要在 series 配置项中声明类型为 sunburst 即可,data 数据结构以树形结构声明,看下一个简单的实例:

var option ={

series: {

type:’sunburst’,

data: [{

name:’A’,

value:10,

children: [{

value:3,

name:’Aa’}, {

value:5,

name:’Ab’}]

}, {

name:’B’,

children: [{

name:’Ba’,

value:4}, {

name:’Bb’,

value:2}]

}, {

name:’C’,

value:3}]

}

};

一、颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色,其余层则与其父元素同色。

在旭日图中,扇形块的颜色有以下三种设置方式:在 series.data.itemStyle 中设置每个扇形块的样式。

在 series.levels.itemStyle 中设置每一层的样式。

在 series.itemStyle 中设置整个旭日图的样式。

上述三者的优先级是从高到低的,也就是说,配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置。

下面,我们将整体的颜色设为灰色 #aaa,将最内层的颜色设为蓝色 blue,将 Aa、B 这两块设为红色 red。

var option ={

series: {

type:’sunburst’,

data: [{

name:’A’,

value:10,

children: [{

value:3,

name:’Aa’,

itemStyle: {

color:’red’}

}, {

value:5,

name:’Ab’}]

}, {

name:’B’,

children: [{

name:’Ba’,

value:4}, {

name:’Bb’,

value:2}],

itemStyle: {

color:’red’}

}, {

name:’C’,

value:3}],

itemStyle: {

color:’#aaa’},

levels: [{//留给数据下钻的节点属性

}, {

itemStyle: {

color:’blue’}

}]

}

};

按层配置样式是一个很常用的功能,能够很大程度上提高配置的效率。

二、数据下钻

旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,进一步显示该数据的细节。

在数据下钻后,图形的中间会出现一个用于返回上一层的图形,该图形的样式可以通过 levels[0] 配置。

var data =[{

name:’Grandpa’,

children: [{

name:’Uncle Leo’,

value:15,

children: [{

name:’Cousin Jack’,

value:2}, {

name:’Cousin Mary’,

value:5,

children: [{

name:’Jackson’,

value:2}]

}, {

name:’Cousin Ben’,

value:4}]

}, {

name:’Father’,

value:10,

children: [{

name:’Me’,

value:5}, {

name:’Brother Peter’,

value:1}]

}]

}, {

name:’Nancy’,

children: [{

name:’Uncle Nike’,

children: [{

name:’Cousin Betty’,

value:1}, {

name:’Cousin Jenny’,

value:2}]

}]

}];

option={

series: {

type:’sunburst’,//highlightPolicy: ‘ancestor’,

data: data,

radius: [0, ‘90%’],

label: {

rotate:’radial’}

}

};

如果不需要数据下钻功能,可以通过将 nodeClick 设置为 false 来关闭,也可以设为 ‘link’,并将 data.link 设为点击扇形块对应打开的链接。

三、高亮相关扇形块

旭日图支持鼠标移动到某扇形块时,高亮相关数据块的操作,可以通过设置 highlightPolicy,包括以下几种高亮方式:’descendant'(默认值):高亮鼠标移动所在扇形块与其后代元素;

‘ancestor’:高亮鼠标所在扇形块与其祖先元素;

‘self’:仅高亮鼠标所在扇形块;

‘none’:不会淡化(downplay)其他元素。

上面提到的”高亮”,对于鼠标所在的扇形块,会使用 emphasis 样式;对于其他相关扇形块,则会使用 highlight 样式。通过这种方式,可以很方便地实现突出显示相关数据的需求。

具体来说,对于配置项:

itemStyle: {

color:’yellow’,

borderWidth:2,

emphasis: {

color:’red’},

highlight: {

color:’orange’},

downplay: {

color:’#ccc’}

}

highlightPolicy 为 ‘descendant’:

option ={

silent:true,

series: {

radius: [‘15%’, ‘95%’],

center: [‘50%’, ‘60%’],

type:’sunburst’,

sort:null,

highlightPolicy:’descendant’,

data: [{

value:10,

children: [{

name:’target’,

value:4,

children: [{

value:2,

children: [{

value:1}]

}, {

value:1}, {

value:0.5}]

}, {

value:2}]

}, {

value:4,

children: [{

children: [{

value:2}]

}]

}],

label: {

normal: {

rotate:’none’,

color:’#fff’}

},

levels: [],

itemStyle: {

color:’yellow’,

borderWidth:2},

emphasis: {

itemStyle: {

color:’red’}

},

highlight: {

itemStyle: {

color:’orange’}

},

downplay: {

itemStyle: {

color:’#ccc’}

}

}

};

setTimeout(function() {

myChart.dispatchAction({

type:’sunburstHighlight’,

targetNodeId:’target’});

});

highlightPolicy 为 ‘ancestor’ :

option ={

silent:true,

series: {

radius: [‘15%’, ‘95%’],

center: [‘50%’, ‘60%’],

type:’sunburst’,

sort:null,

highlightPolicy:’ancestor’,

data: [{

value:10,

children: [{

value:4,

children: [{

value:2,

children: [{

name:’target’,

value:1}]

}, {

value:1}, {

value:0.5}]

}, {

value:2}]

}, {

value:4,

children: [{

children: [{

value:2}]

}]

}],

label: {

normal: {

rotate:’none’,

color:’#fff’}

},

levels: [],

itemStyle: {

color:’yellow’,

borderWidth:2},

emphasis: {

itemStyle: {

color:’red’}

},

highlight: {

itemStyle: {

color:’orange’}

},

downplay: {

itemStyle: {

color:’#ccc’}

}

}

};

setTimeout(function() {

myChart.dispatchAction({

type:’sunburstHighlight’,

targetNodeId:’target’});

});

四、更多实例

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189269.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度学习 — BP算法详解(误差反向传播算法)「建议收藏」

    深度学习 — BP算法详解(误差反向传播算法)「建议收藏」本节开始深度学习的第一个算法BP算法,本打算第一个算法为单层感知器,但是感觉太简单了,不懂得找本书看看就会了,这里简要的介绍一下单层感知器:图中可以看到,单层感知器很简单,其实本质上他就是线性分类器,和机器学习中的多元线性回归的表达式差不多,因此它具有多元线性回归的优点和缺点。单层感知器只能对线性问题具有很好的解决能力,但是非线性问题就无法解决了,但是多层感知器却可以解决非线性问题,多层感…

  • oracle隐式转换_oracle查看游标数量

    oracle隐式转换_oracle查看游标数量原文地址:http://blog.itpub.net/29324876/viewspace-1096741/1     Oracle 隐式转换Oracle中对不同类型的处理具有显式类型转换(Explicit)和隐式类型转换(Implicit)两种方式,对于显式类型转换,我们是可控的,但是对于隐式类型转换,当然不建议使用,因为很难控制,有不少缺点,但是我们很难避免

    2022年10月11日
  • Java中有哪些集合,集合中有哪些类?

    Java中有哪些集合,集合中有哪些类?Java中所有的类都位于java.util包下,主要由两个接口派生出来,分别是Collection和Map.Collection包含了List和Set两大分支。Map是一个映射接口。Set、Map、List可以看做集合的三大类。而遍历集合的工具有Iterator和Enumeration;Arrays和Collection是操作数组集合的两个工具类。一、Java中的集合主要分为四类:1、L…

  • 证书认证过程_过程装备与控制工程可考证书

    证书认证过程_过程装备与控制工程可考证书现在很多的网站都会用​​https证书申请​​了,因为https证书好处现在越来越受到人们的认知,https安全证书的好处不仅仅对于客户的信息隐私数据有保护,对于维护网站的知名度以及安全可信度也是大有帮助。这也是很多人用申请https证书,但是他们首先遇到的难题就是申请https证书的过程是怎么样的?申请​​https证书​​的步骤是怎样的呢?1、要想完成https证书的申请,要先确定申请什么类型的https:大体来说有安全等级可以分为域名型证书,企业型证书以及增强型证书。根据自己网站.

  • Quartz中时间表达式的设置—–corn表达式

    Quartz中时间表达式的设置—–corn表达式

  • pyinstaller打包selenium+企业微信群发参数调配「建议收藏」

    pyinstaller打包selenium+企业微信群发参数调配「建议收藏」目录1.selenium的等待与打包常见错误2.调用print中的内容和比较数据3.企业微信群发与webhook参数配置4.总结1.selenium的等待与打包常见错误在爬一些接口加密的动态数据时,有时候的需求就是那么一两个时效性的数据,费劲心思解密整理显得有些笨拙,做无头浏览拿出数据在有些时候也是非常实用的手段,这里分享一些自己经历过的问题和大家分享。显性等待和隐形等待是最为常见的等待手段,隐性等待页面完全加载,显性检查元素加…

发表回复

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

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