004_柱状图
1. 柱狀圖(或稱條形圖)是一種通過柱形的長度來表現數據大小的一種常用圖表類型。
2. 設置柱狀圖的方式, 是將series的type設為'bar'。
3. 最簡單的柱狀圖
3.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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '最簡單的柱狀圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>3.2. 效果圖
3.3. 在這個例子中, 橫坐標是類目型的(type: "category"), 因此需要在xAxis中指定對應的值; 而縱坐標是數值型的, 可以根據series中的data, 自動生成對應的坐標范圍。
4. 多系列的柱狀圖
4.1. 我們可以用一個系列表示一組相關的數據, 如果需要實現多系列的柱狀圖, 只需要在series多添加一項就可以了。
4.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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '多系列的柱狀圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['2020', '2021', '2022']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '2020', // 系列名稱type: 'bar', // 系列圖表類型data: [89.3, 92.1, 94.4, 85.4] // 系列中的數據內容},{name: '2021', // 系列名稱type: 'bar', // 系列圖表類型data: [95.8, 89.4, 91.2, 76.9] // 系列中的數據內容},{name: '2022', // 系列名稱type: 'bar', // 系列圖表類型data: [97.7, 83.1, 92.5, 78.1] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>4.3. 效果圖
5. 為柱條添加背景色
5.1. 有時, 我們希望能夠為柱條添加背景色。從ECharts 4.7.0版本開始, 這一功能可以簡單地用showBackground開啟, 并且可以通過backgroundStyle配置。
5.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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '為柱條添加背景色'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷量']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型showBackground: true,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'},data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>5.3. 效果圖
6. 堆疊柱狀圖
6.1. 有時候, 我們不僅希望知道不同系列各自的數值, 還希望知道它們之和的變化, 這時候通常使用堆積柱狀圖圖來表現。顧名思義, 堆積柱狀圖就是一個系列的數值"堆積"在另一個系列上, 因而從他們的高度總和就能表達總量的變化。
6.2. 使用EChart實現堆積折線圖的方法非常簡單, 只需要給一個系列的stack值設置一個字符串類型的值, 這一個值表示該系列堆積的類別。也就是說, 擁有同樣stack值的系列將堆積在一組。
6.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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '堆疊柱狀圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['2020', '2021', '2022']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '2020', // 系列名稱type: 'bar', // 系列圖表類型data: [89.3, 92.1, 94.4, 85.4], // 系列中的數據內容stack: '銷量'},{name: '2021', // 系列名稱type: 'bar', // 系列圖表類型data: [95.8, 89.4, 91.2, 76.9], // 系列中的數據內容stack: '銷量'},{name: '2022', // 系列名稱type: 'bar', // 系列圖表類型data: [97.7, 83.1, 92.5, 78.1], // 系列中的數據內容stack: '銷量'}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>6.4. 效果圖
6.5. 在這個例子中, 第二個系列所在的位置是在第一個系列的位置的基礎上, 上升了第二個系列數值對應的高度。因此, 從第二個系列的位置, 就能看出這兩者總和的變化趨勢。
6.6. stack的取值用來表明哪些系列將被堆積在一起, 理論上只要取值相同即可, 具體的取值并沒有什么區別。但在實際的應用中, 我們建議使用一些有意義的字符串方便閱讀。比如, 在一個統計男女人數的圖中, 有四個系列, "成年男性"和"男孩"系列需要進行堆積, "成年女性"和"女孩"系列需要堆積。這時, 這兩組的的stack值就建議分別設為'男'和'女'。雖然使用'a'和'b'這樣沒有意義的字符串也能實現同樣的效果, 但是代碼的可閱讀性就差了。
總結
