如何使用Custom Painter绘制半圆及参考图中的对应曲线效果

以下提供三种不同场景下的实现方式，均可实现和参考图一致的平滑曲线+渐变填充效果：

1. 前端网页端（ECharts实现，简单快捷） #

首先引入ECharts依赖后，直接使用如下配置即可：

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true, // 开启曲线平滑效果，设为false就是折线效果
      lineStyle: {
        width: 2,
        color: '#5470c6'
      },
      // 渐变填充核心配置
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
          { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
        ])
      }
    }
  ]
};
myChart.setOption(option);

2. 原生Canvas实现（自定义程度高，无需引入第三方依赖） #

核心逻辑是通过贝塞尔曲线实现平滑效果，再添加线性渐变填充：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 300;

// 自定义数据
const data = [820, 932, 901, 934, 1290, 1330, 1320];
const xStep = canvas.width / (data.length - 1);
const maxValue = Math.max(...data);
const yRatio = canvas.height / maxValue;

// 生成渐变填充色
const fillGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
fillGradient.addColorStop(0, 'rgba(84, 112, 198, 0.3)');
fillGradient.addColorStop(1, 'rgba(84, 112, 198, 0.05)');

// 绘制填充区域
ctx.beginPath();
ctx.moveTo(0, canvas.height - data[0] * yRatio);
for (let i = 1; i < data.length; i++) {
  const prevX = (i - 1) * xStep;
  const prevY = canvas.height - data[i - 1] * yRatio;
  const currX = i * xStep;
  const currY = canvas.height - data[i] * yRatio;
  const cpx = (prevX + currX) / 2;
  ctx.quadraticCurveTo(prevX, prevY, cpx, (prevY + currY) / 2);
}
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fillStyle = fillGradient;
ctx.fill();

// 绘制顶部线条
ctx.beginPath();
ctx.moveTo(0, canvas.height - data[0] * yRatio);
for (let i = 1; i < data.length; i++) {
  const prevX = (i - 1) * xStep;
  const prevY = canvas.height - data[i - 1] * yRatio;
  const currX = i * xStep;
  const currY = canvas.height - data[i] * yRatio;
  const cpx = (prevX + currX) / 2;
  ctx.quadraticCurveTo(prevX, prevY, cpx, (prevY + currY) / 2);
}
ctx.lineWidth = 2;
ctx.strokeStyle = '#5470c6';
ctx.stroke();

3. Python数据分析场景（Matplotlib实现） #

需要先安装numpy、scipy、matplotlib依赖：

import matplotlib.pyplot as plt
import numpy as np
from scipy.interpolate import make_interp_spline

# 模拟数据
x = np.arange(7)
y = np.array([820, 932, 901, 934, 1290, 1330, 1320])
# 生成平滑曲线的采样点
x_smooth = np.linspace(x.min(), x.max(), 300)
y_smooth = make_interp_spline(x, y)(x_smooth)

plt.figure(figsize=(8, 4))
# 绘制线条
plt.plot(x_smooth, y_smooth, color='#5470c6', linewidth=2)
# 填充下方区域
plt.fill_between(x_smooth, y_smooth, color='#5470c6', alpha=0.3)
# 可选：隐藏上、右边框
plt.gca().spines[['top', 'right']].set_visible(False)
plt.show()

内容的提问来源于stack exchange，提问作者Mariam Younes