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

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

鼠标移动到柱上表示样式

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

最开始是尝试的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.setOption({backgroundColor:'#1D324B',tooltip: {trigger: 'item',formatter:function(params) {var relVal = params.name + '<br/> 从' + params.value[1] +'时开始,在线时长为' + Math.round(60*params.value[2]/16)+'分钟';return relVal;}},xAxis: {data: data.xData,axisLine: {lineStyle: {color: '#7F8EA2'}},splitLine: {lineStyle: {type: 'dashed',color: '#7F8EA2'},show: true}},//图表边距设置grid: {top: '1.5%',left: '2%',right: '1%',bottom: '1%',containLabel: true},yAxis: {min:0,max:24,splitNumber: 24,scale: true,axisLine: {lineStyle: {color: '#7F8EA2'}},splitLine: {lineStyle: {type: 'dashed',color: '#7F8EA2'},show: true}},series: [{symbolSize: function (data) {return [40,data[2]];},hoverAnimation:false,symbolOffset: ['5%', '-50%'], //图标位置偏移data: data.data,type: 'scatter',symbol:"rect",itemStyle: {normal: {opacity: 1,color:'#42B6F6'}}}]})},

后言，核心代码都已经附上来了，但是具体的样式优化以及不同的功能场景应用适配，再根据不同的需求进行具体优化吧~

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

php moodle mysql_PHP+XAMPP+MYSQL：从MOODLE数据库提取数据并利用jpgraph生成柱状成绩对比图...
其实这个难点主要在两方面,代码逻辑比较简单,一方面难在SQL语句已经忘记了,要重新学起来,另一方面在不知道画幅如何自动生成.第一个问题已经解决,第二个问题是本项目中最后一个未实现的点.如果有缘人看到希 ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
【MATLAB基础绘图第2棒】绘制柱状/饼图填充图
MATLAB绘制柱状填充图方法1:hatchfill2工具 1.1 案例1:柱状图填充 1.2 案例2:饼图填充方法2:applyhatch函数 2.1 案例1:柱状图填充 2.2 案例2:饼图填 ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
在vue中利用highcharts+colormap+canvas实现频谱瀑布图
先看一下实现效果图 1.频谱图是利用highcharts编写的,因为渲染频繁问题,之前也用echarts但发现很消耗内存,所以选择了hightcharts,当前测试的用的是30ms渲染一次,基本不存在 ...
用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&q ...
Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)...
Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一, 可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了 ...
使用vue做柱状echarts报表
柱状报表成果展示: ① 后端返回如下数据(female和male每个都有95个数据.从00:00开始每一刻钟对应一个数据): ② 使用vue,在template标签中写如下代码 <div id ...
vue动态给散点图每个圆球设置背景色 - echart图表
如图所示: 代码如下:(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html> <head><meta charset=&qu ...

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

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

最新文章

热门文章