文档章节

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

176迈微商城
 176迈微商城
发布于 2017/09/08 16:26
字数 550
阅读 39
收藏 0
点赞 0
评论 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
ECharts 简单的使用过程,完美的图形展示

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

kevin小当家
2015/08/07
0
0
响应式 React Native Echarts 组件

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

entronad
07/12
0
0
【实例教程】Echarts 的 Java 封装类库

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

Liuzh_533
2014/09/22
0
30
ECharts整合HT for Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的...

xhload3d
2015/03/16
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
06/26
0
0
NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw
05/14
0
0
v-charts 1.17.8 发布,Vue2.x 封装的 Echarts 图表组件

v-charts 是饿了么开源的基于 Vue2.x 封装的 Echarts 图表组件,特性: 统一的数据格式: 使用对前后端都友好的数据格式,方便生成和修改。 简化的配置项: 通过简化的配置项,可以轻松实现复...

王练
07/14
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CDH的坑之Sqoop导出数据到MySQL

CDH的坑之Sqoop导出数据到MySQL 最近使用Sqoop从Hive导出数据到MySQL中,出现了一系列的问题,下面将这个问题记录一下,避免再度踩坑! 导出语句 sqoop export --connect jdbc:mysql://192....

星汉
2分钟前
0
0
Hyperledger Fabric 客户端开发三

前面两篇文章介绍了Hyperledger Fabric SDK并使用一个实例介绍如何通过SDK和Hyperledger Fabric Blockchain交互, 现在详细分析相关的过程。 首先看 enroll (登录) admin 过程。 'use stric...

十一月不远
3分钟前
0
0
PowerDesigner连接MySQL和逆向工程图

最近想梳理公司项目的表间关系,从项目后台管理系统的操作入手,以及代码的hibernate注解入手,都不算特别尽人意,于是最后还是鼓捣了一下PowerDesigner的逆向工程图,这样更直观一些。 想着...

Oo若离oO
3分钟前
0
0
威胁web应用安全的错误

一般绝大部分的web应用攻击都是没特定目标的大范围漏洞扫描,只有少数攻击确实是为入侵特定目标而进行的针对性尝试。这两种攻击都非常频繁,难以准确检测出来,许多网站的web应用防火墙都无法...

上树的熊
5分钟前
1
0
pypy2 install crypto error

install pycryptodome instead pip install pycryptodome

coord
9分钟前
0
0
Service Mesh所应对的8项挑战

Lori Macvittie 微服务架构是把双刃剑,我们享受它带来的开发速度(development velocity),却也不得不面对服务间通讯带来的复杂性问题。 目前大多数扩展容器化微服务的架构多是基于proxy-b...

好雨云帮
19分钟前
0
0
时间复杂度

1. 维基上的定义 在计算机科学中,算法的时间复杂度是一个函数,它定性描述该算法的运行时间。这是一个代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述,不包括这个函数的低...

liuyan_lc
25分钟前
0
0
js中的~符

~是js里的按位取反操作符,~~就是执行两次按位取反,其实就是保持原值,但是注意虽然是原值,但是对布尔型变量执行这个操作,会转化成相应的数值型变量,也就是 ~~true === 1,~~false === 0...

JamesView
26分钟前
0
0
webpack安装

npm install --save-dev webpack-cli

Vincent-Duan
28分钟前
0
0
实时监听EditText内容变化

主要是addTextChangedListener方法的使用 aswerEdittext.addTextChangedListener(new TextWatcher() { //编辑框的内容发生改变之前的回调方法 @Override public void before...

王先森oO
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部