数据可视化

介绍

  • 数据：一条的表现；一个对象一条数据；
    • 表现：列表；
    • 可视化：数值大小，摆列出一些形状；
  • 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。
  • 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

image.png

  • 技术：
    • div + css 布局、flex 布局、css3动画、css3渐变、css3边框图片、原生js + jquery 使用；
    • 【rem适配】、【echarts基础】
    • Bootstrap：适配三端
    • rem：等比适配（不仅仅是移动端）
  • rem适配范围：1024~1920 等比适配
  • 该项目：
    • 布局侧重理解、灵活CSS；课上不写布局css
    • 手写JS；ec配置！

rem适配

回顾

  • rem是什么？单位，大家都在用的单位！10px
  • rem背后是什么？基准值，也就是1rem==??px，来自HTML的fontSize
  • 那么：
    • HTML的fontSize变化，基准值就会变化；1rem
    • HTML的fontSize怎么就能随着屏幕变化而变化？
      • 媒体查询！@media screen and () {}
      • JS实现；flexible.js

JS实现

  • 屏幕范围 1024~1920px；
  • 基准值：1024/80~1920/80 （80是我们自己约定的，随便变！）——->12.8px~24px
    • 1024~1920屏幕宽度 如何获取？
    • 屏幕变化怎么监听到？
    • 计算的基准值设置给谁？
  1. <script src="js/index.js"></script>
  1. // 实现rem适配   DOM.style.width
  2. (function () {
  3.   var setFont = function () {
  4.     var html = document.documentElement;
  5.     var width = html.clientWidth;  // 简单回顾：offsetWdith
  6.     if (width < 1024) width = 1024
  7.     if (width > 1920) width = 1920
  8.     var fontSize = width / 80 + 'px'
  9.     html.style.fontSize = fontSize
  10.   }
  11.   setFont()
  12.   window.onresize = function () {
  13.     setFont()
  14.   }
  15. })()

插件cssrem

  • 设计稿1920px，基准值 1rem = 1920 /80 = 24px;
  • 如果在设计图上测量是 100px——————>转化为rem单位是多少？100 / 24 rem
  • 怎么计算？cssrem插件

image.png

image.png

  • 1.计算设计稿 / 约定值 ====>基准值
  • 2.把该数据值设置在cssrem插件里面

项目目录

image.png

  • css：样式文件
  • JS：JQ文件、其他JS文件、index.js主入口；
  • fonts：字体图标

页面布局

  • html
  1. <body>
  2.     <div class="viewport">
  3.         <div class="column">
  4.             <!--概览-->                                    
  5.             <div></div>
  7.             <!--监控-->                                    
  8.             <div></div> 
  10.             <!--点位-->                                    
  11.             <div></div>                                           
  12.         </div>
  14.         <div class="column">
  15.             <!--地图-->                                    
  16.             <div></div>
  18.             <!--用户-->                                    
  19.             <div></div>                                          
  20.         </div>
  23.         <div class="column">
  24.             <!--订单-->                                    
  25.             <div></div>
  26.             <!--销售-->                                    
  27.             <div></div>                                  
  28.             <div>
  29.                 <!--渠道-->                                    
  30.                 <div></div>
  31.                 <!--季度-->                                    
  32.                 <div></div>
  33.             </div>
  34.             <!--排行-->                                    
  35.             <div></div>                                     
  36.         </div>  
  38.     </div>
  39. </body>
  • body 设置背景图 ，行高1.15
  • viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
    • 需要居中显示
    • 使用logo.png做为背景图，在容器内显示
    • 内间距 88px 20px 0
  • column 列容器，分三列，占比 3：4：3
    • 中间容器外间距 32px 20px 0
  • css样式：
  1. /* 基础布局 */
  2. body{
  3.   font-family: Arial, Helvetica, sans-serif;
  4.   margin: 0;
  5.   padding: 0;
  6.   font-size: 0.5rem;
  7.   line-height: 1.15;
  8.   background: url(../images/bg.jpg) no-repeat 0 0 / cover;
  9. }
  10. h4,h3,ul{
  11.   margin: 0;
  12.   padding: 0;
  13.   font-weight: normal;
  14. }
  15. ul{
  16.   list-style: none;
  17. }
  18. a{
  19.   text-decoration: none;
  20. }
  21. .viewport{
  22.   max-width: 1920px;
  23.   min-width: 1024px;
  24.   margin: 0 auto;
  25.   min-height: 780px;
  26.   padding: 3.667rem 0.833rem 0;
  27.   background: url(../images/logo.png) no-repeat 0 0 / contain;
  28.   display: flex;
  29. }
  30. .column{
  31.   flex: 3;
  32.   position: relative;
  33. }
  34. .column:nth-child(2){
  35.   flex: 4;
  36.   margin: 1.333rem 0.833rem 0;
  37. }

公共面板

边框图片

  • 设置边框图片 必须先 设置border

image.png

  • 组合写法：
  1. /* 1.设置边框图片  必须先  设置border */
  3. border-image: url("images/border.jpg") 167/20px round;
  4. /* 第一个位置：边框图片的地址 */
  5. /* 第二个位置：裁剪尺寸（上 右 下 左）单位默认px（不需要写单位），可使用百分百*/
  6. /*            相对于图片本身的大小 */
  7. /* 第三个位置：边框图片宽度；和 border:20px 默认值；一般情况，和border宽度保持统一！ 所以一般都是设置border的宽度*/
  8. /* 第四个位置：选择重复的方式 */
  • 拆分写法：
  1. border-image-source: url("images/border.jpg"); // 边框图片资源地址
  2. border-image-slice: 167 167 167 167;  // 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
  3. // border-image-width: 20px; 边框图片的显示宽度，一般不设置，默认边框的宽度（设置border-width）。
  4. border-image-repeat: round;  // 平铺方式：
  6. // stretch 拉伸（默认）
  7. // repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
  8. // round 环绕，是完整的使用切割后的图片进行平铺。
  • 演示：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>边框图片</title>
  6.     <style>
  7.         ul{
  8.             margin: 0;
  9.             padding: 0;
  10.             list-style: none;
  11.         }
  12.         li{
  13.             width: 350px;
  14.             height: 160px;
  15.             border: 20px solid #ccc;
  16.             margin-top: 20px;
  17.         }
  18.         li:nth-child(1){
  19.             /*border-image: url("images/border.jpg") 167/20px round;*/
  20.             border-image-source: url("images/border.jpg");
  21.             border-image-slice: 167 167 167 167;
  22.             border-image-width: 20px;
  23.             /*环绕  是完整的使用切割后的图片进行平铺*/                    
  24.             border-image-repeat: round; 
  25.         }
  26.         li:nth-child(2){
  27.             /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/                                         border-image: url("images/border.jpg") 167/20px repeat;
  28.         }
  29.         li:nth-child(3){
  30.             /*默认的平铺方式*/
  31.             border-image: url("images/border.jpg") 167/20px stretch;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <ul>
  37.     <li></li>
  38.     <li></li>
  39.     <li></li>
  40. </ul>
  41. </body>
  42. </html>

公用样式

  • 原则：保证四个角的小图要完整！
  • 所有的面板的基础样式是一致的，提前布局好。切割示例图：

image.png

  • 外层 面板 .panel
    • 里层 容器 .inner
  1. /* 面板样式 */
  2. .panel{
  3.   box-sizing: border-box;
  4.   border: 2rem solid transparent;
  5.   border-width: 2.125rem 1.583rem 0.833rem 5.5rem;
  6.   border-image: url(../images/border.png) 51 38 21 132;
  7.   margin-bottom: 0.833rem;
  8.   position: relative;
  9. }
  10. .panel .inner{
  11.   position: absolute;
  12.   top: -2.125rem;
  13.   right: -1.583rem;
  14.   bottom: -0.833rem;
  15.   left: -5.5rem;
  16.   padding: 1rem 1.5rem;
  17. }
  18. .panel h3{
  19.   font-size: 0.833rem;
  20.   color: #fff;
  21. }
  • html：套三层
    • 父级：设置图片边框
      • 子元素：撑面！不需要设置具体宽高，靠上下左右定位；
        • 元素：里面布局！

左侧

概述

  • html结构：
  1.       <div class="overview panel">
  2.         <div class="inner">
  3.           <div class="item">
  4.             <h4>2,190</h4>
  5.             <span>
  6.               <i class="icon-dot" style="color: #006cff"></i>
  7.               设备总数
  8.             </span>
  9.           </div>
  10.           <div class="item">
  11.             <h4>190</h4>
  12.             <span>
  13.               <i class="icon-dot" style="color: #6acca3"></i>
  14.               季度新增
  15.             </span>
  16.           </div>
  17.           <div class="item">
  18.             <h4>3,001</h4>
  19.             <span>
  20.               <i class="icon-dot" style="color: #6acca3"></i>
  21.               运营设备
  22.             </span>
  23.           </div>
  24.           <div class="item">
  25.             <h4>108</h4>
  26.             <span>
  27.               <i class="icon-dot" style="color: #ed3f35"></i>
  28.               异常设备
  29.             </span>
  30.           </div>
  31.         </div>
  32.       </div>
  • 样式描述：
    • 容器高度 110px
    • h4字体 28px #fff 左边距 4.8px 下间隙 8px
    • span字体 16px #4c9bfd
  1. /* 概览区域 */
  2. .overview{
  3.   height: 4.583rem;
  4. }
  5. .overview .inner{
  6.   display: flex;
  7.   justify-content: space-between;
  8. }
  9. .overview h4{
  10.   font-size: 1.167rem;
  11.   padding-left: 0.2rem;
  12.   color: #fff;
  13.   margin-bottom: 0.333rem
  14. }
  15. .overview span{
  16.   font-size: 0.667rem;
  17.   color: #4c9bfd;
  18. }
  • 引入字体CSS文件；

监控

布局

  • html结构：
  1. <!--监控-->
  2. <div class="monitor panel">
  3.     <div class="inner">
  4.         <div class="tabs">
  5.             <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
  6.             <a href="javascript:;" data-index="1">异常设备监控</a>
  7.         </div>
  8.         <div class="content" style="display: block;">
  9.             <div class="head">
  10.                 <span class="col">故障时间</span>
  11.                 <span class="col">设备地址</span>
  12.                 <span class="col">异常代码</span>
  13.             </div>
  14.             <div class="marquee-view">
  15.                 <div class="marquee">
  16.                     <div class="row">
  17.                         <span class="col">20180701</span>
  18.                         <span class="col">11北京市昌平西路金燕龙写字楼</span>
  19.                         <span class="col">1000001</span>
  20.                         <span class="icon-dot"></span>
  21.                     </div>
  22.                     <div class="row">
  23.                         <span class="col">20190601</span>
  24.                         <span class="col">北京市昌平区城西路金燕龙写字楼</span>
  25.                         <span class="col">1000002</span>
  26.                         <span class="icon-dot"></span>
  27.                     </div>
  28.                     <div class="row">
  29.                         <span class="col">20190704</span>
  30.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  31.                         <span class="col">1000003</span>
  32.                         <span class="icon-dot"></span>
  33.                     </div>
  34.                     <div class="row">
  35.                         <span class="col">20180701</span>
  36.                         <span class="col">北京市昌平区建路金燕龙写字楼</span>
  37.                         <span class="col">1000004</span>
  38.                         <span class="icon-dot"></span>
  39.                     </div>
  40.                     <div class="row">
  41.                         <span class="col">20190701</span>
  42.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  43.                         <span class="col">1000005</span>
  44.                         <span class="icon-dot"></span>
  45.                     </div>
  46.                     <div class="row">
  47.                         <span class="col">20190701</span>
  48.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  49.                         <span class="col">1000006</span>
  50.                         <span class="icon-dot"></span>
  51.                     </div>
  52.                     <div class="row">
  53.                         <span class="col">20190701</span>
  54.                         <span class="col">北京市昌平区建西路金燕龙写字楼</span>
  55.                         <span class="col">1000007</span>
  56.                         <span class="icon-dot"></span>
  57.                     </div>
  58.                     <div class="row">
  59.                         <span class="col">20190701</span>
  60.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  61.                         <span class="col">1000008</span>
  62.                         <span class="icon-dot"></span>
  63.                     </div>
  64.                     <div class="row">
  65.                         <span class="col">20190701</span>
  66.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  67.                         <span class="col">1000009</span>
  68.                         <span class="icon-dot"></span>
  69.                     </div>
  70.                     <div class="row">
  71.                         <span class="col">20190710</span>
  72.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  73.                         <span class="col">1000010</span>
  74.                         <span class="icon-dot"></span>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.         </div>
  79.         <div class="content">
  80.             <div class="head">
  81.                 <span class="col">异常时间</span>
  82.                 <span class="col">设备地址</span>
  83.                 <span class="col">异常代码</span>
  84.             </div>
  85.             <div class="marquee-view">
  86.                 <div class="marquee">
  87.                     <div class="row">
  88.                         <span class="col">20190701</span>
  89.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  90.                         <span class="col">1000001</span>
  91.                         <span class="icon-dot"></span>
  92.                     </div>
  93.                     <div class="row">
  94.                         <span class="col">20190701</span>
  95.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  96.                         <span class="col">1000002</span>
  97.                         <span class="icon-dot"></span>
  98.                     </div>
  99.                     <div class="row">
  100.                         <span class="col">20190703</span>
  101.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  102.                         <span class="col">1000002</span>
  103.                         <span class="icon-dot"></span>
  104.                     </div>
  105.                     <div class="row">
  106.                         <span class="col">20190704</span>
  107.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  108.                         <span class="col">1000002</span>
  109.                         <span class="icon-dot"></span>
  110.                     </div>
  111.                     <div class="row">
  112.                         <span class="col">20190705</span>
  113.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  114.                         <span class="col">1000002</span>
  115.                         <span class="icon-dot"></span>
  116.                     </div>
  117.                     <div class="row">
  118.                         <span class="col">20190706</span>
  119.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  120.                         <span class="col">1000002</span>
  121.                         <span class="icon-dot"></span>
  122.                     </div>
  123.                     <div class="row">
  124.                         <span class="col">20190707</span>
  125.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  126.                         <span class="col">1000002</span>
  127.                         <span class="icon-dot"></span>
  128.                     </div>
  129.                     <div class="row">
  130.                         <span class="col">20190708</span>
  131.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  132.                         <span class="col">1000002</span>
  133.                         <span class="icon-dot"></span>
  134.                     </div>
  135.                     <div class="row">
  136.                         <span class="col">20190709</span>
  137.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  138.                         <span class="col">1000002</span>
  139.                         <span class="icon-dot"></span>
  140.                     </div>
  141.                     <div class="row">
  142.                         <span class="col">20190710</span>
  143.                         <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
  144.                         <span class="col">1000002</span>
  145.                         <span class="icon-dot"></span>
  146.                     </div>
  147.                 </div>
  148.             </div>
  149.         </div>
  150.     </div>
  151. </div>

结构解释：

  • .tabs 标签选项 加上active激活选项 默认激活第一个选项
  • .content 切换内容 加上style="display: block;"显示内容 默认激活第一个内容

样式描述：

  • .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 一行不换行 溢出 省略
  1. /* 监控区域 */
  2. .monitor{
  3.   height: 20rem;
  4. }
  5. .monitor .inner{
  6.   padding: 1rem 0;
  7.   display: flex;
  8.   flex-direction: column;
  9. }
  10. .monitor .tabs{
  11.   padding: 0 1.5rem;
  12.   margin-bottom: 0.75rem;
  13.   display: flex;
  14. }
  15. .monitor .tabs a{
  16.   color:#1950c4;
  17.   font-size: 0.75rem;
  18.   padding: 0 1.125rem;
  19. }
  20. .monitor .tabs a:first-child{
  21.   padding-left: 0;
  22.   border-right: 0.083rem solid #00f2f1;
  23. }
  24. .monitor .tabs a.active{
  25.   color: #fff;
  26. }
  27. .monitor .content{
  28.   flex: 1;
  29.   position: relative;
  30.   display: none;
  31. }
  33. .monitor .head{
  34.   display: flex;
  35.   justify-content: space-between;
  36.   line-height: 1.05;   
  37.   background-color: rgba(255, 255, 255, 0.1);
  38.   padding: 0.5rem 1.5rem;
  39.   color: #68d8fe;
  40.   font-size: 0.583rem;
  41. }
  42. .monitor .col:first-child{
  43.   width: 3.2rem;
  44. }
  45. .monitor .col:nth-child(2){
  46.   width: 8.4rem;
  47.   white-space: nowrap;
  48.   text-overflow: ellipsis;
  49.   overflow: hidden;
  50. }
  51. .monitor .col:nth-child(3){
  52.   width: 3.2rem;
  53. }
  59. .monitor .marquee-view{
  60.   position: absolute;
  61.   width: 100%;
  62.   top: 1.6rem;
  63.   bottom: 0;
  64.   overflow: hidden;
  65. }
  66. .monitor .row{
  67.   display: flex;
  68.   justify-content: space-between;
  69.   line-height: 1.05;
  70.   font-size: 0.5rem;
  71.   color: #61a8ff;
  72.   padding: 0.5rem 1.5rem;
  73. }
  74. .monitor .row .icon-dot{
  75.   position: absolute;
  76.   left: 0.64rem;
  77.   opacity: 0;
  78. }
  79. .monitor .row:hover {
  80.   background-color: rgba(255, 255, 255, 0.1);
  81.   color: #68d8fe;
  82. }
  83. .monitor .row:hover .icon-dot{
  84.   opacity: 1;
  85. }
  • 静态页：数据不会动，不会更换！
  • 动态：前端 和 后台获取数据；

tab切换

  • 选择用JQ：注意引入JQ文件；
  • 步骤：
    • 绑定 标签页点击 事件
    • 点击的时候获取data-index的值
    • 当前容器加active其他容器移除active
    • index对应的内容容器显示其他容器隐藏
  1.   // 切换
  2.   $('.monitor').on('click','.tabs a', function(){
  3.     $(this).addClass('active').siblings().removeClass('active')
  4.     $('.monitor .content').eq(this.dataset.index).show().siblings('.content').hide()
  5.   })

无限滚动（可选）

  • 步骤：
    • 先克隆列表，追加在后面
    • marquee-view 占满剩余高度，溢出隐藏
      • 绝对定位，top 1.6rem bottom 0
      • 宽度100%，溢出隐藏
  • 使用animation实现动画：使用 translateY 向上位移 50%；动画时间15s，匀速播放，循环执行。
  • js代码：
  1. // 动画
  2. $('.marquee').each(function(){
  3.     var $cloneList = $(this).children().clone()
  4.     $(this).append($cloneList)
  5. });
  • css代码：
  1. .monitor .marquee{
  2.     animation: scroll-top 15s linear infinite;
  3. }
  4. .monitor .marquee:hover{
  5.     animation-play-state: paused;
  6. }
  7. @keyframes scroll-top {
  8.     0%{}
  9.     100%{
  10.         transform: translateY(-50%);
  11.     }
  12. }

点位

布局

  • html结构：
  1. <!-- 点位 -->
  2. <div class="point panel">
  3.     <div class="inner">
  4.         <h3>点位分布统计</h3>
  5.         <div class="chart">
  6.             <div class="pie"></div>
  7.             <div class="data">
  8.                 <div class="item">
  9.                     <h4>320,11</h4>
  10.                     <span>
  11.                         <i class="icon-dot" style="color: #ed3f35"></i>
  12.                         点位总数
  13.                     </span>
  14.                 </div>
  15.                 <div class="item">
  16.                     <h4>418</h4>
  17.                     <span>
  18.                         <i class="icon-dot" style="color: #eacf19"></i>
  19.                         本月新增
  20.                     </span>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </div>
  25. </div>
  • css样式：
  1. /* 点位 */
  2. .point {
  3.   height: 14.167rem;
  4. }
  5. .point .chart {
  6.   display: flex;
  7.   margin-top: 1rem;
  8.   justify-content: space-between;
  9. }
  10. .point .pie {
  11.   width: 13rem;
  12.   height: 10rem;
  13.   margin-left: -0.4rem;
  14. }
  15. .point .data {
  16.   display: flex;
  17.   flex-direction: column;
  18.   justify-content: space-between;
  19.   width: 7rem;
  20.   padding: 1.5rem 1.25rem;
  21.   box-sizing: border-box;
  22.   background-image: url(../images/rect.png);
  23.   background-size: cover;
  24. }
  25. .point h4 {
  26.   margin-bottom: 0.5rem;
  27.   font-size: 1.167rem;
  28.   color: #fff;
  29. }
  30. .point span {
  31.   display: block;
  32.   color: #4c9bfd;
  33.   font-size: 0.667rem;
  34. }

Echarts-初体验

  • ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE 8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
  • 大白话：


image.png

  • 引入echarts dist/echarts.min.js


image.png 

  1. <div id="main" style="width: 600px;height:400px;"></div>

  • 2.指定图表的配置项和数据 (根据文档提供示例找到option) 

    1. var myChart = echarts.init(document.getElementById('main'));  // 原生DOM节点
    2. var option = {
    3. xAxis: {
    4. type: 'category',
    5. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    6. },
    7. yAxis: {
    8. type: 'value'
    9. },
    10. series: [{
    11. data: [820, 932, 901, 934, 1290, 1330, 1320],
    12. type: 'line'
    13. }]
    14. };

  • 3.初始化图表 

    1. myChart.setOption(option);
  3. ### Echarts-基础配置
  5. * 需要了解的主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color` 
  6. * series 最大面积的；
  7.   - 列表。每个系列通过 `type` 决定自己的图表类型  line  bar
  8.   - 大白话：图表数据，指定什么类型的图标，可以多个图表重叠。
  9. * xAxis：直角坐标系 grid 中的 x 轴
  10. * yAxis：直角坐标系 grid 中的 y 轴
  11. * grid：直角坐标系内绘图网格
  12. * title：标题组件
  13. * tooltip：提示框组件
  14. * legend：图例组件
  15. * color：调色盘颜色列表
  17. * 演示代码：
  19. ```js
  20. var option = {
  21.   xAxis: {   // x轴相关的控制
  22.       type: 'category',
  23.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  24.   },
  25.   yAxis: {   // y轴相关的控制
  26.       type: 'value'
  27.   },
  28.   series: [{    // 数据控制，和x轴分类形参对应
  29.       data: [820, 932, 901, 934, 1290, 1330, 1320],
  30.       type: 'line',
  31.       name:'线形图'
  32.   },{         // 多种类型数据
  33.       data: [22, 333, 111, 222, 444, 666, 777],
  34.       type: 'bar',
  35.       name:'饼状图'
  36.   }],
  37.   grid: {     //网格边框控制
  38.       show: true
  39.   },
  40.   title: {     // 标题
  41.       text: '标题'
  42.   },
  43.   tooltip: {  //  鼠标放入图形 数据提示说明
  44.       trigger:"axis"  //  触发点
  45.   },
  46.   legend: {   // 图表示例   得数据自己有名字标示
  47.       data: ['线形图']
  48.   },
  49.   color: ['red','green']  // 图表的颜色
  50. };

image.png

官方配置

  • 官方配置：
  1. option = {
  2.     // 鼠标提示工具
  3.     tooltip: {
  4.         // 触发选择：item放到图形上  axis放到轴上触发
  5.         trigger: 'item',
  8.         // 提示框格式：会使用 series 里面的数据
  9.         //   {a} 图表name
  10.         //   {b} 具体某个数据的name
  11.         //   {c} 具体某个数据的值
  12.         //   {d} 数据的占比 数据/全部数据总和 百分数
  13.         formatter: '{a} <br/>{b} : {c} ({d}%)'
  14.     },
  15.     series: [
  16.         {
  17.             name: '面积模式',  // 图表name
  18.             type: 'pie',     // 图表类型  饼图
  19.             radius: ["10%", "70%"],  // 图表半径(内外)，可以设置%;
  20.             center: ['50%', '50%'],  // 图表中心点位置，可以设置%;
  21.             roseType: 'radius',   // 数据表现形式 
  22.             data: [   // 具体的数据值
  23.                 {value: 10, name: 'rose1'},
  24.                 {value: 5, name: 'rose2'},
  25.                 {value: 15, name: 'rose3'},
  26.                 {value: 25, name: 'rose4'},
  27.                 {value: 20, name: 'rose5'},
  28.                 {value: 35, name: 'rose6'},
  29.                 {value: 30, name: 'rose7'},
  30.                 {value: 40, name: 'rose8'}
  31.             ]
  32.             // data: [820, 932, 901, 934, 1290, 1330, 1320],  如果就是单个数据，没有数据描述
  33.         }
  34.     ]
  35. };

定制配置

  • 数据
  1. [
  2.     { value: 20, name: '云南' },
  3.     { value: 26, name: '北京' },
  4.     { value: 24, name: '山东' },
  5.     { value: 25, name: '河北' },
  6.     { value: 20, name: '江苏' },
  7.     { value: 25, name: '浙江' },
  8.     { value: 30, name: '四川' },
  9.     { value: 42, name: '湖北' }
  10. ]
  • 颜色：color
  1. ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

  • 需求3：字体略小些 10 px

  • 需求4：引导线略短些

    • 连接图表 8 px
    • 连接文字 10 px
  1. +         data: [
  2. +          { value: 20, name: '云南' },
  3. +          { value: 26, name: '北京' },
  4. +          { value: 24, name: '山东' },
  5. +          { value: 25, name: '河北' },
  6. +          { value: 20, name: '江苏' },
  7. +          { value: 25, name: '浙江' },
  8. +          { value: 30, name: '四川' },
  9. +          { value: 42, name: '湖北' }
  10. +        ],
  11. +        // 文字调整
  12. +        label:{
  13. +          fontSize: 10
  14. +        },
  15. +        // 引导线调整
  16. +        labelLine: {
  17. +          // 连接扇形图线长
  18. +          length: 8,
  19. +          // 连接文字线长
  20. +          length2: 10
  21. +        }

中部

地图

布局

  • html结构：
  1.       <!-- 地图 -->
  2.       <div class="map">
  3.         <h3>
  4.           <span class="icon-cube"></span>
  5.           设备数据统计
  6.         </h3>
  7.         <div class="chart">
  8.           <div class="geo"></div>
  9.         </div>
  10.       </div>
  • css样式：
  1. /* 地图  */
  2. .map {
  3.   height: 24.1rem;
  4.   margin-bottom: 0.833rem;
  5.   display: flex;
  6.   flex-direction: column;
  7. }
  8. .map h3 {
  9.   line-height: 1;
  10.   padding: 0.667rem 0;
  11.   margin: 0;
  12.   font-size: 0.833rem;
  13.   color: #fff;
  14. }
  15. .map .icon-cube {
  16.   color: #68d8fe;
  17. }
  18. .map .chart {
  19.   flex: 1;
  20.   background-color: rgba(255, 255, 255, 0.05);
  21. }
  22. .map .geo {
  23.   width: 100%;
  24.   height: 100%;
  25. }

社区介绍

社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。

image.png

  • 在这里可以找到一些基于echart的高度定制好的图表，定制好图表话，这里是基于echarts开发的第三方的图表。

map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x2Ei_JbHZb

实现步骤：

  • 第一需要下载china.js提供中国地图的js文件
  • 导入后，使用社区提供的配置即可。
  1. (function () {
  2.     // 使用配置即可...
  3.   var myecharts = echarts.init($('.map .geo')[0])
  4.   myecharts.setOption(option);
  5. })()
  • 需要修改：无标题；
  1.     geo: {
  2.       map: 'china',
  3. +      zoom: 1.2,
  4.       label: {
  5.         emphasis: {
  6.           show: false
  7.         }
  8.       },
  9.       roam: false,
  10.       itemStyle: {
  11.         normal: {
  12. +          areaColor: '#142957',
  13.           borderColor: '#0692a4'
  14.         },
  15.         emphasis: {
  16.           areaColor: '#0b1c2d'
  17.         }
  18.       }
  19.     },

用户统计

布局

  • html结构：
  1. <!-- 用户 -->
  2. <div class="users panel">
  3.     <div class="inner">
  4.         <h3>全国用户总量统计</h3>
  5.         <div class="chart">
  6.             <div class="bar"></div>
  7.             <div class="data">
  8.                 <div class="item">
  9.                     <h4>120,899</h4>
  10.                     <span>
  11.                         <i class="icon-dot" style="color: #ed3f35"></i>
  12.                         用户总量
  13.                     </span>
  14.                 </div>
  15.                 <div class="item">
  16.                     <h4>248</h4>
  17.                     <span>
  18.                         <i class="icon-dot" style="color: #eacf19"></i>
  19.                         本月新增
  20.                     </span>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </div>
  25. </div>
  • css样式：
  1. /* 用户模块 */
  2. .users {
  3.   height: 14.167rem;
  4.   display: flex;
  5. }
  6. .users .chart {
  7.   display: flex;
  8.   margin-top: 1rem;
  9. }
  10. .users .bar {
  11.   width: 24.5rem;
  12.   height: 10rem;
  13. }
  14. .users .data {
  15.   display: flex;
  16.   flex-direction: column;
  17.   justify-content: space-between;
  18.   width: 7rem;
  19.   padding: 1.5rem 1.25rem;
  20.   box-sizing: border-box;
  21.   background-image: url(../images/rect.png);
  22.   background-size: cover;
  23. }
  24. .users h4 {
  25.   margin-bottom: 0.5rem;
  26.   font-size: 1.167rem;
  27.   color: #fff;
  28. }
  29. .users span {
  30.   display: block;
  31.   color: #4c9bfd;
  32.   font-size: 0.667rem;
  33. }

官方配置

  • 第一步：参考官方示例 + 分析 
  1. option = {
  2.     // 工具提示
  3.     tooltip: {
  4.       // 触发类型  经过轴触发axis  经过轴触发item
  5.       trigger: 'item',
  6.       // 轴触发提示才有效
  7.       // axisPointer: {    
  8.       //   // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
  9.       //   type: 'shadow'        
  10.       // }
  11.     },
  12.     // 图表边界控制
  13.     grid: {
  14.       // 距离 上右下左 的距离
  15.       left: '3%',
  16.       right: '4%',
  17.       bottom: '3%',
  18.       // 是否包含文本说明
  19.       containLabel: true
  20.     },
  24.     // 控制x轴
  25.     xAxis: [
  26.       {
  27.         // 使用类目，必须有data属性
  28.         type: 'category',
  29.         // 使用 data 中的数据设为刻度文字
  30.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  31.         // 刻度设置
  32.         axisTick: {
  33.           alignWithLabel: true   // 刻度是否和label对齐
  34.         }
  35.       }
  36.     ],
  37.     // 控制y轴
  38.     yAxis: [
  39.       {
  40.         // 使用数据的值设为刻度文字
  41.         type: 'value'
  42.       }
  43.     ],
  44.     // 控制x轴
  45.     series: [
  46.       {
  47.         // 图表数据名称
  48.         name: '用户统计',
  49.         // 图表类型
  50.         type: 'bar',
  51.         // 柱子宽度 相对于格子宽度计算；
  52.         barWidth: '60%',
  53.         // 数据
  54.         data: [10, 52, 200, 334, 390, 330, 220]
  55.       }
  56.     ]
  57.   };

第二步：使用起来

  1. // 用户统计-柱状图
  2. (function () {
  3.   var option = {
  4.     // 参考上面即可...                    
  5.   };
  6.   var myChart = echarts.init($('.bar')[0])
  7.   myChart.setOption(option)
  8. })();

定制配置

  • 调整刻度
    • 隐藏刻度
    • 文字Label 颜色 #4c9bfd
  1.     // 控制x轴
  2.     xAxis: [
  3.       {
  4.         // 使用类目，必须有data属性
  5.         type: 'category',
  6.         // 使用 data 中的数据设为刻度文字
  7.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  8.         // 刻度设置
  9.         axisTick: {
  10. +          show: false
  11.         },        
  12. +        // 文字颜色
  13. +        axisLabel: {
  14. +          color: '#4c9bfd'
  15. +        }
  16.       }
  1.     // 控制y轴
  2.     yAxis: [
  3.       {
  4.         // 使用数据的值设为刻度文字
  5.         type: 'value',
  6. +        // 刻度设置
  7. +        axisTick: {
  8. +          show: false
  9. +        },
  10. +        // 文字
  11. +        axisLabel: {
  12. +          color: '#4c9bfd'
  13. +        }
  14. +      }
  15.     ],
  • 调整边框与间距
    • 加上边框，颜色 rgba(0, 240, 255, 0.3)
    • 边距调整 3% 3% 3% 0%
    • y轴分割 （split）线颜色 rgba(0, 240, 255, 0.3)
  1.     // 图表边界控制
  2.     grid: {
  3. +      // 显示边框
  4. +      show: true,
  5. +      // 边框颜色
  6. +      borderColor: 'rgba(0, 240, 255, 0.3)'
  9. +      // 距离 上右下左 的距离
  10. +      top: '3%',
  11. +      right: '3%',
  12. +      bottom: '3%',
  13. +      left: '0%',
  16.        // 是否包含文本
  17.        containLabel: true,
  18.     },
  1.     // 控制y轴
  2.     yAxis: [
  3.       {
  4.         // 使用数据的值设为刻度文字
  5.         type: 'value',
  6.         // 刻度设置
  7.         axisTick: {
  8.           show: false
  9.         },
  10.         // 文字
  11.         axisLabel: {
  12.           color: '#4c9bfd'
  13.         },
  14. +        splitLine: {
  15. +          lineStyle: {
  16. +            color: 'rgba(0, 240, 255, 0.3)'
  17. +          }
  18. +        }
  19.       }
  20.     ],
  • 调整数据，与省略图形。
  1. // series
  2. data: [2100,1900,1700,1560,1400,  1200,1200,1200,   900,750,600,480,240]
  1. // xAxis
  2. data: ['上海', '广州', '北京', '深圳', '合肥', 
  3.        '', '......', '', 
  4.        '杭州', '厦门', '济南', '成都', '重庆']

其他配置

  • 颜色，使用渐变，从上#00fffb 到下#0061ce
    • 写法1：
  1. color: {
  2.     type: 'linear',
  3.     x: 0,
  4.     y: 0,
  5.     x2: 0,
  6.     y2: 1,
  7.     colorStops: [{
  8.         offset: 0, color: 'red' // 0% 处的颜色
  9.     }, {
  10.         offset: 1, color: 'blue' // 100% 处的颜色
  11.     }],
  12.     global: false // 缺省为 false
  13. }
  • 写法2：提供的工具函数生成渐变颜色echarts.graphic.LinearGradient
  1. // 颜色  // 提供的工具函数生成渐变颜色
  2. color: new echarts.graphic.LinearGradient(
  3.     // (x，y) 点到点 (x2,y2) 之间进行渐变
  4.     0, 0, 0, 1,
  5.     [
  6.         {offset: 0, color: '#00fffb'}, // 0 起始颜色
  7.         {offset: 1, color: '#0061ce'}  // 1 结束颜色
  8.     ]
  9. )
  • 经过图形才显示提示，且省略的柱子不需要提示
  1.     // 经过图形才显示工具提示
  2.     tooltip: {
  3. -      trigger: 'axis',
  4. +      trigger: 'item',
  • 中间数据颜色单独配置；
    • data:[1200,1500…]
    • 单独一个数据：
  1. // 中间省略的数据  准备三项
  2. var item = {
  3.     name:'',
  4.     value: 1200,
  5.     // 工具提示配置
  6.     tooltip: {
  7.         extraCssText: 'opacity:0;'   // CSS的额外配置  需要写CSS字符串
  8.     },
  9.     // 柱子颜色
  10.     itemStyle: {
  11.         color: '#254065'
  12.     },
  13.     // 鼠标经过柱子颜色
  14.     emphasis: {
  15.         itemStyle: {
  16.             color: '#254065'
  17.         }
  18.     },
  19. };
  1. // series配置data选项在中使用
  2. - data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240],
  3. + data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],
  • 小结：
    • grid：距离周围距离！边框颜色！
    • 轴：轴文字label颜色、刻度、分隔线！
    • series:图表类型，单个数据（样式，鼠标提示情况，鼠标进入后高亮样式情况）
      • emphasis：高亮
      • tooltip：控制具体项鼠标提示

右侧

订单

布局

  1. <!-- 订单 -->
  2. <div class="order panel">
  3.     <div class="inner">
  4.         <!-- 筛选 -->
  5.         <div class="filter">
  6.             <a href="javascript:;" data-key="day365" class="active">365天</a>
  7.             <a href="javascript:;" data-key="day90">90天</a>
  8.             <a href="javascript:;" data-key="day30">30天</a>
  9.             <a href="javascript:;" data-key="day1">24小时</a>
  10.         </div>
  11.         <!-- 数据 -->
  12.         <div class="data">
  13.             <div class="item">
  14.                 <h4>20,301,987</h4>
  15.                 <span>
  16.                     <i class="icon-dot" style="color: #ed3f35;"></i>
  17.                     订单量
  18.                 </span>
  19.             </div>
  20.             <div class="item">
  21.                 <h4>99834</h4>
  22.                 <span>
  23.                     <i class="icon-dot" style="color: #eacf19;"></i>
  24.                     销售额(万元)
  25.                 </span>
  26.             </div>
  27.         </div>
  28.     </div>
  29. </div>
  • CSS
  1. /* 订单 */
  2. .order {
  3.   height: 6.167rem;
  4. }
  5. .order .filter {
  6.   display: flex;
  7. }
  8. .order .filter a {
  9.   display: block;
  10.   height: 0.75rem;
  11.   line-height: 1;
  12.   padding: 0 0.75rem;
  13.   color: #1950c4;
  14.   font-size: 0.75rem;
  15.   border-right: 0.083rem solid #00f2f1;
  16. }
  17. .order .filter a:first-child {
  18.   padding-left: 0;
  19. }
  20. .order .filter a:last-child {
  21.   border-right: none;
  22. }
  23. .order .filter a.active {
  24.   color: #fff;
  25.   font-size: 0.833rem;
  26. }
  27. .order .data {
  28.   display: flex;
  29.   margin-top: 0.833rem;
  30. }
  31. .order .item {
  32.   width: 50%;
  33. }
  34. .order h4 {
  35.   font-size: 1.167rem;
  36.   color: #fff;
  37.   margin-bottom: 0.417rem;
  38. }
  39. .order span {
  40.   display: block;
  41.   color: #4c9bfd;
  42.   font-size: 0.667rem;
  43. }

tab切换及定时

  • 实现步骤：
    • 提前准备数据
    • 点击后切tab激活样式
    • 点击后切换数据内容
    • 开启定时器动态切换数据
  1. // 订单功能
  2. (function(){
  3.   // 1. 准备数据
  4.   var data = {
  5.     day365: { orders: '20,301,987', amount: '99834' },
  6.     day90: { orders: '301,987', amount: '9834' },
  7.     day30: { orders: '1,987', amount: '3834' },
  8.     day1: { orders: '987', amount: '834' }
  9.   }
  10.   // 获取显示 订单数量 容器
  11.   var $h4Orders = $('.order h4:eq(0)')
  12.   // 获取显示 金额数量 容器
  13.   var $h4Amount = $('.order h4:eq(1)')
  15.   $('.order').on('click','.filter a',function(){
  16.     // 2. 点击切换激活样式
  17.     $(this).addClass('active').siblings().removeClass('active')
  18.     // 3. 点击切换数据
  19.     var currdata = data[this.dataset.key]
  20.     $h4Orders.html(currdata.orders)
  21.     $h4Amount.html(currdata.amount)
  22.   })
  23.   // 4. 开启定时器切换数据
  24.   var index = 0
  25.   var $allTab = $('.order .filter a')
  26.   setInterval(function(){
  27.     index ++ 
  28.     if (index >= 4) index = 0
  29.     $allTab.eq(index).click()
  30.   },5000)
  31. })();

销售统计

布局

  • html结构：
  1. <!-- 销售额 -->
  2. <div class="sales panel">
  3.     <div class="inner">
  4.         <div class="caption">
  5.             <h3>销售额统计</h3>
  6.             <a href="javascript:;" class="active" data-type="year">年</a>
  7.             <a href="javascript:;" data-type="quarter">季</a>
  8.             <a href="javascript:;" data-type="month">月</a>
  9.             <a href="javascript:;" data-type="week">周</a>
  10.         </div>
  11.         <div class="chart">
  12.             <div class="label">单位:万</div>
  13.             <div class="line"></div>
  14.         </div>
  15.     </div>
  16. </div>
  • css样式：
  1. /* 销售区域 */
  2. .sales {
  3.   height: 10.333rem;
  4. }
  5. .sales .caption {
  6.   display: flex;
  7.   line-height: 1;
  8. }
  9. .sales h3 {
  10.   height: 0.75rem;
  11.   padding-right: 0.75rem;
  12.   border-right: 0.083rem solid #00f2f1;
  13. }
  14. .sales a {
  15.   padding: 0.167rem;
  16.   font-size: 0.667rem;
  17.   margin: -0.125rem 0 0 0.875rem;
  18.   border-radius: 0.125rem;
  19.   color: #0bace6;
  20. }
  21. .sales a.active {
  22.   background-color: #4c9bfd;
  23.   color: #fff;
  24. }
  25. .sales .inner {
  26.   display: flex;
  27.   flex-direction: column;
  28. }
  29. .sales .chart {
  30.   flex: 1;
  31.   padding-top: 0.6rem;
  32.   position: relative;
  33. }
  34. .sales .label {
  35.   position: absolute;
  36.   left: 1.75rem;
  37.   top: 0.75rem;
  38.   color: #4996f5;
  39.   font-size: 0.583rem;
  40. }
  41. .sales .line {
  42.   width: 100%;
  43.   height: 100%;
  44. }

官方配置

image.png

  1. var option = {
  2.     xAxis: {
  3.         // 类目类型                                  
  4.         type: 'category',
  5.         // x轴刻度文字                                  
  6.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  7.     },
  8.     yAxis: {
  9.         // 数据作为刻度文字                                  
  10.         type: 'value'
  11.     },
  12.     series: [{
  13.         // 数据                                  
  14.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  15.         // 图表类型                                  
  16.         type: 'line',
  17.         // 圆滑连接                                  
  18.         smooth: true
  19.     }]
  20. };

第二步：在项目中使用起来。

  1. (function () {
  2.   var option = {
  3.      ...
  4.   };
  5.   var myChart = echarts.init($('.line')[0])
  6.   myChart.setOption(option)
  7. })();

定制配置

  • 设置自己的图表大小，显示边框设置颜色：#012f4a，包含刻度文字在内。
  1.     // 设置网格样式
  2.     grid: {
  3.       show: true,// 显示边框
  4.       top: '20%',
  5.       left: '3%',
  6.       right: '4%',
  7.       bottom: '3%',
  8.       borderColor: '#012f4a',// 边框颜色
  9.       containLabel: true // 包含刻度文字在内
  10.     },
  • x轴的刻度去除，字体颜色：#4c9bfd，剔除坐标轴线（将来使用Y轴分割线）, 轴两端是不需要内间距。
  1.     xAxis: {
  2.       type: 'category',
  3.       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  5.       axisTick: {
  6.         show: false // 去除刻度线
  7.       },
  8.       axisLabel: {
  9.         color: '#4c9bfd' // 文本颜色
  10.       },
  11.       axisLine: {
  12.         show: false // 去除轴线
  13.       },
  14.       // 边界 间隙
  15.       boundaryGap: false  // 去除轴内间距  图形从起始到末尾
  17.     },
  • y轴的刻度去除，字体颜色：#4c9bfd，分割线颜色：#012f4a
  1.     yAxis: {
  2.       type: 'value',
  5.       axisTick: {
  6.         show: false  // 去除刻度
  7.       },
  8.       axisLabel: {
  9.         color: '#4c9bfd' // 文字颜色
  10.       },
  11.           splitLine: {
  12.             lineStyle: {
  13.               color: '#012f4a' // 分割线颜色
  14.             }
  15.       }
  18.     },
  • 两条线形图颜色分别：#00f2f1 #ed3f35
  1.     series: [{
  2.       name:'预期销售额',
  3.       data: [820, 932, 901, 934, 1290, 1330, 1320],
  4.       type: 'line',
  5.       smooth: true,
  7.       itemStyle: {
  8.         color: '#00f2f1'  // 线颜色
  9.       }
  11.     },{
  12.       name:'实际销售额',
  13.       data: [100, 331, 200, 123, 233, 543, 400],
  14.       type: 'line',
  15.       smooth: true,
  17.       itemStyle: {
  18.         color: '#ed3f35'  // 线颜色
  19.       }
  21.     }]
  • 套入数据
  1. // x轴的文字
  2. xAxis: {
  3.   type: 'category',
  4. - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
  5. + data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  1. // 图标数据
  2.     series: [{
  3.        name:'预期销售额',
  4. -      data: [820, 932, 901, 934, 1290, 1330, 1320],
  5. +      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
  6.       type: 'line',
  7.       smooth: true,
  8.       itemStyle: {
  9.         color: '#00f2f1'  // 线颜色
  10.       }
  11.     },{
  12.       name:'实际销售额',
  13. -      data: [100, 331, 200, 123, 233, 543, 400],
  14. +      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  15.       type: 'line',
  16.       smooth: true,
  17.       itemStyle: {
  18.         color: '#ed3f35'  // 线颜色
  19.       }
  20.     }]
  • 鼠标经过需要工具提示
  1.     // 工具提示
  2.     tooltip:{
  3.       trigger: 'axis'
  4.     },
  • 显示图例组件（对图表的说明）, series数据必须有名称。
  1.     // 图例组件
  2.     legend: {
  3.       textStyle: {
  4.         color: '#4c9bfd' // 图例文字颜色
  5.       },
  6.       right: '10%' // 距离右边10%
  7.     },

tab切换

  • 实现步骤：
    • 准备切换需要依赖的数据
    • 绑定点击事件
      • 切换激活 tab 的样式
      • 切换图表依赖的数据

  • 开启定时器，进行切换。


    第一步：准备数据，测试数据

  1.   var data = {
  2.     year: [
  3.       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  4.       [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  5.     ],
  6.     quarter: [
  7.       [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
  8.       [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
  9.     ],
  10.     month: [
  11.       [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
  12.       [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
  13.     ],
  14.     week: [
  15.       [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
  16.       [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
  17.     ]
  18.   }
  1.     series: [{
  2.       name:'预期销售额',
  3. +      data: data.year[0],
  4.       type: 'line',
  5.       smooth: true,
  6.       itemStyle: {
  7.         color: '#00f2f1'
  8.       }
  9.     },{
  10.       name:'实际销售额',
  11. +      data: data.year[1],
  12.       type: 'line',
  13.       smooth: true,
  14.       itemStyle: {
  15.         color: '#ed3f35'
  16.       }
  17.     }]

第二步：点击后切换

  1.   // 切换
  2.   $('.sales').on('click', '.caption a', function(){
  3.     // 样式
  4.     $(this).addClass('active').siblings().removeClass('active')
  6.     // currData 当前对应的数据  
  7.     // this.dataset.type 标签上的data-type属性值，对应data中的属性                  
  8.     var currData = data[this.dataset.type]
  11.     // 修改图表1的数据
  12.     option.series[0].data = currData[0]
  13.     // 修改图表2的数据                  
  14.     option.series[1].data = currData[1]
  17.     // 重新设置数据  让图标重新渲染                  
  18.     myChart.setOption(option)
  19.   })

第三步：自动切换

  1. // tab索引
  2. var index = 0;
  3. // 所有tab
  4. var allTab = $('.sales .caption a')
  5. var timer = setInterval(function () {
  6.     index++
  7.     // 大于等于4索引切换到0索引
  8.     if (index >= 4) index = 0
  9.     // 选中对应tab触发点击
  10.     allTab.eq(index).click()
  11. }, 1000);

鼠标移入移出控制

  1. // mouseover  :注册给父级，在子元素上触发时，多次触发！
  2. // mouseenter :注册给父级，在子元素上触发时，一次触发！
  4. $('.sales').on("mouseenter",function(){
  5.     clearInterval(timer);
  6. })
  7. .on("mouseout",function(){
  8.     timer = ...;  // 上面代码
  9. })

区域&进度

布局

  • html结构：
  1. <!-- 渠道 季度 -->
  2. <div class="wrap">
  3.     <div class="channel panel">
  4.         <div class="inner">
  5.             <h3>渠道分布</h3>
  6.             <div class="data">
  7.                 <div class="item">
  8.                     <h4>39 <small>%</small></h4>
  9.                     <span>
  10.                         <i class="icon-plane"></i>
  11.                         机场
  12.                     </span>
  13.                 </div>
  14.                 <div class="item">
  15.                     <h4>28 <small>%</small></h4>
  16.                     <span>
  17.                         <i class="icon-bag"></i>
  18.                         商场
  19.                     </span>
  20.                 </div>
  21.             </div>
  22.             <div class="data">
  23.                 <div class="item">
  24.                     <h4>20 <small>%</small></h4>
  25.                     <span>
  26.                         <i class="icon-train"></i>
  27.                         地铁
  28.                     </span>
  29.                 </div>
  30.                 <div class="item">
  31.                     <h4>13 <small>%</small></h4>
  32.                     <span>
  33.                         <i class="icon-bus"></i>
  34.                         火车站
  35.                     </span>
  36.                 </div>
  37.             </div>
  38.         </div>
  39.     </div>
  40.     <div class="quarter panel">
  41.         <div class="inner">
  42.             <h3>一季度销售进度</h3>
  43.             <div class="chart">
  44.                 <div class="box">
  45.                     <div class="gauge"></div>
  46.                     <div class="label">75<small> %</small></div>
  47.                 </div>
  48.                 <div class="data">
  49.                     <div class="item">
  50.                         <h4>1,321</h4>
  51.                         <span>
  52.                             <i class="icon-dot" style="color: #6acca3"></i>
  53.                             销售额(万元)
  54.                         </span>
  55.                     </div>
  56.                     <div class="item">
  57.                         <h4>150%</h4>
  58.                         <span>
  59.                             <i class="icon-dot" style="color: #ed3f35"></i>
  60.                             同比增长
  61.                         </span>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </div>
  67. </div>
  • css样式：
  1. /* 渠道区块 */
  2. .wrap {
  3.   display: flex;
  4. }
  5. .channel,
  6. .quarter {
  7.   flex: 1;
  8.   height: 9.667rem;
  9. }
  10. .channel {
  11.   margin-right: 0.833rem;
  12. }
  13. .channel .data {
  14.   overflow: hidden;
  15. }
  16. .channel .item {
  17.   margin-top: 0.85rem;
  18. }
  19. .channel .item:first-child {
  20.   float: left;
  21. }
  22. .channel .item:last-child {
  23.   float: right;
  24. }
  25. .channel h4 {
  26.   color: #fff;
  27.   font-size: 1.333rem;
  28.   margin-bottom: 0.2rem;
  29. }
  30. .channel small {
  31.   font-size: 50%;
  32. }
  33. .channel span {
  34.   display: block;
  35.   color: #4c9bfd;
  36.   font-size: 0.583rem;
  37. }
  38. /* 季度区块 */
  39. .quarter .inner {
  40.   display: flex;
  41.   flex-direction: column;
  42.   margin: 0 -0.25rem;
  43. }
  44. .quarter .chart {
  45.   flex: 1;
  46.   padding-top: 0.75rem;
  47. }
  48. .quarter .box {
  49.   position: relative;
  50. }
  51. .quarter .label {
  52.   transform: translate(-50%, -30%);
  53.   color: #fff;
  54.   font-size: 1.25rem;
  55.   position: absolute;
  56.   left: 50%;
  57.   top: 50%;
  58. }
  59. .quarter .label small {
  60.   font-size: 50%;
  61. }
  62. .quarter .gauge {
  63.   height: 3.5rem;
  64. }
  65. .quarter .data {
  66.   display: flex;
  67.   justify-content: space-between;
  68. }
  69. .quarter .item {
  70.   width: 50%;
  71. }
  72. .quarter h4 {
  73.   color: #fff;
  74.   font-size: 1rem;
  75.   margin-bottom: 0.4rem;
  76. }
  77. .quarter span {
  78.   display: block;
  79.   width: 100%;
  80.   white-space: nowrap;
  81.   text-overflow: ellipsis;
  82.   overflow: hidden;
  83.   color: #4c9bfd;
  84.   font-size: 0.583rem;
  85. }

官方配置

  1. var option = {
  2.     series: [
  3.         {
  4.             name:'访问来源',
  5.             type:'pie',
  6.             radius: ['50%', '70%'],
  7.             label: {
  8.                 show: false,
  9.             },
  10.             data:[
  11.                 {value:100, name:'直接访问'},
  12.                 {value:100, name:'邮件营销'},
  13.                 {value:200, name:'联盟广告'}
  14.             ]
  15.         }
  16.     ]
  17. };

第二步：使用起来

  1. // 销量进度-饼状图
  2. (function () {
  3.     var option = {
  4.         ...
  5.     };
  6.     var myChart = echarts.init($('.gauge')[0])
  7.     myChart.setOption(option)
  8. })();

定制配置

需求：数据不需要名称，某一项没有颜色；调整角度；大一些，让75%文字在中心。

  1.   var option = {
  2.     series: [
  3.       {
  4.         type: 'pie',
  5. -        radius: ['50%', '70%'],
  6. +        radius: ['130%', '150%'],  // 放大图形
  7. +        center: ['48%', '80%'],    // 往下移动  套住75%文字
  8.         label: {
  9.           show: false,
  10.         },
  11. +        startAngle: 180,
  12.          data: [
  13. -          { value: 100, name: '直接访问' },
  14. -          { value: 100, name: '邮件营销' },
  15. -          { value: 200, name: '联盟广告' }
  16. +          { value: 100 }, // 不需要名称
  17. +          { value: 100,}, // 不需要名称
  18. +          { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
  19.         ]
  20.       }
  21.     ]
  22.   }
  • 需求：鼠标经过无需变大，第一段颜色渐变#00c9e0->#005fc1，第二段颜色#12274d。
  1. +       hoverOffset: 0,  // 鼠标经过不变大
  2.         data: [
  3.           {
  4.             value: 100,
  5. +            itemStyle: { // 颜色渐变#00c9e0->#005fc1
  6. +              color: {
  7. +                type: 'linear',
  8. +                x: 0,
  9. +                y: 0,
  10. +                x2: 0,
  11. +                y2: 1,
  12. +                colorStops: [
  13. +                  { offset: 0, color: '#00c9e0' },
  14. +                  { offset: 1, color: '#005fc1' }
  15. +                ]
  16. +              }
  17. +            }
  18. +          },  
  19. +          { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d

热销排行

布局

  • html结构：
  1.       <!-- 排行榜 -->
  2.       <div class="top panel">
  3.         <div class="inner">
  4.           <div class="all">
  5.             <h3>全国热榜</h3>
  6.             <ul>
  7.               <li>
  8.                 <i class="icon-cup1" style="color: #d93f36;"></i>
  9.                 可爱多
  10.               </li>
  11.               <li>
  12.                 <i class="icon-cup2" style="color: #68d8fe;"></i>
  13.                 娃哈啥
  14.               </li>
  15.               <li>
  16.                 <i class="icon-cup3" style="color: #4c9bfd;"></i>
  17.                 喜之郎
  18.               </li>
  19.             </ul>
  20.           </div>
  21.           <div class="province">
  22.             <h3>各省热销 <i class="date">// 近30日 //</i></h3>
  23.             <div class="data">
  24.               <ul class="sup">
  25.                 <li>
  26.                   <span>北京</span>
  27.                   <span>25,179 <s class="icon-up"></s></span>
  28.                 </li>
  29.                 <li>
  30.                   <span>河北</span>
  31.                   <span>23,252 <s class="icon-down"></s></span>
  32.                 </li>
  33.                 <li>
  34.                   <span>上海</span>
  35.                   <span>20,760 <s class="icon-up"></s></span>
  36.                 </li>
  37.                 <li>
  38.                   <span>江苏</span>
  39.                   <span>23,252 <s class="icon-down"></s></span>
  40.                 </li>
  41.                 <li>
  42.                   <span>山东</span>
  43.                   <span>20,760 <s class="icon-up"></s></span>
  44.                 </li>
  45.               </ul>
  46.               <ul class="sub">
  47.                 <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
  48.               </ul>
  49.             </div>
  50.           </div>
  51.         </div>
  52.       </div>
  • css样式：
  1. /* 排行榜 */
  2. .top {
  3.   height: 11.8rem;
  4. }
  5. .top .inner {
  6.   display: flex;
  7. }
  8. .top .all {
  9.   display: flex;
  10.   flex-direction: column;
  11.   width: 7rem;
  12.   color: #4c9bfd;
  13.   font-size: 0.6rem;
  14.   vertical-align: middle;
  15. }
  16. .top .all ul {
  17.   padding-left: 0.5rem;
  18.   margin-top: 0.5rem;
  19.   flex: 1;
  20.   display: flex;
  21.   flex-direction: column;
  22.   justify-content: space-around;
  23. }
  24. .top .all li {
  25.   overflow: hidden;
  26. }
  27. .top .all [class^="icon-"] {
  28.   font-size: 1.5rem;
  29.   vertical-align: middle;
  30.   margin-right: 0.5rem;
  31. }
  32. .top .province {
  33.   flex: 1;
  34.   display: flex;
  35.   flex-direction: column;
  36.   color: #fff;
  37. }
  38. .top .province i {
  39.   padding: 0 0.5rem;
  40.   margin-top: 0.208rem;
  41.   float: right;
  42.   font-style: normal;
  43.   font-size: 0.583rem;
  44.   color: #0bace6;
  45. }
  46. .top .province s {
  47.   display: inline-block;
  48.   transform: scale(0.8);
  49.   text-decoration: none;
  50. }
  51. .top .province .icon-up {
  52.   color: #dc3c33;
  53. }
  54. .top .province .icon-down {
  55.   color: #36be90;
  56. }
  57. .top .province .data {
  58.   flex: 1;
  59.   display: flex;
  60.   margin-top: 0.6rem;
  61. }
  62. .top .province ul {
  63.   flex: 1;
  64.   line-height: 1;
  65.   margin-bottom: 0.25rem;
  66. }
  67. .top .province ul li {
  68.   display: flex;
  69.   justify-content: space-between;
  70. }
  71. .top .province ul span {
  72.   display: block;
  73.   overflow: hidden;
  74.   white-space: nowrap;
  75.   text-overflow: ellipsis;
  76. }
  77. .top .province ul.sup {
  78.   font-size: 0.583rem;
  79. }
  80. .top .province ul.sup li {
  81.   color: #4995f4;
  82.   padding: 0.5rem;
  83. }
  84. .top .province ul.sup li.active {
  85.   color: #a3c6f2;
  86.   background-color: rgba(10, 67, 188, 0.2);
  87. }
  88. .top .province ul.sub {
  89.   display: flex;
  90.   flex-direction: column;
  91.   justify-content: space-around;
  92.   font-size: 0.5rem;
  93.   background-color: rgba(10, 67, 188, 0.2);
  94. }
  95. .top .province ul.sub li {
  96.   color: #52ffff;
  97.   padding: 0.417rem 0.6rem;
  98. }
  99. .clock {
  100.   position: absolute;
  101.   top: -1.5rem;
  102.   right: 1.667rem;
  103.   font-size: 0.833rem;
  104.   color: #0bace6;
  105. }
  106. .clock i {
  107.   margin-right: 5px;
  108.   font-size: 0.833rem;
  109. }
  110. @media screen and (max-width: 1600px) {
  111.   .top span {
  112.     transform: scale(0.9);
  113.   }
  114.   .top .province ul.sup li {
  115.     padding: 0.4rem 0.5rem;
  116.   }
  117.   .top .province ul.sub li {
  118.     padding: 0.23rem 0.5rem;
  119.   }
  120.   .quarter span {
  121.     transform: scale(0.9);
  122.   }
  123. }

tab切换及定时

实现思路：

  • 准备假数据，只有一组
  • 当数据进入 tab 的时候
    • 激活当前的tab样式，删除其他tab的样式
    • 随机打乱事先准备好的一组数据
    • 根据新数据拼接html格式字符串，进行渲染
  • 默认激活第一个tab的效果
  • 开启定时器，按顺便切换

预备知识：排序sort函数

  1.  // ---------------------冒泡排序：
  2.   var arr = [55, 45, 16, 89, 78, 13];
  3.   // 外循环：比较 length -1趟
  4.   // 内循环： 第一趟：比较5次；
  5.   //         第二趟：比较4次；  长度 - 当前所在趟数
  8.   // ---------------------sort
  9.   // 数组.sort(function(a,b){
  10.   //    a,b形参；数组某次比较 前一个 后一个数据
  11.   //    return 必须要写上；
  12.   //    return a-b;         理解：如果a-b>0；交换！如果a-b<0; 不换！
  13.   //    return b-a;         理解：如果b-a>0；交换！如果b-a<0; 不换！
  14.   // });
  16.   // arr.sort(function(a, b) {
  17.   //   return b - a;
  18.   // });
  20.   // console.log(arr);
  23.   // 变异体：数组随机排序
  24.   arr.sort(function(a, b) {
  25.     return Math.random() - 0.5;
  26.   });
  28.   // 第一趟：第一次比较：Math.random() - 0.5>0; 交换：这一次比较两个数交换了！
  29.   // 第一趟：第二次比较：Math.random() - 0.5<0; 不换：这一次比较两个数不换了！

开始实现：

第一步：模拟数据

  1.    var data = [
  2.     { name: '可爱多', num: '9,086' },
  3.     { name: '娃哈哈', num: '8,341' },
  4.     { name: '喜之郎', num: '7,407' },
  5.     { name: '八喜', num: '6,080' },
  6.     { name: '小洋人', num: '6,724' },
  7.     { name: '好多鱼', num: '2,170' },
  8.   ]

第二步：绑定鼠标经过事件，激活样式，根据随机数据渲染内容。

  1.   $('.province').on('mouseenter','.sup li',function(){
  2.      // 样式
  3.      $(this).addClass('active').siblings().removeClass('active')
  5.       // 打乱数据
  6.      var randomData = data.sort(function(a,b){
  7.        return 0.5 - Math.random()
  8.      })
  9.      // 拼接字符串
  10.      var html = ''
  11.      randomData.forEach(function(item){
  12.        html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`
  13.      });
  15.      // 渲染
  16.      $('.sub').html(html);
  17.   })

第三步：默认激活第一个tab

  1.   // 所有的LI
  2.   var $lis = $('.province .sup li')
  3.   // 第一个默认激活
  4.   $lis.eq(0).mouseenter();

第四步：开启定时切换

  1. // 开启定时器 切换
  2. var index = 0
  3. setInterval(function () {
  4.     index++
  5.     // 大于等于5索引切换到0索引
  6.     if (index >= 5) index = 0
  7.     // 选中对应tab触发点击
  8.     $lis.eq(index).mouseenter()
  9. }, 1000)