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

基础折线

功能说明（What）

基础折线用于展示最常见的趋势变化，对比直观，适合从 0 到 1 的趋势分析。

应用场景（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'], // X 轴类目
    series: [{ name: 'Trend', data: [120, 200, 150, 80] }], // 单系列折线
    grid: { top: 28, left: 12, right: 12, bottom: 24 }, // 画布边距
    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 }, showSymbol: true, symbol: 'circle', symbolSize: 6 }
  ]
};

默认值（精确工程默认）

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

配置项说明（API）

参数	说明	类型	默认值
smooth	是否平滑	boolean | number	false
step	阶梯折线	boolean | 'start' | 'middle' | 'end'	false
connectNulls	断点连接	boolean	false

事件与交互（Events）

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

高级用法（Advanced）

• 多系列对比与图例联动
• dataZoom 长序列联动

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

• 时间序列建议保持 boundaryGap: false，刻度更贴合点位。