ECharts 旭日图
ECharts旭日图
ECharts是一款基于JavaScript的开源可视化图表库,它提供了多种图表类型,包括旭日图。旭日图是一种基于圆环的多层级分区图,可以用于显示层次结构的数据。本文将详细介绍ECharts旭日图的使用方法和参数配置。
安装和引入
可以通过npm安装ECharts:
$ npm install echarts --save
也可以在HTML文档中引入ECharts的CDN库:
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
数据格式
ECharts旭日图的数据格式分为两种:
- 层级数据(Hierarchy data):每个项目(Project)都有一个名称,以及一个包含它所有子项目的列表;
- 扁平化数据(Flat data):每个项目都有一个名称和一个权重值(Value),以及一个用于标识它所属的父项目的ID。
基本配置
ECharts旭日图的基本配置如下:
var chart = echarts.init(document.getElementById('chart'));
var options = {
series: {
type: 'sunburst',
data: [
{
name: 'A',
children: [
{
name: 'A1',
value: 10
},
{
name: 'A2',
value: 20
}
]
},
{
name: 'B',
children: [
{
name: 'B1',
value: 30
},
{
name: 'B2',
value: 15
}
]
}
]
}
};
chart.setOption(options);
在上述代码中,我们使用了echarts.init()
方法来初始化图表,并指定了要使用的 DOM 实例。接着定义了一个包含series
属性的options
对象,指定了要显示的数据。定义的数据分为两个项目(A
和B
),每个项目都有两个子项目(A1
、A2
和B1
、B2
),并且每个子项目都有一个权重值(value
)。最后,使用 chart.setOption()
方法将配置应用到图表上。
参数配置
ECharts旭日图提供了多种可配置的参数,用于自定义图表的样式和功能。下面是一些常见的参数说明:
series.radius
设置图表的半径。可以是绝对的像素值,也可以是相对于容器宽度的百分比。
series: {
radius: '50%'
}
series.label.show
设置子项目的名称是否显示。
series: {
label: {
show: false
}
}
series.label.position
设置子项目的名称显示位置。可选值包括inside
、outside
、inner
和center
。
series: {
label: {
position: 'inside'
}
}
series.label.color
设置子项目的名称显示颜色。
series: {
label: {
color: 'white'
}
}
series.label.fontSize
设置子项目的名称字体大小。
series: {
label: {
fontSize: 14
}
}
series.label.rotate
设置子项目的名称旋转角度。
series: {
label: {
rotate: 'radial'
}
}
series.itemStyle
设置每个子项目的样式,包括颜色、边框等。
series: {
itemStyle: {
color: 'skyblue',
borderColor: 'white',
borderWidth: 2
}
}
series.highlightPolicy
设置旭日图的高亮策略。可选值包括descendant
和ancestor
。当为descendant
时,当鼠标悬浮在子项目上时,它的所有后代项目都会被高亮显示;当为ancestor
时,当鼠标悬浮在子项目上时,它的所有祖先项目都会被高亮显示。
series: {
highlightPolicy: 'descendant'
}
series.tooltip
设置鼠标悬浮在子项目上时显示的提示框样式和内容。
series: {
tooltip: {
formatter: '{b} : {c}'
}
}
结论
ECharts旭日图是一种非常适合表现层次结构数据的可视化图表类型,它基于圆环进行分区,可以清晰地显示每个项目的权重,并且可以通过鼠标指针高亮显示与该项目相关的项目。通过本文的学习,你已经可以使用ECharts创建一个旭日图,并且了解了旭日图的常用配置参数。