正弦折线示例

功能说明（What）

正弦折线用于展示周期性波动趋势，适合作为曲线形态示例或波动类数据展示。

应用场景（When）

• 周期性波动趋势
• 采样/传感器数据可视化

快速上手（How - Quick）

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

@Entry
struct Index {
  @Prop baseLineConfig: BaseLineConfig = {
    categories: ['0', '1', '2', '3', '4', '5'],
    series: [{ name: 'Sine', data: [0, 0.84, 0.91, 0.14, -0.76, -0.96] }],
    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: ['0', '1', '2', '3', '4', '5'], boundaryGap: false },
  yAxis: { type: 'value', includeZero: true },
  series: [
    { type: 'line', name: 'Sine', data: [0, 0.84, 0.91, 0.14, -0.76, -0.96], lineStyle: { color: '#5470C6', width: 2 } }
  ]
};

默认值（精确工程默认）

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

配置项说明（API）

参数	说明	类型	默认值
lineStyle	线条样式	LineStrokeStyle	-
showSymbol	是否显示点	boolean	true

事件与交互（Events）

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

高级用法（Advanced）

• 配合 smooth 展示更柔和的周期曲线

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

• 负值需要保证 yAxis.includeZero 为 true。