开发一个免费的图表网站 Free Charts

132 阅读1分钟

Free Charts

项目背景

最近在使用图表网站时,发现许多都需要收费,因此萌生了自己做一个免费图表网站的想法。

不仅给自己做一个,也准备给大家做一个!

项目历程

经过两三周的努力,完成了一个图表网站。以下是技术栈的转变:

  • 从 Vue3 CSR 转换到 Nuxt,再转到 Next.js,花费了不少时间。
  • 后端采用了 Nest.js + MongoDB + Redis。
  • 尽管 Next 和 Nuxt 可以开发后端,但是我已先完成了后端部分。

最终构建了:

  • Nest.js 后端项目
  • Vue3 + Vuetify 前端
  • Nuxt + Vuetify 前端
  • Next.js + MUI 前端(首次使用 -》 最终选择)
  • 小程序(主要用于展示广告,赚取小费)
  • 简单的管理端

除了vue,其他的技术都是第一次用,现学现卖

总成本

  • 阿里云服务器(2核4G5M带宽):199元
  • 小程序认证:30元

已完成功能

  1. 图表列表展示、详情、在线编辑、下载 HTML 代码
  2. 地图功能
  3. 用户模块

未来计划

  1. 完善地图功能,增加地图 demo,涵盖 Echarts 地图、GIS 等。
  2. 开发 3D 可视化展示。
  3. 接入 AI,生成 Vue、React 等框架代码。
  4. 离线部署方案:可能使用 Next.js + SQLite,也可能采用 Golang 或 Rust 的独立环境部署。
  5. 减轻用户负担。

图示展示

放一些图骗吧

PC端

light主题

light主题

dark主题

dark主题

3c1510eb0412de6c6f7aabbebda7b22.png

8cdea193c3ac5156bd8d8e81f75751d.png

小程序

eb094da7580186a0df3fd671f1eb894.png

116af2e0f134bb0a42612ff6c241b92.png

后台

1724318250767.png