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

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

鼠标移动到柱上表示样式

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

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

html元素

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

echart的配置相关源码

drawResidentGraph(data){
   
            this.residentChart = echarts.init(document.getElementById('residentGraphId'));