charts-perf
G2 栈的性能测试监控工具!防止在迭代过程中性能出现急剧下降! 线上运行地址。
设计原型
说明:
- 头部、尾部样式按照主流网站,保证基本好看即可
- 内容部分分成两部分:
- 配置:
- 选择引擎(G2, G2Plot, ECharts, Highcharts) 三种;
- 选择 Case(折线图、面积图、柱形图、散点图)
- 选择数据量
- 开始执行(执行过程中,页面增加 loading 框,过程中会进行串行运行性能测试,时间可能比较长)
- 完成之后,获得数据进行图表的绘制(按照 Case 分成不同的图)
- X 轴是数据量,从 200 ~ 20000
- Y 轴是渲染时间
- 按照图表引擎的类型分组
- 配置:
技术栈
- 使用 Ant Design 进行 UI 绘制
- 样式使用 less 文件
- 图表绘制使用 G2Plot
性能测试的 Case 使用 iframe 沙箱运行
运行
# 安装依赖
$ tnpm i
# 运行,本地启动
$ tnpm start
License
MIT@hustcc.