炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 旭日图

ECharts 旭日图

概述

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

旭日图的创建

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

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title:{
text:'树懒课堂七月收入统计',
subtext:'纯属虚构',
},
series: {
type: 'sunburst',
data: [{
name: '广告收入',
value: 20,
children: [{
value: 11,
name: '文字广告'
}, {
value: 7,
name: '视频广告'
}]
}, {
name: '网课收入',
value:15,
children: [{
name: '在线直播',
value: 8
}, {
name: '离线课程',
value: 7
}]
}, {
name: '其他',
value: 3
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

效果图

旭日图的数据下钻

概述

  • 旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,进一步显示该数据的细节。
  • 在数据下钻后,图形的中间会出现一个用于返回上一层的图形,该图形的样式可以通过 levels[0] 配置。

实例

如下图所示,在上面的例子中,点击“网课收入”后,会进行对应的数据下钻

数据下钻前

点击“网课收入”数据下钻后

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

炫意HTML5 » ECharts – 旭日图

Java基础教程Android基础教程