你正在查看 v1.0.1 文档。切换到最新版请访问：/

面积折线

功能说明（What）

面积折线用于突出趋势下的“量感”，常用于展示累计或整体变化幅度。

应用场景（When）

• 指标趋势与体量展示
• 需要强调区间范围

快速上手（How - Quick）

import { BaseLine } from '@ymhc/harmonycharts';
import type { BaseLineConfig } from '@ymhc/harmonycharts';

@Entry
struct Index {
  @Prop baseLineConfig: BaseLineConfig = {
    categories: ['Mon', 'Tue', 'Wed', 'Thu'],
    series: [{
      name: 'Trend',
      data: [120, 200, 150, 80],
      areaStyle: { color: 'rgba(84,112,198,0.25)' }
    }],
    tooltip: { show: true, trigger: 'axis', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BaseLine({ config: this.baseLineConfig, chartHeight: 220 })
    }
  }
}

运行结果

完整示例配置（整页可用）

const option: HarmonyChartsOption = {
  grid: { top: 28, left: 12, right: 12, bottom: 24 },
  tooltip: { show: true, trigger: 'axis', triggerOn: 'mousemove', confine: true },
  legend: { show: true },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu'], boundaryGap: false },
  yAxis: { type: 'value', includeZero: true },
  series: [
    { type: 'line', name: 'Trend', data: [120, 200, 150, 80], lineStyle: { color: '#5470C6', width: 2 }, areaStyle: { color: 'rgba(84,112,198,0.25)' } }
  ]
};

默认值（精确工程默认）

该页面默认值与 BaseLine 一致，详见总览页「默认值（精确工程默认）」。

配置项说明（API）

参数	说明	类型	默认值
areaStyle	面积样式	AreaStyle	-
lineStyle	线条样式	LineStrokeStyle	-

事件与交互（Events）

chart.on('click', (params) => {
  // params.seriesType === 'line'
});

高级用法（Advanced）

• 多系列面积叠加（注意颜色与透明度）

注意事项 / 设计说明（Notes）

• 建议设置透明度避免遮挡点位。