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. 效果圖
總結
