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

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

其他源码
资源状态:未测试 2020-01-27 其他源码 OKMG 百度已收录 已售 6 次 浏览 690 次
MG币:1
1MG=1元人民币,充值MG
期限 VIP购买价格: 1 MG
永久 VIP购买价格: 1 MG

非商业源码不提供技术支持,购买请确认是否拥有相应的技术能力!

如商用或企业需要,请联系平台客服付费定制开发。

不帮忙,不请教,不墨迹。简简单单资源分享平台!有问题加群探讨

特别声明 注册会员根据级别享有相关下载优惠,请仔细辨别。所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵, 你下载的资源和程序源码组件因其特殊性均为可复制品,所以不支持任何理由的退款兑现,请认真阅读本站声明和相关条款后再点击支付下载。
为响应国家净网行动,本站禁止投递黄、赌、毒、棋牌、游戏类相关内容!一经发现立即封号处理。本站举报热线:400-716-8908
  • 文章介绍
  • 评价建议
  • 基echarts实现的地图,大数据数据可视化

    更新时间: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)。【不同设配等比显示,例如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 % );
        }
     }
    

     

    Leave a Reply

  • 如本资源侵犯了您的权益,[email protected]!我们将在收到邮件的1个小时内处理完毕。

  • 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用!

  • OKMG(芒果源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售!

  • OKMG(芒果源码)客服QQ:29139260

  • OKMG(芒果源码)商务电话(仅对企业客户/个人用户请联系QQ客服):010-86463891

  • 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
  • 免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系客服
    开通VIP 享更多特权,建议使用 QQ 登录