大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...