基echarts實現的地圖,大數據數據可視化

所屬分類:UI-圖表,布局

 5494  58  查看評論 (2)
分享到微信朋友圈
X
基echarts實現的地圖,大數據數據可視化 ie兼容12

更新時間:2020-01-15 09:59:39

可視化項目:

1、課程目標:

- 實踐css布局相關技術

- 實踐jquery相關技術

- 掌握echarts的基本使用

2、項目介紹

我們要完成這個項目:需要使用一些基礎的DIV+CSS布局,還引入了一些C3技術,還引入了各類圖表的繪制,以及高級的地圖數據可視化案例。主要功能有:餅狀圖、柱狀圖、線形圖、地圖 ...

需要具備知識:

完成該項目需要具備以下知識:

- div + css 布局

- flex 布局

- css3動畫

- css3漸變

- css3邊框圖片

- 原生js + jquery 使用

- rem適配

- echarts基礎

3、Echarts-介紹

地址:https://www.echartsjs.com/zh/index.html

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

理解:實際上就是一個JS插件,可以運行在PC和移動設備,兼容主流瀏覽器,提供非常多的圖表(折線圖,柱狀圖,散點圖,餅圖,K線圖)

4、Echarts-體驗

1、下載:下載echarts  https://github.com/apache/incubator-echarts/tree/4.5.0  

2、進入echarts dist/echarts.min.js【引入】

3、準備一個具備大?。▽捀撸┑?DOM

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

4、初始化echart實例

通過:echarts.init實例化一個容器(內部返回)

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

5、指定圖表的配置項和數據 (根據文檔提供示例找到option)

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'
    }]
};

6、使用剛指定的配置項和數據顯示圖表

myChart.setOption(option);

5、Echarts-基礎配置

需要了解的主要配置:series xAxis yAxis grid tooltip title legend color 

大致劃分兩大類,有軸的和無軸的

- series

 - 系列列表。每個系列通過 type 決定自己的圖表類型

 - 大白話:圖標數據,指定什么類型的圖標,可以多個圖表重疊。

- xAxis:直角坐標系 grid 中的 x 軸

- yAxis:直角坐標系 grid 中的 y 軸【Y依賴數據顯示】

- grid:直角坐標系內繪圖網格

- title:標題組件

- tooltip:提示框組件【鼠標放上顯示】

- legend:圖例組件【需要數據有name屬性】

- color:調色盤顏色列表【數組傳遞】

演示代碼:

var option = {
    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '用戶注冊',
        data: [820, 932, 901, 934, 9222, 1330, 1320],
        type: 'line'
    }, {
        name: '用戶數據',
        data: [820, 932, 600, 934, 1290, 1330, 1320],
        type: "bar",
    }],
    grid: {
        show: true,
        // top : 100
    },
    tooltip: {
        trigger: "axis"
    },
    title: {
        text: '年度統計'
    },
    color: ['red', 'yellow'],
    legend: {
        data: ['用戶注冊', '用戶數據']
    }
};

6、REM適配

- 設計稿是1920px ,約定rem基準值為 24px (基準值html的font-size)?!静煌O配等比顯示,例如320和375等設備】

- [1024-1920]

- 那么:設備寬度與rem基準值比例為 80 。

- 結論:適配設備的時候保持80的比例即可。

- 將來:換算rem單位的時候,使用24px基準值即可。

實現代碼,在頁面底部加載index.js文件實現動態設置基準值邏輯:

【不用媒體查詢,需要查詢區間,如果用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();
       }
   })();

注意:書寫CSS代碼,讓px轉換rem單位,使用一個cscode插件 cssrem

- vscode插件搜索cssrem,進行安裝既可

- 需要在設置中cssrem換算的時候使用80的比例

       // rem換算

       "cssrem.rootFontSize": 24,//【計算時的基準值】

       "cssrem.fixedDigits":// 3,【取三位小數】

       "cssrem.autoRemovePrefixZero": false,//【是否去除0】

       1920設計稿,比例80,基準值24,計算式可能有小數,很多位,保留3為有效小數,不去除0,例如(0.333);

7、基礎布局

html結構

<div class="viewport">
    <div class="column">
        <!--概覽-->
        <div class="overview panel">

        </div>
        <!--監控-->
        <div class="monitor panel">

        </div>

        <!--點位-->
        <div class="point panel">

        </div>
    </div>
    <div class="column">
        <!-- 地圖 -->
        <div class="map">

        </div>
        <!-- 用戶 -->
        <div class="users panel">

        </div>
        <div class="column">
            <!-- 訂單 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 篩選 -->
                    <div class="filter">

                    </div>
                    <!-- 數據 -->
                    <div class="data">

                    </div>
                </div>
            </div>
            <!-- 銷售額 -->
            <div class="sales panel">

            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">

            </div>
            <!-- 排行榜 -->
            <div class="top panel">

            </div>
        </div>
    </div>

- body 設置背景圖 ,行高1.15,字體12px,內外邊距清除

- viewport 主體容器,限制最小寬度1024px,與最大寬度1920px,最小高度780px。

 - 需要居中顯示

 - 使用logo.png做為背景圖,在容器內顯示

 - 內間距 88px 20px 0

- column 列容器,分三列,占比 3:4:3

 - 中間容器外間距  32px  20px 0

css樣式:

 /* 基礎布局 */
   body{
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
     font-size: 0.5rem;
     line-height: 1.15;
     background: url(../images/bg.jpg) no-repeat 0 0 / cover;
   }
   h4,h3,ul{
     margin: 0;
     padding: 0;
     font-weight: normal;
   }
   ul{
     list-style: none;
   }
   a{
     text-decoration: none;
   }
   .viewport{
     max-width: 1920px;
     min-width: 1024px;
     margin: 0 auto;
     min-height: 780px;
     padding: 3.667rem 0.833rem 0;
     background: url(../images/logo.png) no-repeat 0 0 / contain;
     display: flex;
   }
   .column{
     flex: 3;
     position: relative;
   }
   .column:nth-child(2){
     flex: 4;
     margin: 1.333rem 0.833rem 0;
   }

8、邊框圖片

css3中自適應邊框圖片運用:

組合寫法:

border-image: url("images/border.jpg") 167/20px round;

拆分寫法:

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解釋:

- 邊框圖片資源地址

- 裁剪尺寸(上 右 下 左)單位默認px,可使用百分百。

- 邊框圖片的寬度,默認邊框的寬度。

- 平鋪方式:

 - stretch 拉伸(默認)

 - repeat 平鋪,從邊框的中心向兩側開始平鋪,會出現不完整的圖片。

 - round 環繞,是完整的使用切割后的圖片進行平鋪。

DEMO代碼:

 <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>邊框圖片</title>
       <style>
           ul{
               margin: 0;
               padding: 0;
               list-style: none;
           }
           li{
               width: 350px;
               height: 160px;
               border: 20px solid #ccc;
               margin-top: 20px;
           }
           li:nth-child(1){
               /*border-image: url("images/border.jpg") 167/20px round;*/
               border-image-source: url("images/border.jpg");
               border-image-slice: 167 167 167 167;
               border-image-width: 20px;
               /*環繞  是完整的使用切割后的圖片進行平鋪*/                    
               border-image-repeat: round; 
           }
           li:nth-child(2){
               /*平鋪 從邊框的中心向兩側開始平鋪 會出現不完整的圖片*/                                         border-image: url("images/border.jpg") 167/20px repeat;
           }
           li:nth-child(3){
               /*默認的平鋪方式*/
               border-image: url("images/border.jpg") 167/20px stretch;
           }
       </style>
   </head>
   <body>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   </body>
   </html>

9、公用面板樣式

所有的面板的基礎樣式是一致的,提前布局好。

- 面板 .panel :box-sizing,邊框圖,大小,定位【51 38 21 132】

- 容器 .inner:padding:24,36,定位外部拉寬

- 標題 h3:20px,顏色

 /* 面板樣式 */
   .panel{
     box-sizing: border-box;
     border: 2rem solid transparent;
     border-width: 2.125rem 1.583rem 0.833rem 5.5rem;
     border-image: url(../images/border.png) 51 38 21 132;
     margin-bottom: 0.833rem;
     position: relative;
   }
   .panel .inner{
     padding: 1rem 1.5rem;
     position: absolute;
     top: -2.125rem;
     right: -1.583rem;
     bottom: -0.833rem;
     left: -5.5rem;
   }
   .panel h3{
     font-size: 0.833rem;
     color: #fff;
   }

10、概覽區域-布局

html結構:

<div>
    <div>
        <div>
            <h4>2,190</h4>
            <span>
                 <i  ></i>
                 設備總數
               </span>
        </div>
        <div>
            <h4>190</h4>
            <span>
                 <i  ></i>
                 季度新增
               </span>
        </div>
        <div>
            <h4>3,001</h4>
            <span>
                 <i  ></i>
                 運營設備
               </span>
        </div>
        <div>
            <h4>108</h4>
            <span>
                 <i  ></i>
                 異常設備
               </span>
        </div>
    </div>
</div>

樣式描述:

- 容器高度 110px

- h4字體  28px   #fff   左邊距 4.8px   下間隙 8px

- span字體  16px  #4c9bfd

- 注意:引入圖標地址(fonts文件夾里面的css)

   /* 概覽區域 */
   .overview{
     height: 4.583rem;
   }
   .overview .inner{
     display: flex;
     justify-content: space-between;
   }
   .overview h4{
     font-size: 1.167rem;
     padding-left: 0.2rem;
     color: #fff;
     margin-bottom: 0.333rem
   }
   .overview span{
     font-size: 0.667rem;
     color: #4c9bfd;
   }

11、監控區域-布局

html結構:

<!--監控-->
<div class="monitor panel">
    <div class="inner">
        <div class="tabs">
            <a href="javascript:;" data-index="0" class="active">故障設備監控</a>
            <a href="javascript:;" data-index="1">異常設備監控</a>
        </div>
        <div class="content" style="display: block;">
            <div class="head">
                <span class="col">故障時間</span>
                <span class="col">設備地址</span>
                <span class="col">異常代碼</span>
            </div>
            <div class="marquee-view">
                <div class="marquee">
                    <div class="row">
                        <span class="col">20180701</span>
                        <span class="col">11北京市昌平西路金燕龍寫字樓</span>
                        <span class="col">1000001</span>
                        <span class="icon-dot"></span>
                    </div>

                </div>
            </div>

結構解釋:

- .tabs  標簽選項   加上active激活選項  默認激活第一個選項

- .content  切換內容  加上顯示內容   默認激活第一個內容

樣式描述:

- .inner 容器內間距  24px  0

- .tabs 容器內間距 0 36px

 - a 容器  顏色: #1950c4  內間距:0 27px  字體:18px

 - 第一個a容器  去除左側內間距   加上右側2px寬度邊框#00f2f1

 - 激活的時候  顏色白色

- .content容器

 - 占滿剩余高度  flex:1

 - 默認隱藏

- .head 容器

 - 行高 1.05  背景 rgba(255, 255, 255, 0.1)  內間距  12px 36px  顏色 #68d8fe 字體大小 14px

- row 容器

 - 行高 1.05  內間距  12px 36px  顏色 #68d8ff 字體大小 12px

 - .icon-dot 字體圖標   絕對定位  左邊0.64rem  透明度0

 - 鼠標經過后:背景 rgba(255, 255, 255, 0.1)  透明度1

- col容器

 - 寬度:3.2rem   8.4rem    3.2rem

 - 第二個col   一行不換行  溢出  省略

/* 監控 */
.monitor {
	height:20 rem;
}
.monitor.inner {
	padding:1 rem 0;
	display:flex;
	flex - direction:column;
}
.monitor.tabs {
	padding:0 1.5 rem;
	margin - bottom:0.75 rem;
}
.monitor.tabs a {
	color:#1950c4;
	font-size:0.75rem;
	padding:0 1.125rem;
}
.monitor .tabs a:first-child {
	border-right:0.083rem solid # 00 f2f1;
	padding - left:0;
}
.monitor.tabs a.active {
	color:#fff;
}
.monitor.content {
	flex:1;
	display:none;
	position:relative;
}
.monitor.head {
	background:rgba(255,255,255,0.1);
	font - size:0.583 rem;
	padding:0.5 rem 1.5 rem;
	color:#68d8fe;
	display:flex;
	justify-content:space-between;
	line-height:1.05;
}
.monitor .col:nth-child(1) {
	width:3.2rem;
}
.monitor .col:nth-child(2) {
	width:8.4rem;
	/* 不換行  一行省略*/
    white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.monitor .col:nth-child(3) {
	width:3.2rem;
}
.monitor .marquee-view {
	position:absolute;
	top:1.6rem;
	bottom:0;
	width:100%;
	overflow:hidden;
}
.monitor .row {
	line-height:1.05;
	padding:0.5rem 1.5rem;
	color:# 61 a8ff;
	font - size:0.5 rem;
	position:relative;
	display:flex;
	justify - content:space - between;
}
.monitor.row:hover {
	color:#68d8ff;
	background:rgba(255,255,255,0.1);
}
.monitor .row:hover .icon-dot {
	opacity:1;
}
.monitor .icon-dot {
	position:absolute;
	left:0.64rem;
	opacity:0;
}
.monitor .marquee-view {
	position:absolute;
	top:1.6rem;
	bottom:0;
	width:100%;
	overflow:hidden;
}
.monitor .row {
	line-height:1.05;
	padding:0.5rem 1.5rem;
	color:# 61 a8ff;
	font - size:0.5 rem;
	position:relative;
	display:flex;
	justify - content:space - between;
}
.monitor.row:hover {
	color:#68d8ff;
	background:rgba(255,255,255,0.1);
}
.monitor .row:hover .icon-dot {
	opacity:1;
}
.monitor .icon-dot {
	position:absolute;
	left:0.64rem;
	opacity:0;
}

上午回顧:

echarts:是一個JavaScript插件庫,圖標插件

應用:下載==>引入(dist/echarts.min.js),傳入對象,設置,設置配置

rem:1024-1920:獲取大小,設置比例,設置字體

邊框:border-images:url(地址) 分割大小/寬度 拉伸;

邊框,結構

點擊切換

12、監控區域-效果

切換功能:

- 綁定 標簽頁點擊 事件

- 點擊的時候獲取data-index的值

- 當前容器加active其他容器移除active

- index對應的內容容器顯示其他容器隱藏

// 切換
$('.monitor').on('click','.tabs a', function(){
   $(this).addClass('active').siblings().removeClass('active')
   $('.monitor .content').eq(this.dataset.index).show().siblings('.content').hide()
})

動畫功能:

- 實現思路:

 - 先克隆列表,追加在后面

 - marquee-view 占滿剩余高度,溢出隱藏

   - 絕對定位,top 1.6rem bottom 0 

   - 寬度100%,溢出隱藏

 - 使用animation實現動畫

 - 使用 translateY 向上位移 50%

 - 動畫時間15s,勻速播放,循環執行。

js代碼:

// 動畫
$('.marquee').each(function() {
    var $cloneList = $(this).children().clone()
    $(this).append($cloneList)
})

css代碼:

/* 動畫 */
.monitor.marquee - view {
        position: absolute;
        width: 100 % ;
        top: 1.6 rem;
        bottom: 0;
        overflow: hidden;
    }
    .monitor.marquee {
        animation: scroll - top 15 s linear infinite;
    }
    .monitor.marquee: hover {
        animation - play - state: paused;
    }
@keyframes scroll - top {
    0 % {}
    100 % {
        transform: translateY(-50 % );
    }
 }
相關插件-圖表,布局

echarts力引導圖關聯關系圖(適用于ie8)

適用于ie8的力引導圖,是屬于ets2.0的版本,在ie8上正常使用,簡單易修改,需要傳如兩個數組即對象和數組
  圖表
 4151  54

百度ets動態添加數據

通過點擊不同按鈕,進行ajax請求對ets進行數據填充.
  圖表
 21409  202

類似芝麻信用占比的插件

這是一塊款信用占比的插件
  圖表
 13783  203

jquery_html5_圖表

jquery_html5_圖表
  圖表
 27270  206

討論這個項目(2)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    小瘋子 0
    2020/1/19 22:40:13
    為啥在線預覽的時候地圖出不來
        areyouOk0
        2020/1/20 1:17:20
        我這里測試正常的哦。
    回復
取消回復
cba联赛上午开发 快乐双彩综合走势图 股票分析师要考什么证 配资公司配资的盈利点 北京pk10手机计划软件 彩票幸运农场 好股票推荐软件 天津快乐10分彩票网站 山西快乐十分开奖结果双 河北十一定牛直选走势 期货配资网上开户