SOURCE

const data1 = (() => {
  const P = 1000000; // 贷款本金
  const r = 4.2 / 100 / 12; // 月利率
  const n = 30 * 12; // 贷款期数
  const M = P * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1); // 每月还款金额

  let remainingP = P; // 剩余本金
  
  const data = [];
  
  for (let i = 1; i <= n; i++) {
    const interest = remainingP * r; // 第i月的还款利息
    const principal = M - interest; // 第i月的还款本金
    remainingP -= principal; // 更新剩余本金
  
    data.push({ month: i, principal, interest });
  }
  return data;
})()

const data2 = (() => {
  const P = 1000000; // 贷款本金
  const r = 4.2 / 100 / 12; // 月利率
  const n = 30 * 12; // 贷款期数
  
  let M = P * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1); // 每月还款金额
  
  let remainingP = P; // 剩余本金
  
  const data = [];
  
  for (let i = 1; i <= n; i++) {
    let interest = remainingP * r; // 第i月的还款利息
    let principal = M - interest; // 第i月的还款本金
    remainingP -= principal; // 更新剩余本金
  
    if (i === 24) {
      remainingP -= 100000; // 在第24个月提前还款10万
    }
  
    if (i >= 24) {
      // 从第25个月开始，重新计算每月还款金额
      M = remainingP * r * Math.pow(1 + r, n - i) / (Math.pow(1 + r, n - i) - 1);
      interest = remainingP * r;
      principal = M - interest;
    }
  
    data.push({ month: i, principal, interest });
  }
  
  return data.slice(0, -1)
})()

const data3 = (() => {
  const P = 1000000; // 贷款本金
  const r = 4.2 / 100 / 12; // 月利率
  const n = 30 * 12; // 贷款期数
  
  const M = P * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1); // 每月还款金额
  
  let remainingP = P; // 剩余本金
  
  const data = [];
  
  for (let i = 1; i <= n; i++) {
    const interest = remainingP * r; // 第i月的还款利息
    const principal = M - interest; // 第i月的还款本金
    remainingP -= principal; // 更新剩余本金
  
    if (i === 24) {
      remainingP -= 100000; // 在第24个月提前还款10万
    }
  
    if (remainingP <= 0) {
      break; // 如果剩余本金已经还清，就结束循环
    }
  
    data.push({ month: i, principal, interest });
  }
  return data;
})()


option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: data1.map(item => item.month)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: data1.map(item => item.principal),
      type: 'line',
      areaStyle: {}
    },
    {
      data: data1.map(item => item.interest),
      type: 'line',
      areaStyle: {}
    },
    // {
    //   data: data2.map(item => item.principal),
    //   type: 'line',
    //   areaStyle: {}
    // },
    // {
    //   data: data2.map(item => item.interest),
    //   type: 'line',
    //   areaStyle: {}
    // },
    {
      data: data3.map(item => item.principal),
      type: 'line',
      areaStyle: {}
    },
    {
      data: data3.map(item => item.interest),
      type: 'line',
      areaStyle: {}
    }
  ]
};

<div id="main"></div>

#main {
    width: 200px;
    height: 200px;
}