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.