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

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

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

▶更多实践干货就在华为开发者联盟

▶扫码加入鸿蒙主题交流群，共同交流鸿蒙应用创新与开发