Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲另类视频,日本一区二区三区四区视频,热re91久久精品国产91热 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          分享一個(gè)大數(shù)據(jù)可視化大屏看板案例（echarts實(shí)現(xiàn)含中國地圖）
          
        
           
          
	
	
          
		
                        
          著大數(shù)據(jù)時(shí)代的來臨，社會(huì)對(duì)大數(shù)據(jù)人才的需求也日益旺盛，自然少不了我們前端工程師，我們前端工程師能做什么呢？這個(gè)自然就是做大數(shù)據(jù)可視化了，數(shù)據(jù)再多，沒有很直觀的呈現(xiàn)那也是白搭。現(xiàn)在好多政府企事業(yè)單位對(duì)大屏可視化的項(xiàng)目需求日益旺盛，這無疑給我們前端工程更多的機(jī)會(huì)，那我們?nèi)绾稳胧肿鲆豢钇两k麗的大數(shù)據(jù)看板呢。
          首先展示下我這個(gè)項(xiàng)目案例的效果圖

          這個(gè)案例是不是直觀呢：
          • 以中國地圖的形式展示設(shè)備網(wǎng)絡(luò)分布
          • 各種餅狀圖、柱狀圖、折線圖數(shù)據(jù)刷新的效果圖
          • 以及各種數(shù)據(jù)匯總的列表效果
          是不是很高科技上檔次呢，在來看一段視頻的動(dòng)態(tài)效果：

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

          這款項(xiàng)目是基于echarts實(shí)現(xiàn)的
          echarts正如官網(wǎng)所說，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
          具有以下特點(diǎn)：
          • 豐富的可視化類型，提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖等
          • 多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用
          • 千萬數(shù)據(jù)的前端展現(xiàn)
          • 移動(dòng)端優(yōu)化
          • 多渲染方案，跨平臺(tái)使用！
          • 深度的交互式數(shù)據(jù)探索
          • 多維數(shù)據(jù)的支持以及豐富的視覺編碼手段
          • 動(dòng)態(tài)數(shù)據(jù)
          • 絢麗的特效
          • 通過 GL 實(shí)現(xiàn)更多更強(qiáng)大絢麗的三維可視化
          更多介紹請(qǐng)查看官網(wǎng) https://www.echartsjs.com/zh/index.html
          這個(gè)項(xiàng)目你需要用到的技術(shù)
          其實(shí)用到的技術(shù)很簡單，掌握基礎(chǔ)的前端就行
          • html 和 css 布局相關(guān)的知識(shí)
          • jQuery相關(guān)基礎(chǔ)內(nèi)容
          • 掌握echarts的基本內(nèi)容
          代碼部分
          Echart引用代碼示例
          1、引用 echarts.min.js 文件2、準(zhǔn)備div容器
          <div id="main"></div>

          3、初始化 echart 實(shí)例
          var myChart = echarts.init(document.getElementById('main'));

          4、初始化圖表數(shù)據(jù)，示例代碼如下
          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）
          本案例設(shè)計(jì)稿寬度是1920px，rem 初始基準(zhǔn)是24px。
          1、如何做適配呢？
          保持設(shè)備寬度與rem基準(zhǔn)值比例為 80 即可
          2、這里用JS進(jìn)行初始化基準(zhǔn)，窗口大小改變，就會(huì)進(jìn)行調(diào)整，示例代碼如下：
          (function () {
    // 1、頁面一加載就要知道頁面寬度計(jì)算
    var setFont = function () {
        // 因?yàn)橐x變量可能和別的變量相互沖突，污染，所有用自調(diào)用函數(shù)
        var html = document.documentElement;// 獲取html
        // 獲取寬度
        var width = html.clientWidth;

        // 判斷
        if (width < 1024) width = 1024
        if (width > 1920) width = 1920
        // 設(shè)置html的基準(zhǔn)值
        var fontSize = width / 80 + 'px';
        // 設(shè)置給html
        html.style.fontSize = fontSize;
    }
    setFont();
    // 2、頁面改變的時(shí)候也需要設(shè)置
    // 尺寸改變事件
    window.onresize = function () {
        setFont();
    }
})();

          注：計(jì)算式可能有小數(shù)，很多位，保留3為有效小數(shù)，不去除0
          基于 flex 布局 和 原生CSS動(dòng)畫
          這個(gè)頁面局基于flex彈性盒子布局，其他的內(nèi)容都是基于原生的JS寫的，動(dòng)畫效果基于CSS3。
          如何獲取本案例
          由于代碼比較多，就不在這一一列舉了，由于文章不太方便貼下載鏈接，那怎么獲取本案例的代碼呢？
          1. 首先關(guān)注“前端達(dá)人”頭條號(hào)
          2. 私信回復(fù)“大數(shù)據(jù)案例” 進(jìn)行索取
           Echarts 無論是制作省份地圖還是區(qū)縣域地圖，他們的步驟都是基本一樣的。
          下面本人就 利用 Echarts 簡單繪制省份地圖 的步驟與經(jīng)驗(yàn)與各位分享一下。
          1、準(zhǔn)備工作
          • 1.1 下載js靜態(tài)文件china.jsecharts.min.js
          • 1.2 下載中國各省、各市的 .json 文件省份或者地區(qū)的數(shù)據(jù)文件網(wǎng)址：https://github.com/longwosion/geojson-map-china
          2、獲取省份數(shù)據(jù)
          • 2.1 第一步：獲取XX省的地圖 json 數(shù)據(jù)文件（例：江蘇省：32.json）（是以各省身份證號(hào) 前兩位 開頭命名的）
          • 2.2 第二步：將獲取到的JSON文件 轉(zhuǎn)換 成 js 文件（江蘇省：jiangsu.js）
          • 2.3 第三步：修改轉(zhuǎn)換后的 js 文件 打開 js 文件添加變量 xx (這里本人命名習(xí)慣為 ：（省名拼音小寫+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>
    {# 標(biāo)記 #}
     <a class="btn btn-success btn-sm" >江蘇省</a>
    {# 地圖代碼開始 #}
     <div class="x-body">
         <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
         <div id="main" style="width: 949.75px;height:450px;"></div>
         </div>
                    
         <script type="text/javascript">
               echarts.registerMap('jiangsu', jiangsuJson);

               // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
               var myChart = echarts.init(document.getElementById('main'));

               // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
               myChart.setOption({
                   series: [{
                       type: 'map',
                       map: 'jiangsu'
                       }]
                });
           </script>                    
</div>
          • 3.3 運(yùn)行代碼，就能看到結(jié)果
          4、總結(jié)
          其實(shí)只要按照本人上面的做法，就可以制作出來，本人繪不是很復(fù)雜，如果各位對(duì)省圖還需要其他顯示功能，大家不妨訪問 Echarts 的官網(wǎng)。
          開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)基于 JavaScript 的開源可視化圖表庫——Apache ECharts。
          ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢地運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

          特性
          豐富的圖表類型：提供開箱即用的 20 多種圖表和十幾種組件，并且支持各種圖表以及組件的任意組合。
          強(qiáng)勁的渲染引擎：Canvas、SVG 雙引擎一鍵切換，增量渲染、流加載等技術(shù)實(shí)現(xiàn)千萬級(jí)數(shù)據(jù)的流暢交互。
          專業(yè)的數(shù)據(jù)分析：通過數(shù)據(jù)集管理數(shù)據(jù)，支持?jǐn)?shù)據(jù)過濾、聚類、回歸，幫助實(shí)現(xiàn)同一份數(shù)據(jù)的多維度分析。
          優(yōu)雅的可視化設(shè)計(jì)：默認(rèn)設(shè)計(jì)遵從可視化原則，支持響應(yīng)式設(shè)計(jì)，并且提供了靈活的配置項(xiàng)方便開發(fā)者定制。
          健康的開源社區(qū)：活躍的社區(qū)用戶保證了項(xiàng)目的健康發(fā)展，也貢獻(xiàn)了豐富的第三方插件滿足不同場(chǎng)景的需求。
          友好的無障礙訪問：智能生成的圖表描述和貼花圖案，幫助視力障礙人士了解圖表內(nèi)容，讀懂圖表背后的故事。
          移動(dòng)端優(yōu)化：ECharts 針對(duì)移動(dòng)端交互做了細(xì)致的優(yōu)化，例如移動(dòng)端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。

          快速上手
          1 獲取 Apache ECharts
          Apache ECharts 支持多種下載方式，你可以根據(jù)項(xiàng)目的實(shí)際情況選擇以下任意一種方式安裝。
          • 從 GitHub 獲取：
          apache/echarts 項(xiàng)目的 release 頁面可以找到各個(gè)版本的鏈接。點(diǎn)擊下載頁面下方 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，點(diǎn)擊并保存為 echarts.js 文件。
          2 引入 Apache ECharts
          在剛才保存 echarts.js 的目錄新建一個(gè) index.html 文件，內(nèi)容如下：
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>
          打開這個(gè) index.html，你會(huì)看到一片空白。但是不要擔(dān)心，打開控制臺(tái)確認(rèn)沒有報(bào)錯(cuò)信息，就可以進(jìn)行下一步。
          3 繪制一個(gè)簡單的圖表
          在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)定義了高寬的 DOM 容器。在剛才的例子 </head> 之后，添加：
          <body>
  <!-- 為 ECharts 準(zhǔn)備一個(gè)定義了寬高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>
          然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖，下面是完整代碼：
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 為 ECharts 準(zhǔn)備一個(gè)定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定圖表的配置項(xiàng)和數(shù)據(jù)
      var option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
      myChart.setOption(option);
    </script>
  </body>
</html>
          這樣你的第一個(gè)圖表就誕生了！

          圖表示例
          折線圖
          折線圖堆疊
          堆疊面積圖
          漸變堆疊面積圖
          北京 AQI 可視化
          柱狀圖
          堆疊柱狀圖
          多 Y 軸
          堆疊條形圖
          餅圖
          南丁格爾玫瑰圖
          嵌套環(huán)形圖
          地理坐標(biāo)/地圖
          地圖柱狀圖變形動(dòng)畫
          關(guān)系圖
          人物關(guān)系圖(環(huán)形布局)
          NPM 依賴關(guān)系圖
          矩形樹圖
          磁盤占用
          旭日?qǐng)D
          Drink Flavors
          平行坐標(biāo)系
          AQI 分布（平行坐標(biāo)）
          營養(yǎng)結(jié)構(gòu)（平行坐標(biāo)）
          散點(diǎn)矩陣和平行坐標(biāo)
          —END—
          組件預(yù)覽地址：https://echarts.apache.org/examples/zh/index.html
          開源協(xié)議：Apache2.0
          開源地址：https://github.com/apache/echarts
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产福利电影一区二区三区久久久久成人精品综合
|
国内精自品线一区91|
国内精品视频一区二区三区|
日韩精品成人一区二区三区|
日韩一区二区三区不卡视频|
精品人妻码一区二区三区|
国产免费一区二区视频|
日本免费精品一区二区三区|
无码精品一区二区三区|
成人区人妻精品一区二区三区|
亚洲一区二区三区免费视频
|
一区二区三区AV高清免费波多|
国产第一区二区三区在线观看|
福利一区二区视频|
国精产品一区一区三区MBA下载|
天码av无码一区二区三区四区|
久久精品国产一区二区三区不卡|
国产精品日本一区二区在线播放|
中文字幕在线一区二区在线|
亚洲av不卡一区二区三区
|
无码精品人妻一区二区三区漫画|
国产91精品一区二区麻豆网站
|
A国产一区二区免费入口|
四虎永久在线精品免费一区二区|
99精品久久精品一区二区|
日韩综合无码一区二区|
亚洲av乱码一区二区三区|
亚洲av乱码一区二区三区香蕉|
国产一区二区在线观看麻豆|
欧洲精品一区二区三区|
精品国产日韩亚洲一区在线
|
日韩精品电影一区|
日本一区二区三区在线视频观看免费|
国产综合无码一区二区三区|
中文字幕亚洲一区二区va在线|
日本一区二区三区爆乳|
无码国产精品一区二区高潮|
八戒久久精品一区二区三区
|
久久精品国内一区二区三区|
91国在线啪精品一区|
久久久久一区二区三区|