vue全家桶+Echarts+百度地图，搭建数据可视化系统

Posted 2021-04-16 web前端开发

作者 | xrkffgg
来源 | https://www.jianshu.com/p/f4f90d44227f

1、 前言

1.1 业务场景

突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。

本人之前从未接触过 Echarts，然后需要2周拿出成果，有点慌

1.2 业务分析

拿到需求看了一下

支持用户名、密码登录，默认显示一个维度数据，然后点击可钻取进入第二维度数据，再点击进入第三维度数据展示。

大致估摸着。。。

1. 系统搭建 vue-cli
2. vuex记录登录信息
3. vue-router路由跳转
4. 3个维度的页面，提取出共用的组件
5. 各个组件开发
6. 调节样式，增加UI
7. 加入后台接口数据
8. 优化显示
9. 测试
10. 上线

当然这不是要2周内，全做完。应该是完成步骤6。

相对于公司就我一个前端，没接触过 Echarts，有问题都没人讨论的情况下。。。

心里还是忍不住想吐槽一下

1.3 效果展示

这里列出了第一维度页面的样式。文字请无视，哈哈。

2、 系统安装

吐槽归吐槽，活还是要干的。

以上是关于vue全家桶+Echarts+百度地图，搭建数据可视化系统的主要内容，如果未能解决你的问题，请参考以下文章

react自制全家桶Webstrom+React+Ant Design+echarts搭建react项目

vue全家桶搭建前端页面注意细节及遇到的难题

搭建vue全家桶

vue中使用vue-echarts引入百度地图实现数据可视化

实战Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

Vue全家桶+Egg从0开发大型项目搭建项目