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

折线图快速开始

import { BaseLine } from '@ymhc/harmonycharts'; // 引入折线图组件
import type { BaseLineConfig } from '@ymhc/harmonycharts'; // 引入配置类型

@Entry // 入口页面
struct Index { // 页面结构体
  @Prop baseLineConfig: BaseLineConfig = { // 组件配置（可响应）
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], // X 轴类目
    series: [
      { name: 'Trend', data: [150, 230, 224, 218, 135], lineStyle: { width: 2, color: '#5470C6' }, showSymbol: true, symbol: 'circle', symbolSize: 6 } // 单系列折线
    ],
    grid: { top: 28, left: 12, right: 12, bottom: 24 }, // 画布边距
    tooltip: { show: true, trigger: 'axis', triggerOn: 'mousemove', confine: true }, // 轴触发提示
    legend: { show: true } // 图例开关
  }; // 配置结束

  build() { // 页面构建
    Column() { // 纵向布局
      BaseLine({ config: this.baseLineConfig, chartHeight: 220 }) // 渲染折线图
    } // 布局结束
  } // 构建结束
}