Echarts项目开发:柱状图动态数据可视化排名榜(1)_echarts排行-程序员宅基地

技术标签: 漏刻有时  echarts  

漏刻有时
项目需求: 在学习echarts的过程,遇到B站以及抖音里很多动态数据排行榜的案例。一部分是基于可视化软件的,还有一部分是基于d3.js开发的。离自己想要的需求还是有一定的差距。解决办法无非是学习软件或是基于d3开发,节省重复造轮子的过程。

开发问题: 也不知道echarts能不能完成最终的结果,但是都是js,应该不会差到哪里。更何况,现在是站在原有模型的基础上进行仿制开发。

开发目的:

  1. 学习echarts组件属性;
  2. 学习echarts动态数据更新;
  3. 学习js动画效果;
  4. 学习ajax隔行读取数据;

代码基础:
以echarts简单的柱状图开始着手;

option = {
    
    xAxis: {
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
        type: 'value'
    },
    series: [{
    
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

一、定义动态数组

    yAxis: {
    
        type: 'category',
        data: (function (){
    
                var now = new Date();
                var res = [];
                var len = 7;
                while (len--) {
    
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
    },
        data: (function (){
    
                var res = [];
                var len = 10;
                while (len--) {
    
                    res.push(Math.round(Math.random() * 1000));
                }
                return res;
            })(),

二、定时刷新数组:

setInterval(function(){
    
     var timeData=new Date().toLocaleTimeString().replace(/^\D*/, '');
     var data0 = option.series[0].data;
     data0.shift();
     data0.push(Math.round(Math.random() * 1000));
     option.yAxis.data.shift();
     option.yAxis.data.push(timeData);
     option.title.subtext=new Date().toLocaleTimeString().replace(/^\D*/, '');
     myChart.setOption(option);
}, 2000);

三、定义彩色柱状图

var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];

color: function(params) {
    
     return colorList[params.dataIndex]
}

动态更新基本完成,接下来要解决的问题:
1、如何实现label数字的滚动效果;
2、如何实现ajax隔行读取数据;

Done!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41290949/article/details/104712494

智能推荐

简单介绍一下关系数据库三范式?-程序员宅基地

文章浏览阅读972次。简单介绍一下关系数据库三范式?一、简单介绍一下关系数据库三范式?二、事务四个基本特征或 ACID 特性。一、简单介绍一下关系数据库三范式?  范式就是规范,就是关系型数据库在设计表时,要遵循的三个规范。要想满足第二范式必须先满足第一范式,要满足第三范式必须先满足第二范式。  第一范式(1NF)是指数据库表的每一列都是不可分割的基本数据项,同一列中不能有多个值,即实体中的某个属性不能有多个值或者不能有重复的属性。列数据的不可分割。  第二范式(2NF)要求数据库表中的每个行必须可以被唯一地区分。为实

如何解决并发修改异常_并发修改异常处理java-程序员宅基地

文章浏览阅读665次。如何解决并发修改异常解决方法:1.采用列表迭代器解决,添加元素的时候,必须使用列表迭代器的添加元素的方法。特点:在当前元素的后面添加指定元素2.采用普通for循环的方式遍历集合,并添加元素。特点:在集合元素的最后添加指定的元素3.采用CopyOnWriteArrayList集合实现,它自身已经规避了并发修改异常。特点:在集合元素的最后添加指定的元素..._并发修改异常处理java

Elasticsearch6.5.4版本集群安装设置密码_it doesn't look like the x-pack security feature i-程序员宅基地

文章浏览阅读2.9k次。1.ES安装配置文件1.1主节点配置文件# ======================== Elasticsearch Configuration =========================# ---------------------------------- Cluster -----------------------------------cluster.name: GzEsCluster# ------------------------------------ Node_it doesn't look like the x-pack security feature is available on this elasti

Mac安装TensorFlow/Caffe_mac怎么下载tensorflow caffe-程序员宅基地

文章浏览阅读1.3k次。参考:http://www.linuxidc.com/Linux/2016-09/135026.htm https://gist.github.com/doctorpangloss/f8463bddce2a91b949639522ea1dcbe4sudo brew install -vd snappy leveldb gflags glog szip lmdbsudo brew tap home_mac怎么下载tensorflow caffe

xfs文件系统的备份与恢复_xfs 备份-程序员宅基地

文章浏览阅读503次。什么是XFS文件系统XfS文件系统是SGI开发的高级日志文件系统,XFS极具伸缩性,非常健壮。所幸的是SGI将其移植到了Linux系统中。在linux环境下。目前版本可用的最新XFS文件系统的为1.2版本,可以很好地工作在2.4核心下。我们在这里要讲的是xfsdump和xfsrestore命令:XFS提供了 xfsdump 和 xfsrestore 工具协助备份XFS文件系统中的数据。xf..._xfs 备份

import在vue中使用_vue import-程序员宅基地

文章浏览阅读1w次,点赞6次,收藏11次。vue中使用Import导入的方法_vue import

随便推点

Spring框架由配置文件转化为注解开发_spring3 bean property list 配置文件转注解-程序员宅基地

文章浏览阅读432次。Spring框架由配置文件转化为注解开发Spring Framework的注解开发相比之前的代码量是降低了耦合、简化了书写。可以说是简单几行代码就可以实现你需要的功能,相当方便。假如我们在做一个项目时,所有的内容都配置在.xml文件上,在Java文件和配置文件来回转换,也是相当麻烦和耗时的。为了解决这些个问题,Spring引入了注解,通过”@注解名称”的方式,让注解与Java Bean紧密结合..._spring3 bean property list 配置文件转注解

使用GoLand IDE进行开发,GOPATH设置无效_ide 配置gopath 无法识别-程序员宅基地

文章浏览阅读3.7k次,点赞5次,收藏2次。引用自己的包时,总提示test.go:5:8: package zd/zd_data is not in GOROOT (/usr/local/go/src/zd/zd_data)只去GOROOT去搜索了依赖包,没有去我设置的GOPATH路径搜索解决办法:_ide 配置gopath 无法识别

Trace、Debug和TraceSource与调试及日志设计_rust trace库不打印依赖包中的debug-程序员宅基地

文章浏览阅读1.1k次。1:Trace与Debug类的特性: 用法基本相同,只是Debug是在Debug本版本下使用,在Release版本下不会生成代码,而Trace在默认情况下是打开的,也就是说在Debug版本和Release版本下都会生成代码。2:什么是Listeners Listenters属性,它是TraceListenerCollection类型(Trace_rust trace库不打印依赖包中的debug

crs卸载_卸载crs-程序员宅基地

文章浏览阅读644次。安装rac最头疼的就是crs关于crs的卸载 比如当你安装crs的时候 出错不能next 那么卸了重新来过以下是来自metalink的 Doc ID: 239998.1PURPOSE-------The purpose of this document is to help DBA's and support analysts understand _卸载crs

Android studio 版本升级要到问题_android studio版本更新后-程序员宅基地

文章浏览阅读340次。Android Studio 版本更新之后,遇到的问题。首先是这两个设置主要是与当前studio 的版本相关。Android Plugin Version这个版本号,是与studio安装路径下D:\Program Files\Android\Android Studio\gradle\m2repository\com\android\tools\build\gradle,如下图所示:..._android studio版本更新后

k-core与k-shell的区别_kshell和kcore-程序员宅基地

文章浏览阅读2.3k次。一、问题描述:在文章中看到k-core与k-shell的概念,将全局图中分成2-core与1-shell的概念?结论:图可以说明一切,如图所示:1、2-core是包含蓝色与绿色的点,3-core会包含全部的点2、1-shell指的是黄色的点3、推断:任何一个图均可以分成k-core图与(k-1)-shell..._kshell和kcore

推荐文章

热门文章

相关标签