整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          分享一個大數據可視化大屏看板案例(echarts實現含中國地圖)

          著大數據時代的來臨,社會對大數據人才的需求也日益旺盛,自然少不了我們前端工程師,我們前端工程師能做什么呢?這個自然就是做大數據可視化了,數據再多,沒有很直觀的呈現那也是白搭。現在好多政府企事業單位對大屏可視化的項目需求日益旺盛,這無疑給我們前端工程更多的機會,那我們如何入手做一款漂亮絢麗的大數據看板呢。

          首先展示下我這個項目案例的效果圖


          這個案例是不是直觀呢:

          • 以中國地圖的形式展示設備網絡分布
          • 各種餅狀圖、柱狀圖、折線圖數據刷新的效果圖
          • 以及各種數據匯總的列表效果

          是不是很高科技上檔次呢,在來看一段視頻的動態效果:


          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


          這款項目是基于echarts實現的

          echarts正如官網所說,一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定制的數據可視化圖表。

          具有以下特點:

          • 豐富的可視化類型,提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖等
          • 多種數據格式無需轉換直接使用
          • 千萬數據的前端展現
          • 移動端優化
          • 多渲染方案,跨平臺使用!
          • 深度的交互式數據探索
          • 多維數據的支持以及豐富的視覺編碼手段
          • 動態數據
          • 絢麗的特效
          • 通過 GL 實現更多更強大絢麗的三維可視化

          更多介紹請查看官網 https://www.echartsjs.com/zh/index.html

          這個項目你需要用到的技術

          其實用到的技術很簡單,掌握基礎的前端就行

          • html 和 css 布局相關的知識
          • jQuery相關基礎內容
          • 掌握echarts的基本內容

          代碼部分

          Echart引用代碼示例

          1、引用 echarts.min.js 文件2、準備div容器

          <div id="main"></div>
          

          3、初始化 echart 實例

          var myChart = echarts.init(document.getElementById('main'));
          

          4、初始化圖表數據,示例代碼如下

          var option = {
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line'
              }]
          };
          

          5、顯示圖表

          myChart.setOption(option);
          

          適配說明(rem)

          本案例設計稿寬度是1920px,rem 初始基準是24px。

          1、如何做適配呢?

          保持設備寬度與rem基準值比例為 80 即可

          2、這里用JS進行初始化基準,窗口大小改變,就會進行調整,示例代碼如下:

          (function () {
              // 1、頁面一加載就要知道頁面寬度計算
              var setFont = function () {
                  // 因為要定義變量可能和別的變量相互沖突,污染,所有用自調用函數
                  var html = document.documentElement;// 獲取html
                  // 獲取寬度
                  var width = html.clientWidth;
          
                  // 判斷
                  if (width < 1024) width = 1024
                  if (width > 1920) width = 1920
                  // 設置html的基準值
                  var fontSize = width / 80 + 'px';
                  // 設置給html
                  html.style.fontSize = fontSize;
              }
              setFont();
              // 2、頁面改變的時候也需要設置
              // 尺寸改變事件
              window.onresize = function () {
                  setFont();
              }
          })();
          

          注:計算式可能有小數,很多位,保留3為有效小數,不去除0

          基于 flex 布局 和 原生CSS動畫

          這個頁面局基于flex彈性盒子布局,其他的內容都是基于原生的JS寫的,動畫效果基于CSS3。

          如何獲取本案例

          由于代碼比較多,就不在這一一列舉了,由于文章不太方便貼下載鏈接,那怎么獲取本案例的代碼呢?

          1. 首先關注“前端達人”頭條號
          2. 私信回復“大數據案例” 進行索取

          Echarts 無論是制作省份地圖還是區縣域地圖,他們的步驟都是基本一樣的。

          下面本人就 利用 Echarts 簡單繪制省份地圖 的步驟與經驗與各位分享一下。

          1、準備工作

          • 1.1 下載js靜態文件china.jsecharts.min.js

          • 1.2 下載中國各省、各市的 .json 文件省份或者地區的數據文件網址:https://github.com/longwosion/geojson-map-china

          2、獲取省份數據

          • 2.1 第一步:獲取XX省的地圖 json 數據文件(例:江蘇省:32.json)(是以各省身份證號 前兩位 開頭命名的)
          • 2.2 第二步:將獲取到的JSON文件 轉換 成 js 文件(江蘇省:jiangsu.js)
          • 2.3 第三步:修改轉換后的 js 文件 打開 js 文件添加變量 xx (這里本人命名習慣為 :(省名拼音小寫+Json)例:jiangsuJson)var xx = (js文件)
          • 例:
              var jiangsuJson = {"type": "FeatureCollection","cp":[118.8586,32.915], ........}保存 js 文件。

          3、在Django中編寫 HTML 代碼

          • 3.1 在<head> </head>中引入 js 文件
          <script type="text/javascript" src="/static/js/echarts.min.js"></script>
          <script type="text/javascript" src="/static/js/jiangsu.js"></script>
          • 3.2 在<body></body>中寫入作圖代碼
          <div>
              {# 標記 #}
               <a class="btn btn-success btn-sm" >江蘇省</a>
              {# 地圖代碼開始 #}
               <div class="x-body">
                   <!-- 為ECharts準備一個具備大小(寬高)的Dom -->
                   <div id="main" style="width: 949.75px;height:450px;"></div>
                   </div>
                              
                   <script type="text/javascript">
                         echarts.registerMap('jiangsu', jiangsuJson);
          
                         // 基于準備好的dom,初始化echarts實例
                         var myChart = echarts.init(document.getElementById('main'));
          
                         // 使用剛指定的配置項和數據顯示圖表。
                         myChart.setOption({
                             series: [{
                                 type: 'map',
                                 map: 'jiangsu'
                                 }]
                          });
                     </script>                    
          </div>
          • 3.3 運行代碼,就能看到結果

          4、總結

          其實只要按照本人上面的做法,就可以制作出來,本人繪不是很復雜,如果各位對省圖還需要其他顯示功能,大家不妨訪問 Echarts 的官網。

          開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目,包括技術、學習、實用與各種有趣的內容。本期推薦的是一個基于 JavaScript 的開源可視化圖表庫——Apache ECharts。

          ECharts是一個使用 JavaScript 實現的開源可視化庫,可以流暢地運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定制的數據可視化圖表。


          特性

          豐富的圖表類型:提供開箱即用的 20 多種圖表和十幾種組件,并且支持各種圖表以及組件的任意組合。

          強勁的渲染引擎:Canvas、SVG 雙引擎一鍵切換,增量渲染、流加載等技術實現千萬級數據的流暢交互。

          專業的數據分析:通過數據集管理數據,支持數據過濾、聚類、回歸,幫助實現同一份數據的多維度分析。

          優雅的可視化設計:默認設計遵從可視化原則,支持響應式設計,并且提供了靈活的配置項方便開發者定制。

          健康的開源社區:活躍的社區用戶保證了項目的健康發展,也貢獻了豐富的第三方插件滿足不同場景的需求。

          友好的無障礙訪問:智能生成的圖表描述和貼花圖案,幫助視力障礙人士了解圖表內容,讀懂圖表背后的故事。

          移動端優化:ECharts 針對移動端交互做了細致的優化,例如移動端小屏上適于用手指在坐標系中進行縮放、平移。


          快速上手

          1 獲取 Apache ECharts

          Apache ECharts 支持多種下載方式,你可以根據項目的實際情況選擇以下任意一種方式安裝。

          • 從 GitHub 獲取:

          apache/echarts 項目的 release 頁面可以找到各個版本的鏈接。點擊下載頁面下方 Assets 中的 Source code,解壓后 dist 目錄下的 echarts.js 即為包含完整 ECharts 功能的文件。

          https://github.com/apache/echarts/releases
          • 從 NPM 獲取:
          npm install echarts --save
          • 從 CDN 獲取:

          https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js,點擊并保存為 echarts.js 文件。

          2 引入 Apache ECharts

          在剛才保存 echarts.js 的目錄新建一個 index.html 文件,內容如下:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8" />
              <!-- 引入剛剛下載的 ECharts 文件 -->
              <script src="echarts.js"></script>
            </head>
          </html>

          打開這個 index.html,你會看到一片空白。但是不要擔心,打開控制臺確認沒有報錯信息,就可以進行下一步。

          3 繪制一個簡單的圖表

          在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之后,添加:

          <body>
            <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
            <div id="main" style="width: 600px;height:400px;"></div>
          </body>

          然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖,下面是完整代碼:

          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8" />
              <title>ECharts</title>
              <!-- 引入剛剛下載的 ECharts 文件 -->
              <script src="echarts.js"></script>
            </head>
            <body>
              <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
              <div id="main" style="width: 600px;height:400px;"></div>
              <script type="text/javascript">
                // 基于準備好的dom,初始化echarts實例
                var myChart = echarts.init(document.getElementById('main'));
          
                // 指定圖表的配置項和數據
                var option = {
                  title: {
                    text: 'ECharts 入門示例'
                  },
                  tooltip: {},
                  legend: {
                    data: ['銷量']
                  },
                  xAxis: {
                    data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
                  },
                  yAxis: {},
                  series: [
                    {
                      name: '銷量',
                      type: 'bar',
                      data: [5, 20, 36, 10, 10, 20]
                    }
                  ]
                };
          
                // 使用剛指定的配置項和數據顯示圖表。
                myChart.setOption(option);
              </script>
            </body>
          </html>

          這樣你的第一個圖表就誕生了!


          圖表示例

          折線圖

          折線圖堆疊

          堆疊面積圖

          漸變堆疊面積圖

          北京 AQI 可視化

          柱狀圖

          堆疊柱狀圖

          多 Y 軸

          堆疊條形圖

          餅圖

          南丁格爾玫瑰圖

          嵌套環形圖

          地理坐標/地圖

          地圖柱狀圖變形動畫

          關系圖

          人物關系圖(環形布局)

          NPM 依賴關系圖

          矩形樹圖

          磁盤占用

          旭日圖

          Drink Flavors

          平行坐標系

          AQI 分布(平行坐標)

          營養結構(平行坐標)

          散點矩陣和平行坐標

          —END—

          組件預覽地址:https://echarts.apache.org/examples/zh/index.html

          開源協議:Apache2.0

          開源地址:https://github.com/apache/echarts


          主站蜘蛛池模板: 麻豆一区二区99久久久久| 黑巨人与欧美精品一区| 超清无码一区二区三区| 一区二区高清在线观看| 亚洲av午夜精品一区二区三区| 无码人妻精品一区二区三区99不卡| 无码欧精品亚洲日韩一区夜夜嗨| 国产亚洲情侣一区二区无码AV| 久久综合精品不卡一区二区| 精品香蕉一区二区三区| 国产一区二区在线观看视频| 亚洲综合av永久无码精品一区二区 | 中文字幕精品无码一区二区| 日韩精品一区二区三区色欲AV| 日韩一区二区a片免费观看| 一区二区三区午夜| 在线中文字幕一区| 色综合视频一区二区三区 | 亚洲第一区精品日韩在线播放| 无码精品人妻一区二区三区免费看 | 日韩欧国产精品一区综合无码| 99无码人妻一区二区三区免费| 麻豆视传媒一区二区三区| 久久国产精品亚洲一区二区| 精品国产福利在线观看一区| 国产在线观看一区精品| 欧美日韩精品一区二区在线观看 | 午夜天堂一区人妻| 一区二区不卡久久精品| 亚洲日韩国产一区二区三区 | 精品一区二区ww| 国产成人午夜精品一区二区三区| 亚洲综合一区二区三区四区五区 | 在线观看国产一区亚洲bd| av一区二区三区人妻少妇| 视频一区视频二区日韩专区| 精品无码综合一区二区三区| 国产乱码精品一区二区三区中 | 亚洲午夜一区二区三区| 中文字幕国产一区| 国产MD视频一区二区三区|