# lineCharts

**Repository Path**: lidsccc/line-charts

## Basic Information

- **Project Name**: lineCharts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 H5 ECharts 项目

基于Vue3和ECharts的移动端数据展示项目，支持多Y轴平滑折线图和大数据量渲染优化。

## 项目特点

- ✅ Vue3 + Vite 构建
- ✅ 移动端自适应（px自动转换为vw）
- ✅ ECharts 5.x 图表库
- ✅ 三个Y轴展示不同量级数据
- ✅ 平滑折线图，无数据点标记，无区域填充
- ✅ 支持100 / 2000 / 100000条数据动态加载
- ✅ **智能数据采样优化，支持10万级数据渲染**
- ✅ 实时进度显示和性能监控

## 性能优化 🚀

本项目针对大数据量渲染进行了深度优化：

- **智能采样算法**：10万条数据降至800点，压缩比124.7x
- **Canvas渲染器**：比SVG快3-5倍
- **渐进式渲染**：避免UI阻塞
- **性能提升**：70-95%（详见 [PERFORMANCE.md](PERFORMANCE.md)）

### 数据量支持

| 数据量 | 渲染时间 | 状态 |
|-------|---------|------|
| 100 | ~50ms | ✓ 流畅 |
| 2,000 | ~200ms | ✓ 流畅 |
| 10,000 | ~300ms | ✓ 流畅 |
| 100,000 | ~500ms | ✓ 流畅 |

## 数据说明

- **A和B系列**：使用左侧Y轴（Y轴1），蓝色系
- **C和D系列**：使用右侧Y轴（Y轴2），绿色系
- **E系列**：使用最右侧Y轴（Y轴3），黄色，数据量级较小

## 安装依赖

```bash
npm install
```

## 运行项目

```bash
npm run dev
```

项目将在 http://localhost:3000 启动

## 构建生产版本

```bash
npm run build
```

## 项目结构

```
project/
├── src/
│   ├── components/
│   │   └── LineChart.vue    # 图表组件（含优化逻辑）
│   ├── data/
│   │   └── mock.js          # 模拟数据（100条）
│   ├── api/
│   │   └── index.js         # 模拟API（2000/100000条）
│   ├── utils/
│   │   └── dataSampling.js  # 数据采样算法
│   ├── App.vue              # 主应用
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── index.html               # HTML模板
├── vite.config.js           # Vite配置
├── package.json             # 项目依赖
├── README.md                # 项目说明
└── PERFORMANCE.md           # 性能优化详解
```

## 功能特性

### 图表交互

- 图例点击显示/隐藏系列
- Tooltip实时数据展示
- 三Y轴独立刻度

### 数据加载

- **加载2000条数据**：点击按钮模拟接口请求
- **加载10万条数据**：点击按钮生成超大数据集
- 实时进度条显示
- 自动数据采样和优化

### 性能监控

界面实时显示：
- 原始数据量
- 实际渲染数据量
- 压缩比（如：压缩 124.7x）

## 性能优化详解

查看 [PERFORMANCE.md](PERFORMANCE.md) 了解：
- 智能采样算法原理
- 各项优化策略详解
- 性能测试数据
- 进一步优化建议