006_饼图
1. 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比, 每个的弧度表示数据数量的比例。它的数据格式比柱状图更简单, 只有一维的数值, 不需要给类目。因为不在直角坐标系上, 所以也不需要xAxis和yAxis。
2. 最简单的饼图
2.1. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>最简单的饼图</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的DOM --><div id="main" style="width: 600px; height:400px; border: 1px solid;"></div><script type="text/javascript">// 基于准备好的dom, 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// 为图表配置标题title: {text: '最简单的饼图'},// 配置提示信息tooltip: {},// 图例组件legend: {data: ['访问来源']},// 系列列表series: [{name: '访问来源', // 系列名称type: 'pie', // 系列图表类型radius: '55%', // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。data: [ // 系列中的数据内容{ value: 235, name: '视频广告' },{ value: 274, name: '联盟广告' },{ value: 310, name: '邮件营销' },{ value: 335, name: '直接访问' },{ value: 400, name: '搜索引擎' }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body> </html>2.2. 效果图
3. 南丁格尔图(玫瑰图)
3.1. 南丁格尔图又称玫瑰图, 通常用弧度相同但半径不同的扇形表示各个类目。ECharts可以通过将饼图的series.roseType值设为'area'实现南丁格尔图, 其他配置项和饼图是相同的。
3.2. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>南丁格尔图(玫瑰图)</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的DOM --><div id="main" style="width: 600px; height:400px; border: 1px solid;"></div><script type="text/javascript">// 基于准备好的dom, 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// 为图表配置标题title: {text: '南丁格尔图(玫瑰图)'},// 配置提示信息tooltip: {},// 图例组件legend: {data: ['访问来源']},// 系列列表series: [{name: '访问来源', // 系列名称type: 'pie', // 系列图表类型radius: '55%', // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。roseType: 'area', // 把饼图显示成南丁格尔图data: [ // 系列中的数据内容{ value: 235, name: '视频广告' },{ value: 274, name: '联盟广告' },{ value: 310, name: '邮件营销' },{ value: 335, name: '直接访问' },{ value: 400, name: '搜索引擎' }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body> </html>3.3. 效果图
4. 圆环图
4.1. 圆环图同样可以用来表示数据占总体的比例, 相比于饼图, 它中间空余的部分可以用来显示一些额外的文字等信息, 因而也是一种常用的图表类型。
4.2. 在ECharts中, 饼图的半径除了上一小节提到的, 可以是一个数值或者字符串之外, 还可以是一个包含两个元素的数组, 每个元素可以为数值或字符串。当它是一个数组时, 它的前一项表示内半径, 后一项表示外半径, 这样就形成了一个圆环图。
4.3. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>圆环图</title><!-- 引入echarts.js --><script type="text/javascript" src="echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的DOM --><div id="main" style="width: 600px; height:400px; border: 1px solid;"></div><script type="text/javascript">// 基于准备好的dom, 初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// 为图表配置标题title: {text: '圆环图'},// 配置提示信息tooltip: {},// 图例组件legend: {data: ['访问来源']},// 系列列表series: [{name: '访问来源', // 系列名称type: 'pie', // 系列图表类型radius: ['40%', '70%'], data: [ // 系列中的数据内容{ value: 235, name: '视频广告' },{ value: 274, name: '联盟广告' },{ value: 310, name: '邮件营销' },{ value: 335, name: '直接访问' },{ value: 400, name: '搜索引擎' }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body> </html>4.4. 效果图
总结
