005_折线图
1. 折線圖主要用來展示數據項隨著時間推移的趨勢或變化。
2. 最簡單的折線圖
2.1. 我們通過xAxis將橫坐標設為類目型, 并指定了對應的值; 將yAxis的類型設定為數值型。在series中, 我們將系列類型設為line, 并且通過data指定了折線圖點的取值。這樣, 就能得到一個最簡單的折線圖了。
2.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']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']},// 配置要在Y軸顯示的項yAxis: {type: 'value' // 在實際的應用中, 如果是'value'類型, 也可以省略不寫。},// 系列列表series: [{name: '2020', // 系列名稱type: 'line', // 系列圖表類型data: [89.3, 92.1, 94.4, 85.4] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>2.3. 效果圖
3. 笛卡爾坐標系中的折線圖
3.1. 如果我們希望折線圖在橫坐標和縱坐標上都是連續的, 即在笛卡爾坐標系中, 應該如何實現呢?答案也很簡單, 只要把series的data每個數據用一個包含兩個元素的數組表示就行了。
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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '笛卡爾坐標系中的折線圖'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['月銷售量']},// 配置要在X軸顯示的項xAxis: {},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '月銷售量', // 系列名稱type: 'line', // 系列圖表類型data: [ // 系列中的數據內容[1, 100],[2, 300],[3, 90],[4, 110],[5, 120],[6, 100],]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>3.3. 效果圖
4. 笛卡爾坐標系中的折線圖
4.1. 在一個系列中, 可能一個橫坐標對應的取值是"空"的, 將其設為0有時并不能滿足我們的期望, 空數據不應被其左右的數據連接。
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;"></div><script type="text/javascript">// 基于準備好的dom, 初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {// 為圖表配置標題title: {text: '空數據'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['2020']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '2020', // 系列名稱type: 'line', // 系列圖表類型data: [89.3, '-', 94.4, 85.4] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>4.4. 效果圖
5. 堆疊折線圖
5.1. 與堆疊柱狀圖類似, 堆疊折線圖也是用系列的stack設置哪些系列堆疊在一起。
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: ['2020', '2021', '2022']},// 配置要在X軸顯示的項xAxis: {type: "category", // 類目data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '2020', // 系列名稱type: 'line', // 系列圖表類型data: [29.3, 32.1, 34.4, 25.4], // 系列中的數據內容stack: '銷量'},{name: '2021', // 系列名稱type: 'line', // 系列圖表類型data: [55.8, 49.4, 51.2, 36.9], // 系列中的數據內容stack: '銷量'},{name: '2022', // 系列名稱type: 'line', // 系列圖表類型data: [97.7, 83.1, 92.5, 78.1], // 系列中的數據內容stack: '銷量'}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>5.3. 效果圖
5.4. 但是不同的是, 如果不加說明的話, 我們很難判斷出這是一個堆疊折線圖, 還是一個普通的折線圖。所以, 對于堆疊折線圖而言, 一般建議使用區域填充色以表明堆疊的情況。
5.5. 代碼
<!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: 'line', // 系列圖表類型data: [29.3, 32.1, 34.4, 25.4], // 系列中的數據內容stack: '銷量',areaStyle: {}},{name: '2021', // 系列名稱type: 'line', // 系列圖表類型data: [55.8, 49.4, 51.2, 36.9], // 系列中的數據內容stack: '銷量',areaStyle: {}},{name: '2022', // 系列名稱type: 'line', // 系列圖表類型data: [97.7, 83.1, 92.5, 78.1], // 系列中的數據內容stack: '銷量',areaStyle: {}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>5.6. 效果圖
6. 平滑曲線圖
6.1. 平滑曲線圖也是折線圖的一種變形, 這種更柔和的樣式也是一種不錯的視覺選擇。使用時, 只需要將折線圖系列的smooth屬性設置為true即可。
6.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: 'line', // 系列圖表類型data: [29.3, 32.1, 34.4, 25.4], // 系列中的數據內容smooth: true},{name: '2021', // 系列名稱type: 'line', // 系列圖表類型data: [55.8, 49.4, 51.2, 36.9], // 系列中的數據內容smooth: true},{name: '2022', // 系列名稱type: 'line', // 系列圖表類型data: [97.7, 83.1, 92.5, 78.1], // 系列中的數據內容smooth: true}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>6.3. 效果圖
7. 階梯線圖
7.1. 階梯線圖又稱方波圖, 它使用水平和垂直的線來連接兩個數據點, 而普通折線圖則直接將兩個點連接起來。階梯線圖能夠很好地表達數據的突變。
7.2. 在ECharts中, 系列的step屬性用來表征階梯線圖的連接類型, 它共有三種取值: 'start'、'middle'和'end', 分別表示在當前點, 當前點與下個點的中間點, 下個點拐彎。
7.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: 'line', // 系列圖表類型step: 'start',data: [29.3, 32.1, 34.4, 25.4] // 系列中的數據內容},{name: '2021', // 系列名稱type: 'line', // 系列圖表類型step: 'middle',data: [55.8, 49.4, 51.2, 36.9] // 系列中的數據內容},{name: '2022', // 系列名稱type: 'line', // 系列圖表類型step: 'end',data: [97.7, 83.1, 92.5, 78.1] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>7.4. 效果圖
總結
