vue使用echart百度地图做数据分布图聚合图层

Posted 2023-03-25

参考技术A 先看效果图:

遇到的问题:
1.在开发环境使用的百度地图 http接口，切换到线上环境时使用https域名访问前端不能使用百度http接口
解决：

参考文档:
echart官网配置项手册: https://www.echartsjs.com/option.html#title

echart demo: https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap

ehcart 参数解释： https://blog.csdn.net/luanpeng825485697/article/details/76738435

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

作者 | 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使用echart百度地图做数据分布图聚合图层的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

vue框架下echarts导入地图和调用百度地图接口

vue+ECharts4.x地图下钻/散点分布以及热力图

谷歌地图聚合点