2. 程式人生 > >樹莓派：4. 樹莓派搭建美觀的物聯網溫度伺服器-ECharts、HTML5、JavaScript / ECharts gauge使用示例

樹莓派：4. 樹莓派搭建美觀的物聯網溫度伺服器-ECharts、HTML5、JavaScript / ECharts gauge使用示例

阿新 • • 發佈：2019-01-19

1. 效果

這裡寫圖片描述

2. 簡介

1. 其中儀表的部分使用的是ECharts的gauge控制元件實現。
2. CGI使用自動重新整理的方式每隔3秒自動執行一次，gauge控制元件每隔3秒讀取CGI的html文件，並且解析出溫度，顯示到錶盤上。

3. HTML程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ECharts</title>
    <!-- 來自百度CDN -->
    <script src="./esl.js"></script
 
>
</head>
<body>
    <img src="city2.jpg" height="100%" width="100%">
    <h1 align="left" style="color:black;font-size:40px;">物聯網溫度檢測 </h1>

    <hr size="1" width="100%" color="black" noshade="noshade" />
    <iframe id = "hellocgi" src="cgi-bin/hello.cgi" width="0" height
 
="0"></iframe>

    <!--#exec cgi="cgiProgram.cgi"-->

    <div id="main2" style="height:600px" align="left"></div>
    <script type="text/javascript">
        var timeTicket;
        // 路徑配置
        require.config({
            paths:{ 
                'echarts' : './echarts'
 
,
                'echarts/chart/bar' : './echarts',
                'echarts/chart/line' : './echarts',
                'echarts/chart/gauge' : './echarts'
            }});

        // 使用
        require([
                'echarts',
                'echarts/chart/bar', // 使用柱狀圖就載入bar模組，按需載入
                'echarts/chart/line',
                'echarts/chart/gauge'],
            function (ec) {

                var myChart2 = ec.init(document.getElementById('main2')); 
                var option2 = {
                    tooltip : {formatter: "{a} <br/>{b} : {c}%"},
                    series : [{
                            name:'物聯網溫度',
                            type:'gauge',
                            detail : {formatter:'{value}攝氏度'},
                            data:[{value: 0, name: ''}]
                        }]};

                clearInterval(timeTicket); 
                timeTicket = setInterval(function(){

                    var d = window.frames["hellocgi"].document;             
                    var str = d.getElementsByTagName('h1')[0].innerHTML;
                    option2.series[0].data[0].value = str; 
                    //option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; 
                    myChart2.setOption(option2, true); 
                }, 2000); 

                // 為echarts物件載入資料  
                myChart2.setOption(option2);
            }
        );
    </script>
    <hr size="1" width="100%" color="black" noshade="noshade" />
</body>
</html>

4. 檔案列表

這裡寫圖片描述

5. 原始碼下載

相關推薦

樹莓派：4. 樹莓派搭建美觀的物聯網溫度伺服器-ECharts、HTML5、JavaScript / ECharts gauge使用示例

1. 效果 2. 簡介 1. 其中儀表的部分使用的是ECharts的gauge控制元件實現。 2. CGI使用自動重新整理的方式每隔3秒自動執行一次，gauge控制元件每隔3秒讀取CGI的

高併發程式設計系列：4種常用Java執行緒鎖的特點，效能比較、使用場景

高併發程式設計系列：4種常用Java執行緒鎖的特點，效能比較、使用場景 http://youzhixueyuan.com/4-kinds-of-java-thread-locks.html   在Java併發程式設計中，經常遇到多個執行緒訪問同一個 共享資源 ，這時候作為開發者

（小程式篇：一）mac搭建小程式本地測試伺服器

mac搭建小程式本地測試伺服器 根據教程逐步搭建：https://www.jianshu.com/p/61f50ee77dec 可能遇到的問題： npm未安裝，使用終端語句時報錯npm: command not found，參考教程安裝npm：https://blog.c

和我一起搭建私有物聯網雲平臺

和我一起搭建私有物聯網雲平臺   背景（不看也罷） “預計2020年全球的物聯網裝置將達到500億臺”這句話已經被我無恥地在各種材料、PPT中引用過無數次了，但這並不妨礙物聯網已經成為或即將成為下一個浪潮之巔的事實，各大、小公司都想借助物聯網的風口再起飛一波。於是，很多公司紛紛

海天味業預報：2019年AI/機器人和物聯網將扮演主角！

數字化轉型在很長一段時間內一直是許多公司的首要任務，並且可能還會持續一段時間。 但是2019年的轉型是做什麼呢？ 研究公司Forrester Research剛剛釋出了一份預測報告， 以下是海天味業為你播報的重點內容。 數字化運營可操作化 該公司表示，今年是“現實扼殺了轉型理想”的一年，董事

Unity3d搭建HTTP弱聯網的伺服器搭建及客戶端編寫（一）之java伺服器

HTTP弱聯網java伺服器 通過tomcat搭建java伺服器（linux 1、java環境搭建 java環境較容易搭建，在網上很容易找到相關的教程。 2、tomcat環境搭建 開始配置tomcat: 複製解壓後的檔案到 /opt

LoRa vs NB-IoT：12個角度看哪個物聯網標準更具優勢？

近期全球低功耗廣域網（LPWAN）市場的激增可歸因於多個因素。機器學習和 M2M 通訊標準的快速發展發揮了重要作用，加之全球對物聯網服務的需求不斷增長、低價的 LPWAN 工具和節能機會的增多。 預計在2022 年，全球 LPWAN 市場的價值將會提升

利用 esp8266 搭建簡單物聯網專案

接[上一篇部落格](https://www.cnblogs.com/ZhengBlogs/p/esp8266_1.html)，這次還是關於 **esp8266** --> **物聯網** # 一、雲端資料監控：DHT11 + NodeMcu +Dweet.io 1. 接上一篇部落格的接線及相關配置不變( DH

樹莓派開發筆記(二)：qt開發環境搭建：樹莓派qt編譯和宿主機qt交叉編譯

樹莓派開發筆記(二)：qt開發環境搭建：樹莓派qt編譯和宿主機qt交叉編譯前話        前面已經成功執行樹莓派，下面使用qt開發樹莓派產品。搭建樹莓派qt編譯環境（不推薦：開發編譯速度慢）        安裝樹莓派的桌面版本，可以直接配置qt環境，此種方法總是卡卡的，所

雲中樹莓派（4）：利用聲音感測器控制Led燈

1. 聲音感測器及其配置 聲音感測器如下圖所示： 將 VCC 引腳接入樹莓派 5V 引腳，將 GND 引腳接入樹莓派 GND 引腳，將 OUT 引腳接入樹莓派 GPIO20。 要注意，模組在環境聲音強度達不到設定閾值時，OUT輸出高電平（1），當外界環境聲音強度超過設定閾值時

Qt5.4(later)樹莓派2 交叉編譯環境搭建

費了好大力氣，終於把Qt5的交叉環境搞定了，這裡記錄一下具體的實現過程。google出來的文章都是很老的移植方法，很多博文裡面 提供的下載連結均已失效。 1. 準備工具 *  qt-everywhere-opensource-src-5.4.1.tar*  2015-0

簡單物聯網：外網訪問內網路由器下樹莓派Flask服務器

分配 amp con 樹莓派 轉發規則 添加 局域網 輸入 pytho 最近做一個小東西，大概過程就是想在教室，宿舍控制實驗室的一些設備。 已經在樹莓上搭了一個輕量的flask服務器（在樹莓派下搭flask在其他隨筆有說明），在實驗室的路由器下，任何設備都是可以訪問的；但是

樹莓派apache2.4源碼包安裝

include error: apt-get 重新編譯 問題： ror 成功 樹莓派 官方 1.安裝apr-1.6.3.tar.gz apr-util-1.6.1.tar.bz2 httpd-2.4.34.tar.gz （源碼包下載centos7的就行，樹莓派版本官方deb

NetBSD 7.1正式釋出：支援樹莓派Zero以及更好的Linux相容性

   2017-03-16 15:06  來源：cnbeta網站(台州)  我來投稿  　 小程式創業扶持計劃 實現月入10萬創業夢 （原標題：NetBSD 7.1正式釋出：支援樹莓派Zero以及更好的Lin

經驗分享：利用樹莓派開發板製作無線路由器

摸索了一個禮拜，總算將自己手上的樹莓派開發板製作成了一個無線路由器。 無線路由器在資料包的傳輸中會進行NAT轉化，並生成NAT表，資料包必須先通過LAN口進入路由器，再由WLAN口出路由器進入Internet，然後才能在Internet上找到對應的伺服器…以上為

樹莓派入門（三）- 基本設定：時區、密碼、apt-get源、上傳下載

樹莓派基本設定 更改時區 修改root、pi密碼 更換apt為阿里雲源 使用lrzsz，上傳下載檔案 更改時區 輸入命令 sudo dpkg-reconfigure tzdata 上下箭頭移動游標，

樹梅派應用23：QT+樹莓派實現一個簡單的播放器

說起樹莓派，買了也有一段時間了，但是始終都沒有做出什麼好玩的裝置出來，恰好最近在學C++，看到樹莓派放在牆角吃了一年多灰，為何不利用它來學一下程式設計呢？ 先給我的工作臺來個特寫： 說幹就幹，在經歷了一番折騰以後，先準備所需的器材和必要的零部件，在這裡我簡單的羅列一下：先是

樹梅派應用18：用樹莓派DIY一個智慧家居伺服器

其實這東西我自己已經用了一年了~現在就來寫個教程~嘿嘿…… 先上個圖 有點亂23333 這是我的房間書櫃，也是我的工作臺……書櫃的側邊是樹莓派搭建的物聯網伺服器~ 來一隻近圖~ 這就是伺服器的近照啦~ 我用的是樹莓派A+作為伺服器的主控，所有的工作都由它完成。 樹莓派A+是

樹莓派：設定與軟體安裝

拿到樹莓派後，你需要進行一些初始化設定，以便於用起來更方便。除此之外，你可能需要安裝一些軟體，以便樹莓派能實現更加強大的功能。 常見初始化設定 1）設定密碼： 樹莓派的預設使用者名稱是pi，沒有密碼。這意味著別人可以隨意使用你的樹莓派。你可以在終端中為pi使用者設定密碼：  $sudo

樹莓派：開機使用

eth0 Link encap:Ethernet HWaddr b8:27:eb:d8:ed:f4 inet6 addr: fe80::9b8b:c0de:d083:6ddd/64 Scope:Link UP BROADCAST MULTICAS