基echarts实现的地图，大数据数据可视化

所属分类： JQ特效 UI 布局

查看演示立即下载

插件描述：利用ets做出大数据图表展示

更新时间：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-介绍

地址：/

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

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

4、初始化echart实例

通过：echarts.init实例化一个容器（内部返回）

1	`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、使用刚指定的配置项和数据显示图表

1	`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）。【不同设配等比显示，例如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中自适应边框图片运用：

组合写法：

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;

解释：

- 边框图片资源地址

- 裁剪尺寸（上右下左）单位默认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){
      &n                            特别申明：
			本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
			本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
			如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com


					


					
												
							
						        上一个特效：
						        H5音乐播放插件(原创)						    
							
						        下一个特效：
						        原生js实现图片拖动验证						    
						
					
				
			
			
									
				    
				        				            
				                
				                    
				                    Bootstrap后台管理系统模版
				                
				            
				        				            
				                
				                    
				                    jQuery bootstraps响应式招聘社交类网站模板
				                
				            
				        				            
				                
				                    
				                    jQuery bootstraps响应式多用途公司企业类网站模板
				                
				            
				        				            
				                
				                    
				                    jQuery自适应无限滚动瀑布流
				                
				            
				        				            
				                
				                    
				                    黄蓝色大图网站模板
				                
				            
				        				        
				    
							
		

		





		2018-2023 凤凰网络版权所有.