提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：备赛蓝桥杯之第十六届模拟赛第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 如下：
tooltipAPI：
参数 说明 formatter提示框浮层内容格式器，支持回调函数的形式。回调函数格式：(params) => {}，支持返回 HTML 字符串或者创建的 DOM 实例，第一个参数 params是formatter需要的数据集。
yAxis.axisLabelAPI：
参数 说明 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'}}]
};感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！
