提示：本篇文章僅僅是作者自己目前在備賽藍橋杯中，自己學習與刷題的學習筆記，寫的不好，歡迎大家批評與建議
由于個別題目代碼量與題目量偏大，請大家自己去藍橋杯官網【連接高校和企業 - 藍橋云課】去尋找原題，在這里只提供部分原題代碼
本題目為：備賽藍橋杯之第十六屆模擬賽第1期職業院校組第四題：世紀危機（人口增長推算）
題目：
經過運行環境運行之后的效果如下：
本題需要做的代碼如下：
/**人口數據增長推算函數* @param {number} initialPopulation 基礎人口數，假設有 10 億* @param {number} growthRate 年增長率，假設為 3%* @param {number} startYear 起始年份，假設為 200000*/
function calculatePopulation(initialPopulation, growthRate, startYear){const years = [];const population = [];// TODO：待補充代碼 目標 1 return {years,population};
}// 配置 ECharts 選項
const option = {title: {text: '未來30年人口增長趨勢圖',subtext: '假設年增長率為3%',left: 'center'},tooltip: {trigger: 'axis',// TODO：待補充代碼 目標 3 },xAxis: {type: 'category',// TODO：待修改代碼 目標 2 // 年份data: ['2024','2025','2026','2027','2028','2029','2030','2031','2032'],name: '年份',boundaryGap: false},yAxis: {type: 'value',name: '人口數',axisLabel: {// TODO：待補充代碼 目標 4}},series: [{name: '人口',type: 'line',// TODO：待修改代碼 目標 2 // 人口數量data: [1000000000,1030000000,1040000000,1050000000,1070000000,1090000000,1094000000,1098000000,1130000000],smooth: true,lineStyle: {color: '#3398DB'},itemStyle: {color: '#3398DB'}}]
};?本題目標如下：
請在?
js/index.js?文件中的 TODO 部分補充代碼實現需求，具體需求如下：
- 完善?
calculatePopulation?函數，實現從?200000?年開始的?30?年人口增長數據推算，并返回年份數組（years），如：[20000,200001,...]和人口數據（population）數組，如?[1030,1061,...]。該函數有三個參數，分別表示如下：
參數名 描述 數據類型 initialPopulation基礎人口數，假設有 10 億（即， 1000000000）number growthRate年增長率，假設為 3%（即， 0.03）number startYear起始年份，假設為? 200000number
- 把?
calculatePopulation?函數生成的年份數據和人口數據分別正確賦值給?echarts?中的 x 軸數據和 y 軸數據。- 自定義?
tooltip，每個?tooltip?顯示當前年份和人口總數，人口總數需要通過四舍五入處理成萬為單位（M）。自定義?tooltip?返回的 DOM 結構如下：<p>2024<br/>人口：1000M</p>
- 自定義 Y 軸屬性?
yAxis.axisLabel，該屬性顯示人口總數區間，人口總數需要通過四舍五入處理成萬為單位（M）。實現上述功能所需的 ECharts API 如下：
tooltip?API：
參數 說明 formatter提示框浮層內容格式器，支持回調函數的形式。回調函數格式：(params) => {}，支持返回 HTML 字符串或者創建的 DOM 實例，第一個參數? params?是?formatter?需要的數據集。
yAxis.axisLabel?API：
參數 說明 formatter用于格式化 Y 軸標簽，支持回調函數的形式。回調函數格式：(value, index) => {},? value?是?formatter?需要的數據。
說人話：
? ? ? ? 目標一，對數據進行計算
? ? ? ? 目標二，對數據進行渲染
? ? ? ? 目標三、四，讓數據以"????M"的形式展現
本題作者想說
答案：
/**人口數據增長推算函數* @param {number} initialPopulation 基礎人口數，假設有 10 億* @param {number} growthRate 年增長率，假設為 3%* @param {number} startYear 起始年份，假設為 200000*/
function calculatePopulation(initialPopulation, growthRate, startYear) {const years = [];const population = [];// TODO：待補充代碼 目標 1 years.push(startYear)population.push(initialPopulation)for (let index = 1; index <= 30; index++) {startYear = 200000 + indexyears.push(startYear)let pepTotNum = population[index - 1] + (population[index - 1] * growthRate)population.push(pepTotNum)}// for (let i = 0; i <= 30; i++) {// years.push(i + startYear)// population.push(initialPopulation * Math.pow((1 + growthRate), i))// }return {years,population};
}// 配置 ECharts 選項
const option = {title: {text: '未來30年人口增長趨勢圖',subtext: '假設年增長率為3%',left: 'center'},tooltip: {trigger: 'axis',// TODO：待補充代碼 目標 3 formatter: (params) => {// console.log(params)return `<p>${params[0].name}<br/>人口：${Math.round(params[0].value / 1000000)}M</p>`}},xAxis: {type: 'category',// TODO：待修改代碼 目標 2 // 年份data: pData.years,name: '年份',boundaryGap: false},yAxis: {type: 'value',name: '人口數',axisLabel: {// TODO：待補充代碼 目標 4formatter: (value, index) => {return `${Math.round(value / 1000000)}M`}}},series: [{name: '人口',type: 'line',// TODO：待修改代碼 目標 2 // 人口數量data: pData.population,smooth: true,lineStyle: {color: '#3398DB'},itemStyle: {color: '#3398DB'}}]
};作者自我解釋版：
/**人口數據增長推算函數* @param {number} initialPopulation 基礎人口數，假設有 10 億* @param {number} growthRate 年增長率，假設為 3%* @param {number} startYear 起始年份，假設為 200000*/
function calculatePopulation(initialPopulation, growthRate, startYear) {const years = [];const population = [];// TODO：待補充代碼 目標 1 // 判題中可能會涉及到沒有使用Math.pow而被判錯，但是不必擔心，考試時候不會有這種情況// 在此給出兩種做題方法// 第一種自己做的，能實現，容易理解，卻不能過// 第二種題解給出的，能實現，但不容易理解，卻能過// 自己做的，使用一個比較容易理解的方法解決出來的// 將初始年份push到數組里，形成第一個年份years.push(startYear)// 將初始人口基數push到數組里，形成第一個人口，以后會按照這個基數來計算population.push(initialPopulation)// 因為要進行每年的計算，所以我們這里使用for循環，并且設置少于30for (let index = 1; index <= 30; index++) {// 每增加一年startYear = 200000 + index// 就push過去一年years.push(startYear)// 每增加一年，就以上一年的人口為基數計算本人人數let pepTotNum = population[index - 1] + (population[index - 1] * growthRate)// 將本年人口push過來population.push(pepTotNum)}// 題解中給出的，因為使用了Math.pow，所以判題給過// for (let i = 0; i <= 30; i++) {// years.push(i + startYear)// population.push(initialPopulation * Math.pow((1 + growthRate), i))// }return {years,population};
}// 配置 ECharts 選項
const option = {title: {text: '未來30年人口增長趨勢圖',subtext: '假設年增長率為3%',left: 'center'},tooltip: {trigger: 'axis',// TODO：待補充代碼 目標 3 // 題目中給出tooltip的API：formatter，注意要以支持回調函數的形式formatter: (params) => {// 直接對數據進行html方面的更改，簡單省事return `<p>${params[0].name}<br/>人口：${Math.round(params[0].value / 1000000)}M</p>`}},xAxis: {type: 'category',// TODO：待修改代碼 目標 2 // 年份// 因為題目中定義了pData來獲取我們計算的目標，所以直接使用即可// 將其中的years賦值給x軸data: pData.years,name: '年份',boundaryGap: false},yAxis: {type: 'value',name: '人口數',axisLabel: {// TODO：待補充代碼 目標 4// 類似給出了yAxis.axisLabel的APIformatter: (value, index) => {// 類似直接對數據進行html方面的更改return `${Math.round(value / 1000000)}M`}}},series: [{name: '人口',type: 'line',// TODO：待修改代碼 目標 2 // 人口數量// 將其中的population賦值給y軸data: pData.population,smooth: true,lineStyle: {color: '#3398DB'},itemStyle: {color: '#3398DB'}}]
};感謝觀看此篇文章，謝謝大家的支持，本片文章只是我自己學習的歷程，有些寫的不好地方歡迎大家交流改動。
長路漫漫，我們還需努力！
