相信大家在平時的開發過程中經常會需要和圖形圖標打交道，最近接到一個需求，制作一個類似寬帶測速的界面，要求使用儀表盤表示寬帶下載速度，折線圖表示上傳速度并用柱狀圖跳動表示每一秒由客戶端向各大媒體網站百度、新浪，騰訊等發送的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邁微商城" 提供。

總結

以上是生活随笔為你收集整理的android webview测速,学习分享，echarts模拟宽带测速效果 附Demo演示地址！！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。