vue+echart 利用散点图实现柱状时间驻留图

最新推荐文章于 2023-04-23 09:16:10 发布

前端开发二月半

最新推荐文章于 2023-04-23 09:16:10 发布

阅读量817

点赞数

分类专栏： JavaScript Vue 文章标签： vue js echart 散点驻留图

本文链接：https://blog.csdn.net/ying940718/article/details/105809614

版权

本文介绍了如何利用Vue和ECharts结合散点图，实现以周为单位展示手机连接路由器的开始及结束时间，以及连接次数的柱状时间驻留图。在开发过程中，由于数据量可能较大，放弃了阶梯瀑布图，选择了散点图。通过设置symbol为`rect`调整图形形状，并使用`symbolOffset`进行范围平移。提供了相关HTML元素和ECharts配置代码示例，供读者参考和按需优化。

摘要由CSDN通过智能技术生成

产品的需求是这样的，以周为单位，显示每一天一个手机连接某一台路由器的开始时间到结束时间，以及连接次数，最后的实现效果是下图的样子，其中的每个柱表示某个手机连接到某个路由器的时间范围。
在这里插入图片描述
鼠标移动到柱上表示样式

整个开发的辛酸历程是这样的。

最开始是尝试的echart的阶梯瀑布图，然后用了之后才发现，echart的阶梯瀑布图完全就是用和背景相同背景色的柱状图叠加起来的，因为我们的项目数据量可能会比较大，如果使用阶梯瀑布图的话，那就相当于做一个柱要生成两份数据，大大的影响了性能，所以果断pass。
接下来其实就考虑到了，echart的散点图，最后定版也是使用的echart的散点图，但是当时也有两个小问题，在这里简单说明一下
a. 散点图是圆形，通过设置series的symbol改为【rect】，修改图形形状
b. 因为散点图之前的应该场景都只是给定一个范围，并不需要给定具体的范围等，在利用散点图时，其实设置的起始点为该散点的中心位置，因此需要设置一下范围平移。【symbolOffset: [‘5%’, ‘-50%’], //图标位置偏移】
具体的echart配置可以参照下面源码

html元素

<div class="resident-graph-div" id="residentGraphId"></div>

echart的配置相关源码

drawResidentGraph(data){
   
            this.residentChart = echarts.init(document.getElementById('residentGraphId'));
            // 绘制使用情况图表
            this.residentChart.<