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