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)


相关推荐

  • 免费mysql数据库空间_mysql数据库空间满了

    免费mysql数据库空间_mysql数据库空间满了申请地址:https://db4free.net/signup.php在这里注册完并且邮箱认证后即可使用。

  • 回文子串的个数_统计回文子串的个数

    回文子串的个数_统计回文子串的个数1、题目描述本题要求统计一个字符串中包含多少个回文子串。首先我们来确定子串的概念:一个字符串的子串,就是指它本身的各个部分。如字符串“aba”的子串有“a”、“b”

    2022年10月16日
  • 万字详解,Hadoop大数据技术简介及 伪分布式集群搭建快速入门教程

    万字详解,Hadoop大数据技术简介及 伪分布式集群搭建快速入门教程在大学时学习Hadoop大数据技术的时候,安装配置Hadoop框架,发现找的一些资料介绍得不够详细,比如一些路径的变化没有说清楚,这对于初学者来说是不够友好的,所以在这里做个详细总结介绍一下Hadoop框架,以及Ubuntu版本的Hadoop伪分布式的安装配置。

  • 软件测试(3) UFT12使用_GUITest

    软件测试(3) UFT12使用_GUITest环境:UFT12,Win10,VS2015&VS2017启动UFT12,为了启动方便修改快捷方式。设置插件,WPF相关的都设置起来。新建项目点击录制按钮(F6),设置启动程序。确定,开始录制。程序启动,显示登录界面。操作:切换IP,点击按钮,登录。点击工具栏按钮,停止录制。点击运行按钮(F5)。

  • NAT的双机热备方案

    一般的NAT组网中,内网用户通过单台设备进行NAT转换访问外网,NAT设备承担了所有内外网之间的流量,无法规避单点故障。一旦发生单点故障,将导致内网用户无法与外网通信。随着用户对网络可靠性的要求越来越高,发生单点故障导致网络间断是不可接受的。因此在重要节点处一般都部署两台或者多台设备,构成冗余备份组网,但如果设备之间不能实时的进行数据备份的话,链路切换时还是会导致用户的业务中断。双机热备方案可…

  • 最短路径之Dijkstra(迪杰斯特拉)算法(无向图)

    最短路径之Dijkstra(迪杰斯特拉)算法(无向图)简介Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径。主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止。由for循环可知,其时间复杂度是O(n^2)。原理在已知图的邻接矩阵net.vexs[i][j](无向网,含权值的图)的条件下,通过遍历已知图的所有路径,用dis[i]数组来记录到i点…

发表回复

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

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