本问答帖原创发布在华为开发者联盟社区 ，欢迎开发者前往论坛提问交流。

更多与该问题相关的讨论，请点击原帖查看：

Polyline组件如何绘制渐变区域？-华为开发者问答 | 华为开发者联盟 (huawei.com)

问题描述：

如何使用Polyline组件、Polygon组件、Path组件，实现描绘折线后，折线以下区域呈现渐变效果？

解决方案：

【背景知识】

• mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图、股价走势图等场景中使用。方便开发者快速实现图表UI。mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
• setGradientFillColor用于设置折线图下方区域为渐变色。

【解决方案】
使用mpchart画出LineChart折线，再通过setGradientFillColor来设置填充颜色，参考示例：

import {
  JArrayList, // 工具类：数据集合
  Description, // 图表描述标签
  Legend, // 图表Legend(图例)部件
  EntryOhos,// 图表数据结构基础类
  LineDataSet, // 线形图数据集合
  ILineDataSet, // 线形图数据集合的操作类
  LineData, // 线形图数据包
  Mode, // 线形图形状
  LineChart, // 线形图图表类
  LineChartModel,// 线形图配置构建类
  ChartColorStop, // 颜色类
  MarkerView, // 图例形状
} from '@ohos/mpchart';

@Entry
@Component
struct TestPage {
  @State model: LineChartModel = new LineChartModel();
  @State dataSet: LineDataSet = new LineDataSet(null, 'DataSet');
  @State normalMarker: MarkerView = new MarkerView();

  aboutToAppear() {
    // 初始化图表配置构建类
    this.model = new LineChartModel();

    // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
    let description: Description | null = this.model.getDescription()
    if (description) {
      description.setEnabled(false);
    }
    let legend: Legend | null = this.model.getLegend();
    if (legend) {
      legend.setEnabled(false);
    }

    // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签
    this.model.setMaxVisibleValueCount(10);

    // 设置图表左Y轴信息
    let leftAxis = this.model.getAxisLeft();
    if (leftAxis) {
      leftAxis.setEnabled(false)
    }

    // 设置图表右Y轴信息
    let rightAxis = this.model.getAxisRight();
    if (rightAxis) {
      rightAxis.setEnabled(false);
    }

    // 设置X轴信息
    let xAxis = this.model.getXAxis();
    if (xAxis) {
      xAxis.setEnabled(false)
    }

    // 为图表设置markerView
    this.normalMarker = new MarkerView();
    this.model.setMarker(this.normalMarker);
    // 生成图表数据
    let lineData: LineData = this.getLineData();
    // 将数据与图表配置类绑定
    this.model.setData(lineData);
    // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据
    this.model.setVisibleXRangeMaximum(20);
  }

  build() {
    Column() {
      LineChart({ model: this.model })
        .width('100%')
        .height('100%')
    }
  }

  getLineData(): LineData {
    let start: number = 1;
    let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
    for (let i = start; i < 20; i++) {
      let val = Number(Math.random() * 150);

      if (Math.random() * 100 < 25) {
        values.add(new EntryOhos(i, val));
      } else {
        values.add(new EntryOhos(i, val));
      }
    }

    this.dataSet = new LineDataSet(values, 'DataSet');
    this.dataSet.setHighLightColor(Color.Black);
    this.dataSet.setLineWidth(1);
    this.dataSet.setDrawIcons(false);

    this.dataSet.setMode(Mode.LINEAR); // 直线模式
    this.dataSet.setDrawCircles(false); // 折线点画圆圈
    this.dataSet.setDrawCircleHole(false); // 设置内部孔
    this.dataSet.setColorByColor(Color.Blue); // 设置折线颜色

    // 渐变色填充
    let gradientFillColor = new JArrayList<ChartColorStop>();
    gradientFillColor.add(["#0C0099CC", 0.2]);
    gradientFillColor.add(["#7F0099CC", 0.4]);
    gradientFillColor.add(["#8b0099cc", 0.6]);
    gradientFillColor.add(["#ad0099cc", 0.8]);
    gradientFillColor.add(["#0099CC", 1.0]);
    this.dataSet.setGradientFillColor(gradientFillColor);
    // 保证渐变色设置生效
    this.dataSet.setDrawFilled(true);

    // 设置数据点的颜色
    this.dataSet.setCircleColor(Color.Blue);

    // 关闭线形图的选中横竖线
    this.dataSet.setDrawHighlightIndicators(false)

    let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
    dataSetList.add(this.dataSet);
    let lineData: LineData = new LineData(dataSetList);
    return lineData
  }
}

【总结】
mpchart除了可以使用默认的图表外，还可以自定义图表类型，使用中的问题可参考常见问题的解决。