图表渲染功能测试
本文档用于测试新集成的图表功能，包括 ECharts 地图组件、3D/GL 组件以及 Markmap 多实例渲染。
1. ECharts 基础图表测试
1.1 柱状图（主题自适应测试）
{
"title": {
"text": "月度销售数据",
"subtext": "主题自动适配测试"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["销售额"]
},
"xAxis": {
"type": "category",
"data": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
},
"yAxis": {
"type": "value"
},
"series": [{
"name": "销售额",
"data": [120, 200, 150, 80, 70, 110, 130],
"type": "bar",
"itemStyle": {
"color": "#5470c6"
}
}]
}
1.2 折线图（多系列）
{
"title": {
"text": "网站流量统计"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["访问量", "注册量", "购买量"]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"name": "访问量",
"type": "line",
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "注册量",
"type": "line",
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "购买量",
"type": "line",
"data": [150, 232, 201, 154, 190, 330, 410]
}
]
}
2. ECharts 高级图表测试
2.1 雷达图
{
"title": {
"text": "能力评估雷达图"
},
"tooltip": {},
"legend": {
"data": ["实际得分", "预期得分"]
},
"radar": {
"indicator": [
{ "name": "编程能力", "max": 100 },
{ "name": "沟通能力", "max": 100 },
{ "name": "项目经验", "max": 100 },
{ "name": "学习能力", "max": 100 },
{ "name": "团队协作", "max": 100 }
]
},
"series": [{
"name": "能力评估",
"type": "radar",
"data": [
{
"value": [85, 70, 75, 90, 80],
"name": "实际得分"
},
{
"value": [90, 85, 80, 95, 90],
"name": "预期得分"
}
]
}]
}
2.2 桑基图
{
"title": {
"text": "用户流转桑基图"
},
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove"
},
"series": [{
"type": "sankey",
"layout": "none",
"emphasis": {
"focus": "adjacency"
},
"data": [
{"name": "首页"},
{"name": "产品页"},
{"name": "详情页"},
{"name": "购物车"},
{"name": "结算"},
{"name": "支付成功"}
],
"links": [
{"source": "首页", "target": "产品页", "value": 5000},
{"source": "产品页", "target": "详情页", "value": 3000},
{"source": "详情页", "target": "购物车", "value": 1500},
{"source": "购物车", "target": "结算", "value": 800},
{"source": "结算", "target": "支付成功", "value": 600}
]
}]
}
3. ECharts 3D/GL 组件测试
3.1 3D 柱状图
{
"title": {
"text": "3D 柱状图示例"
},
"tooltip": {},
"visualMap": {
"max": 100,
"inRange": {
"color": ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
}
},
"xAxis3D": {
"type": "category",
"data": ["A", "B", "C", "D", "E"]
},
"yAxis3D": {
"type": "category",
"data": ["X", "Y", "Z"]
},
"zAxis3D": {
"type": "value"
},
"grid3D": {
"boxWidth": 200,
"boxDepth": 80,
"viewControl": {
"autoRotate": false
}
},
"series": [{
"type": "bar3D",
"data": [
[0, 0, 50], [0, 1, 70], [0, 2, 60],
[1, 0, 80], [1, 1, 90], [1, 2, 75],
[2, 0, 65], [2, 1, 85], [2, 2, 95],
[3, 0, 55], [3, 1, 65], [3, 2, 70],
[4, 0, 60], [4, 1, 75], [4, 2, 80]
],
"shading": "color",
"label": {
"show": false
},
"emphasis": {
"label": {
"show": true
},
"itemStyle": {
"color": "#900"
}
}
}]
}
3.2 3D 散点图
{
"title": {
"text": "3D 散点图"
},
"tooltip": {},
"xAxis3D": {
"type": "value"
},
"yAxis3D": {
"type": "value"
},
"zAxis3D": {
"type": "value"
},
"grid3D": {
"viewControl": {
"autoRotate": true,
"autoRotateSpeed": 10
}
},
"series": [{
"type": "scatter3D",
"symbolSize": 12,
"data": [
[1, 1, 1], [2, 2, 2], [3, 3, 3], [4, 4, 4], [5, 5, 5],
[1, 2, 3], [2, 3, 4], [3, 4, 5], [4, 5, 6], [5, 6, 7],
[1, 5, 2], [2, 4, 3], [3, 3, 4], [4, 2, 5], [5, 1, 6]
],
"itemStyle": {
"opacity": 0.8
}
}]
}
3.3 3D 曲面图
{
"title": {
"text": "3D 曲面图（数学函数曲面）"
},
"tooltip": {},
"visualMap": {
"show": false,
"min": -1,
"max": 1,
"inRange": {
"color": ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"]
}
},
"xAxis3D": {
"type": "value",
"min": -3,
"max": 3
},
"yAxis3D": {
"type": "value",
"min": -3,
"max": 3
},
"zAxis3D": {
"type": "value"
},
"grid3D": {
"viewControl": {
"autoRotate": true,
"autoRotateSpeed": 10
}
},
"series": [{
"type": "surface",
"wireframe": {
"show": false
},
"shading": "color",
"data": [
[0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7, 0.6],
[0.6, 0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7, 0.6, 0.5],
[0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4],
[0.8, 0.9, 1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3],
[0.9, 1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2],
[1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1],
[0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0],
[0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0, -0.1],
[0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0, -0.1, -0.2],
[0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0, -0.1, -0.2, -0.3]
]
}]
}
3.4 3D 折线图
{
"title": {
"text": "3D 折线图"
},
"tooltip": {},
"xAxis3D": {
"type": "value"
},
"yAxis3D": {
"type": "value"
},
"zAxis3D": {
"type": "value"
},
"grid3D": {
"viewControl": {
"projection": "perspective",
"autoRotate": false
}
},
"series": [{
"type": "line3D",
"data": [
[0, 0, 0], [1, 1, 2], [2, 0.5, 3],
[3, 2, 4], [4, 1.5, 5], [5, 3, 6],
[6, 2.5, 5], [7, 4, 4], [8, 3.5, 3],
[9, 5, 2], [10, 4.5, 1]
],
"lineStyle": {
"width": 4,
"color": "#1e90ff"
}
}]
}
4. ECharts 地图组件测试
注意：地图数据已集成，会自动加载
china和world地图的 GeoJSON 数据。
4.1 中国地图（散点）
中国地图会自动加载地理数据，无需手动注册。
{
"title": {
"text": "主要城市分布",
"subtext": "中国主要城市分布图"
},
"tooltip": {
"trigger": "item"
},
"geo": {
"map": "china",
"roam": true,
"label": {
"show": true,
"fontSize": 10
},
"emphasis": {
"label": {
"show": true
}
}
},
"series": [{
"name": "城市",
"type": "scatter",
"coordinateSystem": "geo",
"data": [
{"name": "北京", "value": [116.4074, 39.9042, 100]},
{"name": "上海", "value": [121.4737, 31.2304, 200]},
{"name": "广州", "value": [113.2644, 23.1291, 150]}
],
"symbolSize": 15,
"itemStyle": {
"color": "#c23531"
}
}]
}
4.2 世界地图（散点）
世界地图会自动加载地理数据，无需手动注册。
{
"title": {
"text": "全球主要城市",
"subtext": "世界主要城市分布图"
},
"tooltip": {
"trigger": "item"
},
"geo": {
"map": "world",
"roam": true,
"label": {
"show": false
}
},
"series": [{
"name": "城市",
"type": "scatter",
"coordinateSystem": "geo",
"data": [
{"name": "纽约", "value": [-74.006, 40.7128, 150]},
{"name": "伦敦", "value": [-0.1276, 51.5074, 120]},
{"name": "东京", "value": [139.6917, 35.6895, 180]}
],
"symbolSize": 12
}]
}
4.3 不需要地图数据的地理坐标图
以下是直接使用经纬度坐标的图表，不需要地图 GeoJSON：
{
"title": {
"text": "地理坐标散点图"
},
"tooltip": {
"trigger": "item"
},
"grid": {
"left": "10%",
"right": "10%",
"bottom": "10%",
"top": "15%"
},
"xAxis": {
"type": "value",
"name": "经度",
"min": 100,
"max": 130
},
"yAxis": {
"type": "value",
"name": "纬度",
"min": 20,
"max": 45
},
"series": [{
"name": "城市",
"type": "scatter",
"data": [
[116.4074, 39.9042],
[121.4737, 31.2304],
[113.2644, 23.1291],
[114.0579, 22.5431],
[104.0668, 30.5728]
],
"symbolSize": 15,
"itemStyle": {
"color": "#5470c6"
},
"label": {
"show": true,
"position": "right",
"formatter": "{b}"
}
}]
}
5. Markmap 多实例测试
5.1 第一个思维导图 - 项目管理流程
# 项目管理完整流程
## 启动阶段
- 项目立项
- 需求收集
- 可行性分析
- 项目章程
- 干系人识别
- 团队组建
## 计划阶段
- 需求分析
- 功能需求
- 非功能需求
- 约束条件
- 资源规划
- 人力资源
- 物资资源
- 预算制定
- 时间规划
- WBS分解
- 进度安排
- 里程碑设定
## 执行阶段
- 开发实施
- 编码开发
- 代码审查
- 单元测试
- 集成测试
- 功能测试
- 性能测试
- 安全测试
- 部署上线
- 环境准备
- 数据迁移
- 灰度发布
## 监控阶段
- 性能监控
- 系统指标
- 业务指标
- 用户体验
- 问题管理
- Bug追踪
- 优先级排序
- 修复验证
- 持续优化
- 性能调优
- 功能迭代
- 用户反馈
## 收尾阶段
- 项目验收
- 文档归档
- 经验总结
5.2 第二个思维导图 - 全栈技术栈
# 全栈开发技术栈
## 前端技术
### 框架
- React
- React Hooks
- React Router
- Redux/Zustand
- Vue
- Vue 3 Composition API
- Vuex/Pinia
- Vue Router
- Angular
- TypeScript
- RxJS
- NgRx
### 构建工具
- Vite
- Webpack
- Rollup
- Parcel
### UI 框架
- Ant Design
- Element Plus
- Material-UI
- Tailwind CSS
## 后端技术
### 语言框架
- Node.js
- Express
- Koa
- NestJS
- Python
- Django
- Flask
- FastAPI
- Java
- Spring Boot
- MyBatis
- Hibernate
- Go
- Gin
- Echo
- Beego
### API 设计
- RESTful
- GraphQL
- gRPC
- WebSocket
## 数据库
### 关系型
- MySQL
- PostgreSQL
- Oracle
- SQL Server
### NoSQL
- MongoDB
- Redis
- Elasticsearch
- Cassandra
## DevOps
### 容器化
- Docker
- Kubernetes
- Docker Compose
### CI/CD
- Jenkins
- GitLab CI
- GitHub Actions
- Travis CI
### 云平台
- AWS
- Azure
- 阿里云
- 腾讯云
5.3 第三个思维导图 - 数据分析学习路径
# 数据分析学习路径
## 基础知识
### 数学基础
- 统计学
- 描述性统计
- 推断统计
- 假设检验
- 概率论
- 概率分布
- 贝叶斯定理
- 期望与方差
- 线性代数
- 矩阵运算
- 特征值
- 向量空间
### 编程基础
- Python
- 基础语法
- 数据结构
- 面向对象
- SQL
- 查询语句
- 聚合函数
- 窗口函数
- R语言
- 数据处理
- 统计分析
- 可视化
## 数据处理
### 数据采集
- 网络爬虫
- BeautifulSoup
- Scrapy
- Selenium
- API调用
- 数据库查询
### 数据清洗
- Pandas
- 缺失值处理
- 异常值检测
- 数据转换
- NumPy
- 数组运算
- 数学函数
- 线性代数
### 数据存储
- 关系型数据库
- MySQL
- PostgreSQL
- NoSQL数据库
- MongoDB
- Redis
- 数据仓库
- Hive
- ClickHouse
## 数据分析
### 探索性分析
- 描述性统计
- 数据分布
- 相关性分析
- 异常检测
### 统计建模
- 回归分析
- 线性回归
- 逻辑回归
- 多元回归
- 分类算法
- 决策树
- 随机森林
- SVM
- 聚类分析
- K-means
- DBSCAN
- 层次聚类
### 机器学习
- 监督学习
- 无监督学习
- 深度学习
- 强化学习
## 数据可视化
### 可视化工具
- Matplotlib
- Seaborn
- Plotly
- ECharts
### BI工具
- Tableau
- Power BI
- FineBI
- 帆软
### Dashboard
- Streamlit
- Dash
- Grafana
- Superset
## 业务应用
### 业务分析
- 用户分析
- 产品分析
- 运营分析
- 财务分析
### 数据报告
- 数据指标体系
- 分析报告撰写
- 数据可视化呈现
- 业务洞察提炼
### A/B测试
- 实验设计
- 假设检验
- 结果分析
- 决策建议
5.4 第四个思维导图 - 机器学习算法分类
# 机器学习算法分类
## 监督学习
### 回归算法
- 线性回归
- 多项式回归
- 岭回归
- Lasso回归
- ElasticNet
### 分类算法
- 逻辑回归
- K近邻（KNN）
- 朴素贝叶斯
- 支持向量机（SVM）
- 决策树
- CART
- ID3
- C4.5
- 集成学习
- 随机森林
- GBDT
- XGBoost
- LightGBM
- CatBoost
### 神经网络
- 感知机
- 多层感知机
- 卷积神经网络（CNN）
- 循环神经网络（RNN）
- 长短期记忆网络（LSTM）
- Transformer
## 无监督学习
### 聚类算法
- K-means
- K-medoids
- DBSCAN
- 层次聚类
- 谱聚类
- 高斯混合模型（GMM）
### 降维算法
- 主成分分析（PCA）
- 线性判别分析（LDA）
- t-SNE
- 自编码器
- UMAP
### 关联规则
- Apriori
- FP-Growth
- Eclat
## 强化学习
### 基于价值
- Q-Learning
- SARSA
- DQN
- Double DQN
- Dueling DQN
### 基于策略
- Policy Gradient
- REINFORCE
- Actor-Critic
- A3C
- PPO
### 基于模型
- Dyna-Q
- Model-Based RL
- AlphaGo
## 半监督学习
- 自训练
- 协同训练
- 生成式方法
- 图方法
6. 功能验证清单
6.1 ECharts 基础功能
- 柱状图渲染
- 折线图渲染
- 雷达图渲染
- 桑基图渲染
- 主题自动适配（亮/暗）
6.2 ECharts 3D/GL 功能
- 3D 柱状图渲染
- 3D 散点图渲染
- 3D 曲面图渲染
- 3D 折线图渲染
- GL 扩展自动加载
- 3D 图表主题适配
- 自动旋转功能
6.3 ECharts 地图功能
- 中国地图自动加载并渲染
- 世界地图自动加载并渲染
- 地理坐标散点图（不需要地图数据）
- 地图数据动态注册机制
6.4 Markmap 功能
- 单个 Markmap 渲染
- 多个 Markmap 同时渲染（4个）
- 每个实例独立工作
- 工具栏功能（适配、复制、导出）
- 自动调整大小
- D3.js 正确加载
6.5 搜索功能
- 排除 interviews 文件夹内容
- 正常搜索其他内容
7. 主题切换测试
请尝试在浏览器中切换亮/暗主题，观察：
- 所有图表文字颜色是否自动适配
- 地图区域颜色是否适配主题
- 3D 图表坐标轴颜色是否适配
- Markmap 思维导图是否正常显示
8. 图表类型总结
本文档包含以下图表类型的测试：
基础图表 (4个):
- 柱状图 - 主题自适应
- 折线图 - 多系列
- 雷达图 - 能力评估
- 桑基图 - 用户流转
3D/GL 图表 (4个): 5. 3D 柱状图 - 热力分布 6. 3D 散点图 - 自动旋转 7. 3D 曲面图 - 网格数据 8. 3D 折线图 - 空间轨迹
地图相关 (3个):
9. 中国地图散点 - 需要 GeoJSON
10. 世界地图散点 - 需要 GeoJSON
11. 地理坐标散点 - 无需地图数据
思维导图 (4个): 12-15. Markmap 多实例测试
总计: 15 个图表示例
测试完成时间: 2025-10-24
功能状态: ✅ 基础图表、3D图表、地图全部正常
地图状态: ✅ 地图数据已集成并自动加载