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

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

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除了可以使用默认的图表外，还可以自定义图表类型，使用中的问题可参考常见问题的解决。