文档章节

学习分享,echarts模拟宽带测速效果 附Demo演示地址!!

176迈微商城
 176迈微商城
发布于 2017/09/08 16:26
字数 550
阅读 45
收藏 0

 相信大家在平时的开发过程中经常会需要和图形图标打交道,最近接到一个需求,制作一个类似宽带测速的界面,要求使用仪表盘表示宽带下载速度,折线图表示上传速度并用柱状图跳动表示每一秒由客户端向各大媒体网站百度、新浪,腾讯等发送的ping请求响应时间

    之前接触过的图形图标空间主要有Hcharts,Echarts,这次打算用百度的Echarts实现,首先:打开万能的度娘:www.baidu.com 搜索 echarts,进入官网 - http://echarts.baidu.com/index.html 。在下载菜单选择选择在线制作(自定义),因为我们只要用仪表盘,折线图和柱状图,因此可以使我们的JS文件体量小很多。如下图:




 

代码构建完成后会自动提示下载,点击下载(保存echarts.min.js )到自己的电脑上即可,这是制作图形图标的基础js类,有了他才能实现我们的需求。

 

第二步:构建自己的项目

    新建一个文件夹  speedtest ,国际惯例,在项目文件夹下分别建立  js 、css、img 文件夹用来放一些js,css和图片等资源文件。

    将下载的echarts.min.js 文件放到这个项目的js文件夹里面。

    在项目文件夹下新建一个html文件,我的是speed.html。

    关键:在文件head部分引入echarts的js插件

页面上分别定义三个DIV,为了图方便我分别定义DIV的ID为 ybp(仪表盘),zxt(折线图),zzt(柱状图)。分别创建三个js文件,ybp.js,zxt.js,zzt.js 用来配置图标的基本属性和数据。

因为是学习用DEMO,数据都是通过js定时器模拟变化的。但是稍微修改后就可以用于实际应用。

了解更多加微信:Zjgfcwang 注明 新浪博客 一起学习。。。。。

本DEMO由于 "176迈微商城" 提供。

DEMO演示地址:http://176mai.com/speedcn/speed1.html

© 著作权归作者所有

共有 人打赏支持
176迈微商城
粉丝 0
博文 5
码字总数 4825
作品 0
苏州
私信 提问
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

前言 一、React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热...

漂泊的雾
07/28
0
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
0
0
【实例教程】Echarts 的 Java 封装类库

Echarts 的 Java 封装类库:[http://www.oschina.net/p/echarts-java][1] 没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较...

Liuzh_533
2014/09/22
0
30
试用 vue-admin-template 写一个自己的dashboard

初衷 其实自己还是比较热衷于基于CLI的dashboard,也有心去做一些尝试,比如 用 Nodejs CLI 的方式实现一个TODO应用 - 简书 ,后续也会继续增加新想法到这个里面。但是我今天意识到一个问题,...

萝卜日志
09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

手写一个重试机制程序(使用Callable)

java.util.concurrent.Callable<V>接口可以实现多线程,同时还能实现一个简易重试机制。 查看Callable接口源码可知,它内部的call()方法带返回值,同时抛出了异常。 public interface Cal...

哥本哈根的小哥
23分钟前
0
0
能否通过反射修改被 final 修饰的成员变量?

一、背景 日常磨刀 二、阅前须知知识点: 当final修饰的成员变量在定义的时候初始化值,反射就不能动态修改它的值了。 当final修饰的成员变量在定义的时候没有初始化值,就还能通过反射来动态...

jack__0023
42分钟前
0
0
方之熙博士被任命为RISC-V基金会中国顾问委员会主席,加速RISC-V ISA在中国的应用

中国顾问委员会将就RISC-V基金会的教育和应用推广战略提供指导 今天在中国乌镇举行的世界互联网大会(World Internet Conference)上,RISC-V基金会(RISC-V Foundation)宣布,半导体行业资深人...

whoisliang
55分钟前
1
0
为了用户体验,不要做浏览器兼容

读者看到这篇文章的标题也许会感到奇怪,按照通常的经验来说,为了用户体验应该做浏览器兼容,以便让不同的浏览器用户都能有好的体验,从而增加网站的流量,但是我认为做浏览器兼容属于同样的...

Bob2100
56分钟前
1
0
分布式定时任务架构 (二) xxl-job二次开发实践

4个月前,公司有任务调度的需求,需要一周内完成,时间非常紧。 需求有三点: web界面编辑cron表达式,启动,停止任务 接入公司的rpc成本较低,公司有自研的rpc,研发人员希望共用同一套注解 ...

勇哥和你一起学技术
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部