文档章节

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

176迈微商城
 176迈微商城
发布于 2017/09/08 16:26
字数 550
阅读 55
收藏 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 有这样一款制...

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

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

漂泊的雾
2018/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
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
2018/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
1
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部