Appearance
折线图总览（HarmonyOS / ArkTS）
摘要：HarmonyCharts 折线图面向趋势分析与多指标对比，支持平滑/面积/阶梯等变种，并可与 Tooltip、Legend、dataZoom 协同使用。
建议阅读顺序：
- 快速开始（完整可运行页面）
- 完整示例配置（直接作为模板）
- 默认值（精确工程默认）
- API Reference（完整参数表）
功能说明（What）
折线图用于展示数据随时间或类别变化的趋势，支持多系列、平滑曲线、面积填充与交互高亮。
应用场景（When）
适用：
- 时间序列趋势分析
- 指标变化对比
- 连续数据的整体走势展示
不适合：
- 离散无顺序数据
- 仅强调比例结构（更适合饼图）
快速开始（入口）
完整示例配置（整页可用）
ts
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', 'Fri'], boundaryGap: false },
yAxis: { type: 'value', includeZero: true },
series: [
{ type: 'line', name: 'Trend', data: [150, 230, 224, 218, 135], lineStyle: { color: '#5470C6', width: 2 }, showSymbol: true, symbol: 'circle', symbolSize: 6 }
]
};示例图
默认值（精确工程默认）
默认值来自 BaseLine 组件。
BaseLine 默认 option
| 项 | 默认值 |
|---|---|
| categories | ['Mon','Tue','Wed','Thu','Fri'] |
| grid | { top: 28, left: 12, right: 12, bottom: 24 } |
| tooltip | { show: true, trigger: 'axis', triggerOn: 'mousemove', confine: true } |
| legend | { show: true } |
| xAxis.boundaryGap | false |
| xAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#909399' } } |
| xAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#C0C4CC' } } |
| xAxis.splitLine | { show: true, lineStyle: { color: '#EBEEF5', dash: [4,4], width: 1 } } |
| xAxis.axisLabel | { show: true, color: '#606266', fontSize: 12, margin: 8 } |
| yAxis.includeZero | true |
| yAxis.axisLine | { show: true, lineStyle: { width: 1, color: '#909399' } } |
| yAxis.axisTick | { show: true, length: 6, lineStyle: { width: 1, color: '#C0C4CC' } } |
| yAxis.splitLine | { show: true, lineStyle: { color: '#EBEEF5', dash: [4,4], width: 1 } } |
| yAxis.axisLabel | { show: true, color: '#606266', fontSize: 12, margin: 8 } |
BaseLine 默认 series（未传 series 时）
| 项 | 默认值 |
|---|---|
| type | 'line' |
| name | 'Series A' |
| data | [150, 230, 224, 218, 135] |
| lineStyle | { color: '#5470C6', width: 2 } |
| showSymbol | true |
| symbol | 'circle' |
| symbolSize | 6 |
| label | { show: false } |
BaseLine 默认 series（传入 series 但未指定字段）
| 项 | 默认值 |
|---|---|
| lineStyle.color | 主题色板（按序：#5470C6, #91CC75, #FAC858, #EE6666, #73C0DE, #3BA272, #FC8452, #9A60B4, #EA7CCC） |
| lineStyle.width | 2 |
| showSymbol | true |
| symbol | 'circle' |
| symbolSize | 6 |