當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

基于ECharts的数据大屏制作

發布時間：2023/12/29 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了基于ECharts的数据大屏制作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

P.S.

項目用到的所有文件我放在了百度網盤中，方便下載
鏈接：https://pan.baidu.com/s/1z_vfDC-SK09CYFrDFMl91Q
提取碼：0ajm

零、知識點補充

這里我會寫兩種的解釋，一個是用我自己的話來說（簡單版）；另一種就是看百度的解釋（詳細版）。

0.1 Less

簡單版

就是輔助寫css的，加快項目開發效率。

可以理解為一種類似css寫法的一個語言，每次你保存less文件的時候，他會給你自動轉換成wxss（微信小程序的樣式文件）或者css文件，相對于你直接寫css語法所需的代碼，用less寫要少很多。

當然，less也提供了css沒有的東西，從另一角度看，less是一個加強版css。

詳細版

Less官網：按住Ctrl點擊跳轉
Less簡介：按住Ctrl點擊跳轉

0.2 jQuery插件

簡單版

js插件，一個比較基本的js插件，也很小，很方便導入，一些前端的框架也基于jQuery寫的，比如Bootstrap框架，使用Bootstrap的時候，必須先導入jQuery.js，才能正常使用Bootstrap。

詳細版

jQuery官網：按住Ctrl點擊跳轉

官網是英文的，但是What is jQuery這個標題應該都可以找得到。

0.3 Flex布局

簡單版

一種布局方式，讓我們快速布局。此項目我們用Flex布局來快速布局，以及屏幕適配。

詳細版

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

這里給出菜鳥的Flex介紹：按住Ctrl點擊跳轉

0.4 rem

簡單版

rem就是一個相對的單位，會根據網頁長寬的變化而變化。rem常用來實現響應式布局。

詳細版

這個玩意就是個相對計算出來的單位，官網應該沒有（我是沒找到。。）

給大家看看菜鳥教程上寫的東西吧：px、em、rem區別介紹，一樣道理按住Ctrl點擊即可跳轉。

一、項目準備

1.1 項目使用技術

項目學到或用到如下技術：

div+css布局
flex布局
less輔助樣式開發
原生js+jQuery使用
rem屏幕適配
echarts基礎

1.2 文件準備

1.2.1 插件文件

flexible.js插件

jquery.js插件

包含默認組件的echarts.js（或echarts.min.js）插件

VS Code插件

Easy LESS（以下簡稱less插件）

px to rem & rpx (cssrem)（一下簡稱rem插件）

1.2.2 VS Code插件下載

步驟

先打開VS Code點擊插件下載的圖標

分別搜索Easy LESS和px to rem & rpx (cssrem)，搜索到之后點擊安裝（install）

詳細插件的頁面

如果怕自己下載錯了，我這里給出兩個插件的詳情頁面。

Easy LESS：

px to rem & rpx (cssrem)：

可能出現的問題

如果你之前用過less輔助開發微信小程序的話，less默認生成的文件是wxss，我們在less插件的settings.js文件中配置一下就好。

首先我們找到settings.js，并打開；

設置settings.js，將less自動轉化格式為css；

保存less文件，可以看到css文件自動生成成功，問題解決。

1.3 適配方案

首先我們目標是1920px的大屏幕，flexible.js默認把屏幕分為24等份（1920px÷24=80px）

規劃好了，我們再來設置rem插件的配置信息。首先和上面類似，找到rem插件的擴展設置，然后就能看到Root Font Size這一項了；

修改成80即可，不用帶px單位，其他單位也不用。

二、項目步驟

2.1 項目實現效果

2.2 項目流程

項目文件架構

項目文件架構為

除了index.html（手動創建）、index.less（手動創建）、index.js（手動創建）、index.css（less文件保存后自動生成的，不用手動創建）外，其他文件都是能從網上找到的，我們不用自己寫。

制作步驟

按圖中的序號來。

先做header部分，然后開始做main部分；main部分中，先做left再做right最后做中間部分；中間部分分上面的數字部分和下面的地圖部分。

合適的開發流程有利于提高代碼寫的效率。

2.3 body基礎樣式

撰寫index.html基本代碼骨架（VS Code中輸入!，然后Enter，就可以快速生成HTML基本骨架）

P.S. 最好將自動生成的骨架中html的lang屬性設置為zh-CN（聲明是中文網頁），不然每次生成網頁，他都提示你翻不翻譯，影響開發效率。

設置80px為1rem，方便屏幕適配（前面配過了這步就不用管了）

導入flexible布局（flexible.js）

插入body（整個頁面）的背景圖

效果如下圖所示

2.4 頭部欄的制作

2.4.1 實現代碼

<header><h1>2018212229+朱明</h1><div class="showTime"></div> </header>  <script>// 格式：當前時間：2020年3月17-0時54分14秒var t = null;t = setTimeout(time, 1000);//開始運行function time() {clearTimeout(t);//清除定時器dt = new Date();var y = dt.getFullYear();var mt = dt.getMonth() + 1;var day = dt.getDate();var h = dt.getHours();//獲取時var m = dt.getMinutes();//獲取分var s = dt.getSeconds();//獲取秒document.querySelector(".showTime").innerHTML = '當前時間：' + y + "年" + mt + "月" + day + "-" + h + "時" + m + "分" + s + "秒";t = setTimeout(time, 1000); //設定定時器，循環運行 } </script> // less中的代碼 header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat;background-size: 100% 100%;h1 {font-size: .475rem;color: #FFF;text-align: center;line-height: 1rem;}.showTime {position: absolute;right: .375rem;top: 0;line-height: .9375rem;color: rgba(255, 255, 255, 0.7);font-size: .25rem;} }

2.4.2 步驟

增加頭部欄（header），并在其中增加標題（h1）和showTime模塊區域（div）

用JavaScript實現showTime模塊功能

當前實現的頁面效果如下圖所示，不符合預期效果

當前代碼如下：

經原因分析，h1默認占一行，雖然父標簽header設置了position為relative，showTime()模塊position為absolute還不行，還需設置top值，我們增加less代碼：top: 0

問題解決。

2.5 主體部分的制作

2.5.1 實現代碼

<section class="mainbox"><div class="column"><div class="panel bar"><h2>柱形圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line"><h2>折線圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie"><h2>餅狀圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div></div><div class="column"><div class="no"><div class="no-hd"><ul><li>123123</li><li>123123</li></ul></div><div class="no-bd"><ul><li>前端需求人數</li><li>市場供應人數</li></ul></div></div><div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div><div class="chart">地圖模塊</div></div></div><div class="column"><div class="panel bar1"><h2>柱形圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel line1"><h2>折線圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div><div class="panel pie1"><h2>餅狀圖-就業行業</h2><div class="chart"></div><div class="panel-footer"></div></div></div> </section> // less代碼 // 字體聲明 @font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF); }// 頁面主體部分 .mainbox {display: flex;min-width: 1024px;max-width: 1920px;margin: 0 auto;padding: .125rem .125rem 0;.column {flex: 3;}.column:nth-child(2) {flex: 5;margin: 0 .125rem .1875rem;}// 全部的圖表模塊.panel {position: relative;height: 3.875rem;border: 1px solid rgba(25, 186, 139, 0.17);padding: 0 .1875rem .5rem;margin-bottom: .1875rem;background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);&::before {position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;;content: "";}&::after {position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;;content: "";}.panel-footer {position: absolute;left: 0;bottom: 0;width: 100%;&::before {position: absolute;bottom: 0;left: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}&::after {position: absolute;bottom: 0;right: 0;content: "";width: 10px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}}h2 {height: .6rem;color: #FFF;line-height: .6rem;text-align: center;font-size: 0.25rem;font-weight: 400;}.chart {height: 3rem;} } }// no數字模塊 .no {background: rgba(101, 132, 226, 0.1);padding: .1875rem;.no-hd {position: relative;border: 1px solid rgba(25, 186, 139, 0.17);&::before {position: absolute;top: 0;left: 0;content: "";width: 25px;height: 15px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}&::after {position: absolute;bottom: 0;right: 0;content: "";width: 25px;height: 15px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}ul {display: flex;li {position: relative;flex: 1;list-style: none;height: 1rem;font-size: .875rem;color: #ffeb7b;text-align: center;font-family: 'electronicFont';}li:nth-child(1)::after {content: "";position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);}}}.no-bd {ul {display: flex;li {position: relative;flex: 1;list-style: none;height: .5rem;font-size: .225rem;color: rgba(255, 255, 255, 0.7);text-align: center;padding-top: .125rem;}}} }// 地圖部分樣式 .map {position: relative;height: 10.125rem;.map1 {width: 6.475rem;height: 6.475rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/map.png);background-size: 100% 100%;opacity: 0.3;}.map2 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8.0375rem;height: 8.0375rem;background: url(../images/lbx.png);background-size: 100% 100%;animation: rotate1 15s linear infinite;opacity: 0.6;}@keyframes rotate1 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}.map3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 7.075rem;height: 7.075rem;background: url(../images/jt.png);background-size: 100% 100%;animation: rotate2 10s linear infinite;opacity: 0.6;}@keyframes rotate2 {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}.chart {position: absolute;top: 0;left: 0;z-index: 5;height: 10.125rem;width: 100%;} }

2.5.2 左側的制作

先制作底層，插入背景圖，然后加一個0.03透明度的白底背景顏色

通過設置panel的before和after來制作上方角邊框效果

我們放置一個div置于panel的底部，然后設置該div的after和before來制作下方角邊框效果

加入標題（h2）和放置圖表的區域（div）

下面兩個區域也是這樣做，我們CV一下，然后修改部分代碼，最終效果如下圖所示。

2.5.3 右側的制作

這部分與左側一樣，我們CV一下，代碼都可以完全不改，效果如下圖所示。

2.5.4 中間上半部分的制作

先做中間的上面部分，我們稱為no部分，先準備一下底層div的背景

然后采用flex布局，分為兩部分展示兩個數字

然后我們導入字體，在less文件前面聲明font路徑

然后我們下面調用剛聲明的字體即可

將no（div）中的no-hd（div）展示的數字字體修改為我們導入的字體，效果如下

然后我們還要解決中間的小豎線，我們給li標簽的after加上50%的邊框即可

但是我們不想讓第二個li的after也產生豎線

我們將less的樣式限制第一個li標簽就好了，下面是改善的代碼

解決最后的效果如下圖所示

那我們經過上面的操作，很容易就寫出剩余的部分，我們直接貼出代碼

上半部分最終的效果如下圖所示

2.5.5 中間下半部分的制作

該部分我們命名為map模塊，我們先制作最底部div（map1）的背景圖

實現最底部div的效果如下

再新建一個map2的div，我們進行動畫的一些配置

動圖實現效果因為動圖展示不了的原因，我們就只能放一個靜態圖片了

接下來我們開始制作map3的div，也是動圖，我們進行相應的配置

最終效果實現如下

2.5.6 每個部分chart的制作

（1）中間的中國地圖實現

我們在index.js中寫好所需的js代碼，并采用即時執行函數，節省變量名

index.html中引入index.js以及echarts.min.js插件

效果實現完成

（2）兩側的柱形圖、折線圖和餅圖實現

引入中國地圖china.js插件和MmyMap.js插件（通過ECharts社區下載的樣式）

最終的效果如圖所示

2.5.7 頁面適配

最后我們再加上一段代碼，保證一下響應式布局

// less代碼 /* 約束屏幕尺寸 */ @media screen and (max-width: 1024px) {html {font-size: 42px !important;} } @media screen and (min-width: 1920px) {html {font-size: 80px !important;} }

項目完成。

三、后置寄語

如果你不是很深入學習js或者css的話，很多像@media screen、(function() {})();、nth-child()::after、&::after、:before等等等等，你可能完全不熟悉，或者不知道用法，這個沒關系。

如果你不是想精通前端，就沒必要學的很深，只要會一些基礎的語法，然后要實現什么功能就搜索怎么實現，現學就好。

所以本文沒有單獨拎出來一些點進行詳細的講解，可能你看的云里霧里（精通一門語言就會好一點），耐著性子多看看即可。

結束。By：zm

總結

以上是生活随笔為你收集整理的基于ECharts的数据大屏制作的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：于学军理事长莅临2023玉米深加工产业展
下一篇： Divi WordPress企业建站主题