Appearance
折线图快速开始
ts
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 }) // 渲染折线图
} // 布局结束
} // 构建结束
}