精华内容
下载资源
问答
  • 文章目录DAY01-可视化项目01-项目介绍02-使用技术03-Echarts-介绍04-Echarts-体验初始化echarts实例对象05-Echarts-基础配置06-REM适配07-基础布局08-边框图片09-公用面板样式10-概览区域(overview)-布局11-监控区域...

    DAY01-可视化项目

    01-项目介绍

    ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。

    ​ 该项目除了使用了基础的DIV+CSS布局,还引入了一些C3技术,还引入了各类图表的绘制,以及高级的地图数据可视化案例。主要功能有:饼状图、柱状图、线形图、地图 …

    在这里插入图片描述

    02-使用技术

    完成该项目需要具备以下知识:

    • div + css 布局
    • flex 布局
    • css3动画
    • css3渐变
    • css3边框图片
    • 原生js + jquery 使用
    • rem适配
    • echarts基础

    粗略代码统计:

    • css 580行
    • html 450行
    • js 400行 (有效)

    03-Echarts-介绍

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

    大白话:

    04-Echarts-体验

    官方教程:[五分钟上手ECharts]

    自己步骤:

    <div id="main" style="width: 600px;height:400px;"></div>
    
    • 初始化echarts实例对象
    var myChart = echarts.init(document.getElementById('main'));
    
    • 指定配置项和数据(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'
        }]
    };
    
    • 将配置项设置给echarts实例对象
    myChart.setOption(option);
    

    05-Echarts-基础配置

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

    • series

      • 系列列表。每个系列通过 type 决定自己的图表类型
      • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    • xAxis:直角坐标系 grid 中的 x 轴

      • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    • yAxis:直角坐标系 grid 中的 y 轴

    • grid:直角坐标系内绘图网格。

    • title:标题组件

    • tooltip:提示框组件

    • legend:图例组件

    • color:调色盘颜色列表

      数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

    演示代码:

    var option = {
                color: ['pink', 'blue', 'green', 'skyblue', 'red'],
                title: {
                    text: '我的折线图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['直播营销', '联盟广告', '视频广告', '直接访问']
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    // 当刻度标签溢出的时候,grid 区域是否包含坐标轴的刻度标签。如果为true,则显示刻度标签
                    // 如果left right等设置为 0% 刻度标签就溢出了,此时决定是否显示刻度标签
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    // 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
                    boundaryGap: false,
                    data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '直播营销',
                        // 图表类型是线形图
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
    
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
    
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
    
                        data: [320, 332, 301, 334, 390, 330, 320]
                    }
                ]
            };
    

    06-REM适配

    • 设计稿是1920px

    • PC端适配: 宽度在 1024~1920之间页面元素宽高自适应

      1. flexible.js 把屏幕分为 24 等份

      2. cssrem 插件的基准值是 80px

        插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

        但是别忘记重启vscode软件保证生效

      3. 要把屏幕宽度约束在1024~1920之间有适配,实现代码:

    // 实现rem适配
    @media screen and (max-width: 1024px) {
         html {
             font-size: 42.66px !important;
         }
     }
    
     @media screen and (min-width: 1920px) {
         html {
             font-size: 80px !important;
         }
     }
    

    07-基础布局

    html结构:

    <body>
      <div class="viewport">
      	<div class="column">
          <!--概览-->                                    
        	<div></div>
    			<!--监控-->                                    
        	<div></div> 
    			<!--点位-->                                    
        	<div></div>                                           
        </div>
        <div class="column">
          <!--地图-->                                    
        	<div></div>
    			<!--用户-->                                    
        	<div></div>                                          
        </div>
        <div class="column">
          <!--订单-->                                    
        	<div></div>
    			<!--销售-->                                    
        	<div></div>                                  
        	<div>
          	<!--渠道-->                                    
        		<div></div>
          	<!--季度-->                                    
        		<div></div>
          </div>
    			<!--排行-->                                    
        	<div></div>                                     
        </div>                        
      </div>
    </body>
    
    • 效果图: 1920px * 1078px
    • body 设置背景图 ,行高1.15
    • 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;
    }
    

    08-边框图片

    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 lang="en">
    <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>
    

    09-公用面板样式

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

    切割示例图:

    在这里插入图片描述

    • 面板 .panel
      • 容器 .inner 内边距是 上下24px 左右 36px
    /* 公共面板样式  */
    .panel {
        position: relative;
        border: 15px solid transparent;
        border-width: .6375rem .475rem .25rem 1.65rem;
        border-image-source: url(../images/border.png);
        border-image-slice: 51 38 20 132;
        margin-bottom: .25rem;
    }
    .inner {
        position: absolute;
        top: -0.6375rem;
        left: -1.65rem;
        right: -0.475rem;
        bottom: -0.25rem;
        padding: .3rem .45rem;
       
    }
    .panel h3 {
      font-size: 0.25rem;
      color: #fff;
      font-weight: 400;
    }
    

    10-概览区域(overview)-布局

    html结构:

          <div class="overview panel">
            <div class="inner">
              <ul>
                <li>
                  <h4>2,190</h4>
                  <span>
                    <i class="icon-dot" style="color: #006cff"></i>
                    设备总数
                  </span>
                </li>
                <li class="item">
                  <h4>190</h4>
                  <span>
                    <i class="icon-dot" style="color: #6acca3"></i>
                    季度新增
                  </span>
                </li>
                <li>
                  <h4>3,001</h4>
                  <span>
                    <i class="icon-dot" style="color: #6acca3"></i>
                    运营设备
                  </span>
                </li>
                <li>
                  <h4>108</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    异常设备
                  </span>
                </li>
                </ul>
            </div>
          </div>
    

    样式描述:

    • 容器高度 110px
    • h4字体 28px #fff 左边距 4.8px 下间隙 8px
    • span字体 16px #4c9bfd
    /* 概览区域 */
    
    .overview {
        height: 1.375rem;
    }
    .overview ul {
        display: flex;
        justify-content: space-between;
    }
    .overview ul li h4 {
        font-size: .35rem;
        color: #fff;
        margin: 0 0 .1rem .06rem;
    }
    .overview ul li span {
        font-size: .2rem;
        color: #4c9bfd;
    }
    

    11-监控区域(monitor)-布局

    html结构:

          <!--监控-->
          <div class="monitor panel">
            <div class="inner">
              <div class="tabs">
                <a href="javascript:;" class="active">故障设备监控</a>
                <a href="javascript:;" >异常设备监控</a>
              </div>
              <div class="content">
                <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 class="row">
                      <span class="col">20190601</span>
                      <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190704</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000003</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20180701</span>
                      <span class="col">北京市昌平区建路金燕龙写字楼</span>
                      <span class="col">1000004</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000005</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000006</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                      <span class="col">1000007</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000008</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000009</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190710</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000010</span>
                      <span class="icon-dot"></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content">
                <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">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000001</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190703</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190704</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190705</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190706</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190707</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190708</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190709</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190710</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
    

    监控区域 monitor 大盒子的高度是 480px

    结构解释:

    • .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.2rem 透明度0
      • 鼠标经过后:背景 rgba(255, 255, 255, 0.1) 透明度1
    • col容器
      • 宽度:1rem 2.5rem 1rem
      • 第二个col 一行不换行 溢出 省略
    /* 监控区域 */
    .monitor{
      height: 6rem;
    }
    .monitor .inner{
      padding: .3rem 0;
      display: flex;
      flex-direction: column;
    }
    .monitor .tabs{
      padding: 0 .45rem;
      margin-bottom: 0.225rem;
      display: flex;
    }
    .monitor .tabs a{
      color:#1950c4;
      font-size: 0.225rem;
      padding: 0 .3375rem;
    }
    .monitor .tabs a:first-child{
      padding-left: 0;
      border-right: 0.025rem solid #00f2f1;
    }
    .monitor .tabs a.active{
      color: #fff;
    }
    .monitor .content{
      flex: 1;
      position: relative;
      display: none;
    }
    .monitor .head{
      display: flex;
      justify-content: space-between;
      line-height: 1.05;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 0.15rem 0.45rem;
      color: #68d8fe;
      font-size: 0.175rem;
    }
    .monitor .marquee-view {
      position: absolute;
      top: 0.5rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;
    }
    .monitor .row{
      display: flex;
      justify-content: space-between;
      line-height: 1.05;
      font-size: 0.15rem;
      color: #61a8ff;
      padding: 0.15rem 0.45rem;
    }
    .monitor .row .icon-dot{
      position: absolute;
      left: 0.2rem;
      opacity: 0;
    }
    .monitor .row:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #68d8fe;
    }
    .monitor .row:hover .icon-dot{
      opacity: 1;
    }
    .monitor .col:first-child{
      width: 1rem;
    }
    .monitor .col:nth-child(2){
      width: 2.5rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .monitor .col:nth-child(3){
      width: 1rem;
    }
    

    12-监控区域-效果

    切换功能:

    • 绑定 标签页点击 事件
    • 当前容器加active其他容器移除active
    • index对应的内容容器显示其他容器隐藏
      // 切换
     $(".monitor .tabs").on("click", "a", function() {
        $(this).addClass("active").siblings("a").removeClass("active");
        // console.log($(this).index());
        //   选取对应索引号的content
        $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
      });
    

    动画功能:

    • 实现思路:
      • 先克隆列表,追加在后面
      • marquee-view 占满剩余高度,溢出隐藏
        • 绝对定位,top 1.6rem bottom 0
        • 宽度100%,溢出隐藏
      • 使用animation实现动画
      • 使用 translateY 向上位移 50%
      • 动画时间15s,匀速播放,循环执行。

    js代码:

      // 动画
      $(".marquee-view .marquee").each(function() {
        // console.log($(this));
        var rows = $(this).children().clone();
        $(this).append(rows);
      });
    

    css代码:

    /* 通过CSS3动画滚动marquee */
    .marquee-view .marquee {
      animation: move 15s linear infinite;
    }
    @keyframes move {
      0% {
      }
      100% {
        transform: translateY(-50%);
      }
    }
    /* 3.鼠标经过marquee 就停止动画 */
    .marquee-view .marquee:hover {
      animation-play-state: paused;
    }
    

    13-点位区域(point)-布局

    html结构:

          <!-- 点位 -->
          <div class="point panel">
            <div class="inner">
              <h3>点位分布统计</h3>
              <div class="chart">
                <div class="pie"></div>
                <div class="data">
                  <div class="item">
                    <h4>320,11</h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35"></i>
                      点位总数
                    </span>
                  </div>
                  <div class="item">
                    <h4>418</h4>
                    <span>
                      <i class="icon-dot" style="color: #eacf19"></i>
                      本月新增
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
    

    css样式:

    point 盒子高度为 340px

    /* 点位 */
    .point {
      height: 4.25rem;
    }
    .point .chart {
      display: flex;
      margin-top: 0.3rem;
      justify-content: space-between;
    }
    .point .pie {
      width: 3.9rem;
      height: 3rem;
      margin-left: -0.125rem;
      background-color: pink;
    }
    .point .data {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 2.1rem;
      padding: .45rem .375rem;
      box-sizing: border-box;
      background-image: url(../images/rect.png);
      background-size: cover;
    }
    .point h4 {
      margin-bottom: 0.15rem;
      font-size: .35rem;
      color: #fff;
    }
    .point span {
      display: block;
      color: #4c9bfd;
      font-size: .2rem;
    }
    

    14-点位区域-饼图

    ECharts图表实现步骤:

    • 从官方示例中找到类似图表,适当修改,引入到HTML页面中。
    • 按照产品需求,来定制图表。

    1. HTML引入图表

    // 点位分布统计模块
    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".pie"));
      // 2. 指定配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
    
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["75%", "50%"],
            roseType: "area",
            data: [
              { value: 10, name: "rose1" },
              { value: 5, name: "rose2" },
              { value: 15, name: "rose3" },
              { value: 25, name: "rose4" },
              { value: 20, name: "rose5" },
              { value: 35, name: "rose6" },
              { value: 30, name: "rose7" },
              { value: 40, name: "rose8" }
            ]
          }
        ]
      };
    
      // 3. 配置项和数据给我们的实例化对象
      myChart.setOption(option);
    })();
    

    2. 定制需求

    第一步:参考官方例子,熟悉里面参数具体含义

    option = {
        // 提示框组件
        tooltip: {
          // trigger 触发方式。  非轴图形,使用item的意思是放到数据对应图形上触发提示
          trigger: 'item',
          // 格式化提示内容:
          // a 代表series系列图表名称  
          // b 代表series数据名称 data 里面的name    
          // c 代表series数据值 data 里面的value   
          // d代表  当前数据/总数据的比例
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 控制图表
        series: [
          {
            // 图表名称
            name: '点位统计',
            // 图表类型
            type: 'pie',
            // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
            // 饼形图半径。 可以是像素。也可以是百分比( 基于DOM容器大小)第一项是内半径,第二项是外半径(通过它可以实现饼形图大小)
            radius: ['10%', '70%'],
            // 图表中心位置 left 50%  top 50%  距离图表DOM容器
            center: ['50%', '50%'],
            // radius 半径模式,另外一种是 area 面积模式
            roseType: 'radius',
            // 数据集 value 数据的值 name 数据的名称
            data: [
                    {value:10, name:'rose1'},
                    {value:5, name:'rose2'},
                    {value:15, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            }
        ]
    };
    

    第二步:按照需求定制

    • 需求1:颜色设置
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    
    • 需求2:修改饼形图大小 ( series对象)
    radius: ['10%', '70%'],
    
    • 需求3: 把饼形图的显示模式改为 半径模式
     roseType: "radius",
    
    • 需求4:数据使用更换(series对象 里面 data对象)
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
    
    • 需求5:字体略小些 10 px ( series对象里面设置 )

      饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

    series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式, 注意它是一个对象
            label: {
              fontSize: 10
            },
          }
        ]
      };
    
    • 需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
      • 连接图表 6 px
      • 连接文字 8 px
    +        // 文字调整
    +        label:{
    +          fontSize: 10
    +        },
    +        // 引导线调整
    +        labelLine: {
    +          // 连接扇形图线长
    +          length: 6,
    +          // 连接文字线长
    +          length2: 8
    +        } 
    +      }
    +    ],
    
    
    • 需求6:浏览器缩放的时候,图表跟着自动适配。
    // 监听浏览器缩放,图表对象调用缩放resize函数
    window.addEventListener("resize", function() {
        myChart.resize();
      });
    

    点位统计完整JavaScript代码:

    // 点位分布统计模块
    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".pie"));
      // 2. 指定配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff"
        ],
        series: [
          {
            name: "点位统计",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            data: [
              { value: 20, name: "云南" },
              { value: 26, name: "北京" },
              { value: 24, name: "山东" },
              { value: 25, name: "河北" },
              { value: 20, name: "江苏" },
              { value: 25, name: "浙江" },
              { value: 30, name: "四川" },
              { value: 42, name: "湖北" }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
              fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
              // 连接到图形的线长度
              length: 6,
              // 连接到文字的线长度
              length2: 8
            }
          }
        ]
      };
    
      // 3. 配置项和数据给我们的实例化对象
      myChart.setOption(option);
      // 4. 当我们浏览器缩放的时候,图表也等比例缩放
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    })();
    

    15-地图区域 (map) -预留布局

    html结构:

          <!-- 地图 -->
          <div class="map">
            <h3>
              <span class="icon-cube"></span>
              设备数据统计
            </h3>
            <div class="chart">
              <div class="geo"></div>
            </div>
          </div>
    

    css样式:

    /* 地图  */
    .map {
      height: 7.225rem;
      margin-bottom: 0.25rem;
      display: flex;
      flex-direction: column;
    }
    .map h3 {
      line-height: 1;
      padding: 0.2rem 0;
      margin: 0;
      font-size: 0.25rem;
      color: #fff;
      font-weight: 400;
    }
    .map .icon-cube {
      color: #68d8fe;
    }
    .map .chart {
      flex: 1;
      background-color: rgba(255, 255, 255, 0.05);
    }
    .map .geo {
      width: 100%;
      height: 100%;
    }
    

    注意第二列(column) 有个外边距(上面 32px 左右 20px 下是 0)

    .viewport .column:nth-child(2) {
        flex: 4;
        margin: .4rem .25rem 0;
    }
    

    16-用户统计 (users) -布局

    html结构:

          <!-- 用户 -->
          <div class="users panel">
            <div class="inner">
              <h3>全国用户总量统计</h3>
              <div class="chart">
                <div class="bar"></div>
                <div class="data">
                  <div class="item">
                    <h4>120,899</h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35"></i>
                      用户总量
                    </span>
                  </div>
                  <div class="item">
                    <h4>248</h4>
                    <span>
                      <i class="icon-dot" style="color: #eacf19"></i>
                      本月新增
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
    

    css样式:

    /* 用户模块 */
    .users {
      height: 4.25rem;
      display: flex;
    }
    .users .chart {
      display: flex;
      margin-top: .3rem;
    }
    .users .bar {
      width: 7.35rem;
      height: 3rem;
    }
    .users .data {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 2.1rem;
      padding: .45rem .375rem;
      box-sizing: border-box;
      background-image: url(../images/rect.png);
      background-size: cover;
    }
    .users h4 {
      margin-bottom: .15rem;
      font-size: .35rem;
      color: #fff;
    }
    .users span {
      display: block;
      color: #4c9bfd;
      font-size: 0.2rem;
    }
    

    17-用户统计 (users) -柱状图

    实现步骤:

    • 从官方示例中找到最接近项目需求的例子,适当修改, 引入到HTML页面中
    • 按照产品需求,来定制图表。

    第一步:参考官方示例 + 分析

    (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    var option = {
        // 工具提示
        tooltip: {
          // 触发类型  经过轴触发axis  经过轴触发item
          trigger: 'axis',
          // 轴触发提示才有效
          axisPointer: {    
            // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果       
            type: 'shadow'        
          }
        },
        // 图表边界控制
        grid: {
          // 距离 上右下左 的距离
          left: '3%',
          right: '4%',
          bottom: '3%',
          // 是否包含文本
          containLabel: true
        },
        // 控制x轴
        xAxis: [
          {
            // 使用类目,必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 刻度设置
            axisTick: {
              // true意思:图形在刻度中间
              // false意思:图形在刻度之间
              alignWithLabel: true
            }
          }
        ],
        // 控制y轴
        yAxis: [
          {
            // 使用数据的值设为刻度文字
            type: 'value'
          }
        ],
        // 控制x轴
        series: [
          {
            // 图表数据名称
            name: '用户统计',
            // 图表类型
            type: 'bar',
            // 柱子宽度
            barWidth: '60%',
            // 数据
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
        
      // 3. 把配置给实例对象
      myChart.setOption(option);
    })();
    

    第二步:按照需求修改

    • 需求1: 修改柱子的颜色
    // 修改线性渐变色方式 1
    color: new echarts.graphic.LinearGradient(
         // (x1,y2) 点到点 (x2,y2) 之间进行渐变
         0, 0, 0, 1,
         [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
        ]
     ),
    // 修改线性渐变色方式 2
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
        }, {
            offset: 1, color: 'blue' // 100% 处的颜色
        }],
        globalCoord: false // 缺省为 false
    },
    
    • 需求2: 提示框组件放到柱子上触发, 没有阴影等效果
    //提示框组件
    tooltip: {
        trigger: 'item',
       // axisPointer: {            // 坐标轴指示器,坐标轴触发有效  这个模块我们此时不需要删掉即可
           // type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
       // }
    },
    
    • 需求3: 修改柱形图表大小, 以及相关网格。
      • 饼形图修改图表大小是通过 series 对象里面的 radius
      • 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
      • 显示网格 show: true,网格颜色是 borderColor
    // 直角坐标系内绘图网格(区域)
    grid: {
       top: '3%',
       right: '3%',
       bottom: '3%',
       left: '0%',
       //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
       containLabel: true,
       // 是否显示直角坐标系网格
       show: true,
       //grid 四条边框的颜色
       borderColor: 'rgba(0, 240, 255, 0.3)'
    },
    
    
    • 需求4: X 轴调整
      • 柱子在刻度之间
      • 剔除刻度不显示
      • 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
      • 修改x轴线的颜色 axisLine 里面的 lineStyle
        // 控制x轴
        xAxis: [
          {
            // 使用类目,必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 刻度设置
            axisTick: {
               // true意思:图形和刻度居中中间
               // false意思:图形在刻度之间
               alignWithLabel: false,
               // 不显示刻度
               show: false
            },        
            // x坐标轴文字标签样式设置
            axisLabel: {
              color: '#4c9bfd'
           },
           // x坐标轴颜色设置
           axisLine:{
              lineStyle:{
                  color:'rgba(0, 240, 255, 0.3)',
                  // width:8,  x轴线的粗细
                  // opcity: 0,   如果不想显示x轴线 则改为 0
                 }
            }
          }
    
    • 需求5: Y 轴调整
      • 剔除刻度不显示
      • Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置
      • Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置
        // 控制y轴
        yAxis: [
          {
            // 使用类目,必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 刻度设置
            axisTick: {
               // 不显示刻度
               show: false
            },        
            // y坐标轴文字标签样式设置
            axisLabel: {
              color: '#4c9bfd'
           },
           // y坐标轴颜色设置
            axisLine:{
              lineStyle:{
                   color:'rgba(0, 240, 255, 0.3)',
                  // width:8,  x轴线的粗细
                  // opcity: 0,   如果不想显示x轴线 则改为 0
                 }
            },
            // y轴 分割线的样式 
             splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
             }     
        ],
    
    • 需求6:调整数据,与省略图形定制
    // series
    data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]
    
    // xAxis
    data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']
    
    • 省略图形

      • 经过图形才显示提示,且省略的柱子不需要提示
      • 图形单独设置颜色
      // 中间省略的数据  准备三项
      var item = {
          name:'',
          value: 1200,
          // 柱子颜色
          itemStyle: {
            color: '#254065'
          },
           // 鼠标经过柱子颜色
          emphasis: {
            itemStyle: {
              color: '#254065'
            }
          },
          // 工具提示隐藏
          tooltip: {
            extraCssText: 'opacity:0'
          },
        }
      
      // series配置data选项在中使用
      data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],
      
      // 4. 当我们浏览器缩放的时候,图表也等比例缩放
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    

    18-订单区域(order)-布局

    html结构:

          <!-- 订单 -->
          <div class="order panel">
            <div class="inner">
              <!-- 筛选 -->
              <div class="filter">
                <a href="javascript:;"  class="active">365天</a>
                <a href="javascript:;" >90天</a>
                <a href="javascript:;" >30天</a>
                <a href="javascript:;" >24小时</a>
              </div>
              <!-- 数据 -->
              <div class="data">
                <div class="item">
                  <h4>20,301,987</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35;"></i>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4>99834</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19;"></i>
                    销售额(万元)
                  </span>
                </div>
              </div>
            </div>
          </div>
    

    css样式:

    /* 订单 */
    .order {
      height: 1.875rem;
    }
    .order .filter {
      display: flex;
    }
    .order .filter a {
      display: block;
      height: 0.225rem;
      line-height: 1;
      padding: 0 0.225rem;
      color: #1950c4;
      font-size: 0.225rem;
      border-right: 0.025rem solid #00f2f1;
    }
    .order .filter a:first-child {
      padding-left: 0;
    }
    .order .filter a:last-child {
      border-right: none;
    }
    .order .filter a.active {
      color: #fff;
      font-size: 0.25rem;
    }
    .order .data {
      display: flex;
      margin-top: 0.25rem;
    }
    .order .item {
      width: 50%;
    }
    .order h4 {
      font-size: 0.35rem;
      color: #fff;
      margin-bottom: 0.125rem;
    }
    .order span {
      display: block;
      color: #4c9bfd;
      font-size: 0.2rem;
    }
    

    18-订单区域(order)-效果 ( 课后作业 )

    实现步骤:

    • 提前准备数据
    • 点击后切tab激活样式
    • 点击后切换数据内容
    • 开启定时器动态切换数据
    // 订单功能
    (function(){
      // 1. 准备数据
      var data = {
        day365: { orders: '20,301,987', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' }
      }
      // 获取显示 订单数量 容器
      var $h4Orders = $('.order h4:eq(0)')
      // 获取显示 金额数量 容器
      var $h4Amount = $('.order h4:eq(1)')
      $('.order').on('click','.filter a',function(){
        // 2. 点击切换激活样式
        $(this).addClass('active').siblings().removeClass('active')
        // 3. 点击切换数据
        var currdata = data[this.dataset.key]
        $h4Orders.html(currdata.orders)
        $h4Amount.html(currdata.amount)
      })
      // 4. 开启定时器切换数据
      var index = 0
      var $allTab = $('.order .filter a')
      setInterval(function(){
        index ++ 
        if (index >= 4) index = 0
        $allTab.eq(index).click()
      },5000)
    })();
    

    19-销售统计( sales )-布局

    html结构:

          <!-- 销售额 -->
          <div class="sales panel">
            <div class="inner">
              <div class="caption">
                <h3>销售额统计</h3>
                <a href="javascript:;" class="active" ></a>
                <a href="javascript:;" ></a>
                <a href="javascript:;" ></a>
                <a href="javascript:;" ></a>
              </div>
              <div class="chart">
                <div class="label">单位:万</div>
                <div class="line"></div>
              </div>
            </div>
          </div>
    

    css样式:

    /* 销售区域 */
    .sales {
      height: 3.1rem;
    }
    .sales .caption {
      display: flex;
      line-height: 1;
    }
    .sales h3 {
      height: 0.225rem;
      padding-right: 0.225rem;
      border-right: 0.025rem solid #00f2f1;
    }
    .sales a {
      padding: 0.05rem;
      font-size: 0.2rem;
      margin: -0.0375rem 0 0 0.2625rem;
      border-radius: 0.0375rem;
      color: #0bace6;
    }
    .sales a.active {
      background-color: #4c9bfd;
      color: #fff;
    }
    .sales .inner {
      display: flex;
      flex-direction: column;
    }
    .sales .chart {
      flex: 1;
      padding-top: 0.1875rem;
      position: relative;
    }
    .sales .label {
      position: absolute;
      left: 0.525rem;
      top: 0.225rem;
      color: #4996f5;
      font-size: 0.175rem;
    }
    .sales .line {
      width: 100%;
      height: 100%;
    }
    

    19-销售统计( sales )-线形图

    实现步骤:

    • 寻找官方的类似示例,给予分析, 引入到HTML页面中
    • 按照需求来定制它。

    第一步: 寻找官方的类似示例,给予分析。

    官方参考示例:https://www.echartsjs.com/examples/zh/editor.html?c=line-stack

    // 销售统计模块
    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".line"));
      // 2. 指定配置和数据
      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["邮件营销", "联盟广告"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
    
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
    
      // 3. 把配置和数据给实例对象
      myChart.setOption(option);
    })();
    

    第二步: 按照需求来定制它。

    • 需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。
        // 设置网格样式
        grid: { 
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: true,// 显示边框
          borderColor: '#012f4a',// 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
    • 需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%
     // 图例组件
        legend: {
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },
    
    • 需求3: x轴相关配置
      • 刻度去除
      • x轴刻度标签字体颜色:#4c9bfd
      • 剔除坐标轴线颜色(将来使用Y轴分割线)
      • 轴两端是不需要内间距 boundaryGap
        xAxis: {
          type: 'category',
          data: ["周一", "周二"],
    	  axisTick: {
             show: false // 去除刻度线
           },
           axisLabel: {
             color: '#4c9bfd' // 文本颜色
           },
           axisLine: {
             show: false // 去除轴线
           },
           boundaryGap: false  // 去除轴内间距
        },
    
    • 需求4: y轴的定制
      • 刻度去除
      • 字体颜色:#4c9bfd
      • 分割线颜色:#012f4a
        yAxis: {
          type: 'value',
          axisTick: {
            show: false  // 去除刻度
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a' // 分割线颜色
            }
          }
        },
    
    • 需求5: 两条线形图定制
      • 颜色分别:#00f2f1 #ed3f35
      • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
        color: ['#00f2f1', '#ed3f35'],
    	series: [{
          name:'预期销售额',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // 折线修饰为圆滑
          smooth: true,
          },{
          name:'实际销售额',
          data: [100, 331, 200, 123, 233, 543, 400],
          type: 'line',
          smooth: true,
        }]
    
    • 需求6: 配置数据
    // x轴的文字
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    
    // 图标数据
        series: [{
          name:'预期销售额',
          data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          type: 'line',
          smooth: true
        },{
          name:'实际销售额',
          data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
          type: 'line',
          smooth: true
          }
        }]
    

    总结:现在给的是年份数据,还需要切换效果。

    19-销售统计( sales )-切换效果

    实现步骤:

      1. 准备切换需要依赖的数据 4组
      1. 绑定点击事件
      • 切换激活 tab 的样式
      • 切换图表依赖的数据(重新渲染图表)
      1. 开启定时器,进行切换, 鼠标经过sales停止定时器,离开开启定时器

    第一步:准备数据,使用数据

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

    第二步:点击后切换

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

    第三步:tab栏自动切换效果

    • 开启定时器每隔3s,自动让a触发点击事件即可
    • 鼠标经过sales,关闭定时器,离开开启定时器
    var as = $(".sales .caption a");
      var index = 0;
      var timer = setInterval(function() {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
      }, 1000);
      // 鼠标经过sales,关闭定时器,离开开启定时器
      $(".sales").hover(
        function() {
          clearInterval(timer);
        },
        function() {
          clearInterval(timer);
          timer = setInterval(function() {
            index++;
            if (index >= 4) index = 0;
            as.eq(index).click();
          }, 1000);
        }
      );
    

    自动缩放

     // 当我们浏览器缩放的时候,图表也等比例缩放
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    

    20-渠道区域&销售进度-布局

    html结构:

         <!-- 渠道 季度 -->
         <div class="wrap">
              <div class="channel panel">
                <div class="inner">
                  <h3>渠道分布</h3>
                  <div class="data">
                    <div class="radar"></div>
                  </div>
                </div>
              </div>
              <div class="quarter panel">
                <div class="inner">
                  <h3>一季度销售进度</h3>
                  <div class="chart">
                    <div class="box">
                      <div class="gauge"></div>
                      <div class="label">75<small> %</small></div>
                    </div>
                    <div class="data">
                      <div class="item">
                        <h4>1,321</h4>
                        <span>
                          <i class="icon-dot" style="color: #6acca3"></i>
                          销售额(万元)
                        </span>
                      </div>
                      <div class="item">
                        <h4>150%</h4>
                        <span>
                          <i class="icon-dot" style="color: #ed3f35"></i>
                          同比增长
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
    

    css样式:

    /* 渠道区块 */
    .wrap {
      display: flex;
    }
    .channel,
    .quarter {
      flex: 1;
      height: 2.9rem;
    }
    .channel {
      margin-right: 0.25rem;
    }
    .channel .data {
      overflow: hidden;
    }
    .channel .data .radar {
      height: 2.1rem;
      width: 100%;
      background-color: pink;
    }
    .channel h4 {
      color: #fff;
      font-size: 0.4rem;
      margin-bottom: 0.0625rem;
    }
    .channel small {
      font-size: 50%;
    }
    .channel span {
      display: block;
      color: #4c9bfd;
      font-size: 0.175rem;
    }
    /* 季度区块 */
    .quarter .inner {
      display: flex;
      flex-direction: column;
      margin: 0 -0.075rem;
    }
    .quarter .chart {
      flex: 1;
      padding-top: 0.225rem;
    }
    .quarter .box {
      position: relative;
    }
    .quarter .label {
      transform: translate(-50%, -30%);
      color: #fff;
      font-size: 0.375rem;
      position: absolute;
      left: 50%;
      top: 50%;
    }
    .quarter .label small {
      font-size: 50%;
    }
    .quarter .gauge {
      height: 1.05rem;
    }
    .quarter .data {
      display: flex;
      justify-content: space-between;
    }
    .quarter .item {
      width: 50%;
    }
    .quarter h4 {
      color: #fff;
      font-size: 0.3rem;
      margin-bottom: 0.125rem;
    }
    .quarter span {
      display: block;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #4c9bfd;
      font-size: 0.175rem;
    }
    

    21-渠道分布(channel)-雷达图

    实现步骤:

    • 寻找官方的类似示例,给予分析,并引入到HTML页面中
    • 按照需求来定制它

    第一步: 参考类似实例: https://www.echartsjs.com/examples/zh/editor.html?c=radar-aqi

    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".radar"));
      // 2.指定配置
      var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
      var lineStyle = {
        normal: {
          width: 1,
          opacity: 0.5
        }
      };
      var option = {
        backgroundColor: "#161627",
        radar: {
          indicator: [
            { name: "AQI", max: 300 },
            { name: "PM2.5", max: 250 },
            { name: "PM10", max: 300 },
            { name: "CO", max: 5 },
            { name: "NO2", max: 200 },
            { name: "SO2", max: 100 }
          ],
          shape: "circle",
          splitNumber: 5,
          name: {
            textStyle: {
              color: "rgb(238, 197, 102)"
            }
          },
          splitLine: {
            lineStyle: {
              color: [
                "rgba(238, 197, 102, 0.1)",
                "rgba(238, 197, 102, 0.2)",
                "rgba(238, 197, 102, 0.4)",
                "rgba(238, 197, 102, 0.6)",
                "rgba(238, 197, 102, 0.8)",
                "rgba(238, 197, 102, 1)"
              ].reverse()
            }
          },
          splitArea: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(238, 197, 102, 0.5)"
            }
          }
        },
        series: [
          {
            name: "北京",
            type: "radar",
            lineStyle: lineStyle,
            data: dataBJ,
            symbol: "none",
            itemStyle: {
              color: "#F9713C"
            },
            areaStyle: {
              opacity: 0.1
            }
          }
        ]
      };
      // 3.把配置和数据给对象
      myChart.setOption(option);
    })();
    

    第二步: 按照需求来定制它

    • 需求1: 去掉背景颜色,调整雷达图大小 65%
    radar:{
        center: ['50%', '50%'],
        // 外半径占据容器大小
        radius: '65%',
    }  
    

    需求2: 指示器轴的分割段数为4条(4个圆圈)

    radar:{
        center: ['50%', '50%'],
        // 外半径占据容器大小
        radius: '65%',
        // 指示器轴的分割段数
        splitNumber: 4,
    }  
    

    需求3: 雷达图分割线设为白色半透明 0.5

     // 坐标轴在 grid 区域中的分隔线(圆圈)
       splitLine: {
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.5)',
               // width: 2,
               // type: 'dashed'
               }
       },
    

    需求4: 雷达图 坐标轴轴线相关设置(竖线) axisLine

    // 坐标轴轴线相关设置(竖线)axisLine
    axisLine: {
           show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                    // width: 1,
                    // type: 'solid'
                 }
     },
    

    需求5: 修饰雷达图文字颜色为 #4c9bfd

    name: {
        // 修饰雷达图文本颜色
         textStyle: {
           color: '#4c9bfd'
         }
    },
    

    需求6: 修饰 区域填充样式 series 对象

    • 区域填充的背景颜色设置为: rgba(238, 197, 102, 0.6)
     areaStyle: {
         color: 'rgba(238, 197, 102, 0.6)',
    },
    
    • 区域填充的线条颜色为白色
    // 线条样式
      lineStyle: {
             normal: {
                  color: '#fff',
                  // width: 1
             }
    },
    

    需求7: 标记的图形(拐点)设置 注意 series 里面设置

    • 用圆点显示, 拐点的大小设置为 5
    • 小圆点设置为白色
    • 在小圆点上显示相关数据,颜色设置为白色,10像素
    // symbol 标记的样式(拐点),还可以取值'rect' 方块 ,'arrow' 三角等
    symbol: 'circle', 
    // 拐点的大小  
    symbolSize: 5, 
    // 小圆点(拐点)设置为白色
    itemStyle: {
           color: '#fff'
    },
    // 在圆点上显示相关数据
    label: {
         show: true,
         color: '#fff',
         fontSize: 10
    },    
    

    需求8: 鼠标经过显示提示框组件

    tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ['60%', '10%'],
    },
    

    需求9: 更换数据

     // 雷达图的指示器 内部填充数据
      indicator: [
            { name: '机场', max: 100 },
            { name: '商场', max: 100 },
            { name: '火车站', max: 100 },
            { name: '汽车站', max: 100 },
            { name: '地铁', max: 100 }
     ],
    
    data: [[90, 19, 56, 11, 34]],
    

    整个代码

    // 销售渠道模块 雷达图
    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".radar"));
      // 2.指定配置
    
      var option = {
        tooltip: {
          show: true,
          // 控制提示框组件的显示位置
          position: ["60%", "10%"]
        },
        radar: {
          indicator: [
            { name: "机场", max: 100 },
            { name: "商场", max: 100 },
            { name: "火车站", max: 100 },
            { name: "汽车站", max: 100 },
            { name: "地铁", max: 100 }
          ],
          // 修改雷达图的大小
          radius: "65%",
          shape: "circle",
          // 分割的圆圈个数
          splitNumber: 4,
          name: {
            // 修饰雷达图文字的颜色
            textStyle: {
              color: "#4c9bfd"
            }
          },
          // 分割的圆圈线条的样式
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255, 0.5)"
            }
          },
          splitArea: {
            show: false
          },
          // 坐标轴的线修改为白色半透明
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.5)"
            }
          }
        },
        series: [
          {
            name: "北京",
            type: "radar",
            // 填充区域的线条颜色
            lineStyle: {
              normal: {
                color: "#fff",
                width: 1,
                opacity: 0.5
              }
            },
            data: [[90, 19, 56, 11, 34]],
            // 设置图形标记 (拐点)
            symbol: "circle",
            // 这个是设置小圆点大小
            symbolSize: 5,
            // 设置小圆点颜色
            itemStyle: {
              color: "#fff"
            },
            // 让小圆点显示数据
            label: {
              show: true,
              fontSize: 10
            },
            // 修饰我们区域填充的背景颜色
            areaStyle: {
              color: "rgba(238, 197, 102, 0.6)"
            }
          }
        ]
      };
      // 3.把配置和数据给对象
      myChart.setOption(option);
      // 当我们浏览器缩放的时候,图表也等比例缩放
      window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    })();
    
    

    22-销售进度 (quarter) -饼状图

    实现步骤:

    • 寻找官方的类似示例,给予分析,引入到HTML页面中
    • 按照需求来定制它。

    第一步:参考官方示例:https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut

    // 销售模块 饼形图 半圆形 设置方式
    (function() {
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".gauge"));
      // 2. 指定数据和配置
      var option = {
        series: [
          {
            name: "销售进度",
            type: "pie",
            radius: ["50%", "70%"],
            //是否启用防止标签重叠策略
            // avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{ value: 100 }, { value: 100 }, { value: 200 }]
          }
        ]
      };
      // 3. 把数据和配置给实例对象
      myChart.setOption(option);
    })();
    

    第二步:进行定制

    需求1:改成半圆,图表大一些,让50%文字在中心。

      var option = {
        series: [
          {
            type: 'pie',
            // 放大图形
            radius: ['130%', '150%'],  
            // 移动下位置  套住50%文字
            center: ['48%', '80%'],   
            label: {
              normal: {
                show: false
              }
            },  
            // 起始角度,支持范围[0, 360]
            startAngle: 180,
            data: [
              { value: 100 }, // 不需要名称
              { value: 100,}, // 不需要名称
              { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
            ]
          }
        ]
      }
    

    需求2:鼠标经过无需变大,修改第一段颜色渐变#00c9e0->#005fc1,修改第二段颜色#12274d。

           // 鼠标经过不变大
           hoverOffset: 0,  
            data: [
              {
                value: 100,
                itemStyle: {
                  // 颜色渐变#00c9e0->#005fc1
                  color: new echarts.graphic.LinearGradient(
                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                    0,
                    0,
                    0,
                    1,
                    [
                      { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                      { offset: 1, color: "#005fc1" } // 1 结束颜色
                    ]
                  )
                }
              },  
            { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d
    

    23-热销排行(top)-布局

    html结构:

          <!-- 排行榜 -->
          <div class="top panel">
            <div class="inner">
              <div class="all">
                <h3>全国热榜</h3>
                <ul>
                  <li>
                    <i class="icon-cup1" style="color: #d93f36;"></i>
                    可爱多
                  </li>
                  <li>
                    <i class="icon-cup2" style="color: #68d8fe;"></i>
                    娃哈啥
                  </li>
                  <li>
                    <i class="icon-cup3" style="color: #4c9bfd;"></i>
                    喜之郎
                  </li>
                </ul>
              </div>
              <div class="province">
                <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                <div class="data">
                  <ul class="sup">
                    <li>
                      <span>北京</span>
                      <span>25,179 <s class="icon-up"></s></span>
                    </li>
                    <li>
                      <span>河北</span>
                      <span>23,252 <s class="icon-down"></s></span>
                    </li>
                    <li>
                      <span>上海</span>
                      <span>20,760 <s class="icon-up"></s></span>
                    </li>
                    <li>
                      <span>江苏</span>
                      <span>23,252 <s class="icon-down"></s></span>
                    </li>
                    <li>
                      <span>山东</span>
                      <span>20,760 <s class="icon-up"></s></span>
                    </li>
                  </ul>
                  <ul class="sub">
                    <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
                  </ul>
                </div>
              </div>
            </div>
          </div>
    

    css样式:

    /* 排行榜 */
    .top {
      height: 3.5rem;
    }
    .top .inner {
      display: flex;
    }
    .top .all {
      display: flex;
      flex-direction: column;
      width: 2.1rem;
      color: #4c9bfd;
      font-size: 0.175rem;
      vertical-align: middle;
    }
    .top .all ul {
      padding-left: 0.15rem;
      margin-top: 0.15rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .top .all li {
      overflow: hidden;
    }
    .top .all [class^="icon-"] {
      font-size: 0.45rem;
      vertical-align: middle;
      margin-right: 0.15rem;
    }
    .top .province {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #fff;
    }
    .top .province i {
      padding: 0 0.15rem;
      margin-top: 0.0625rem;
      float: right;
      font-style: normal;
      font-size: 0.175rem;
      color: #0bace6;
    }
    .top .province s {
      display: inline-block;
      transform: scale(0.8);
      text-decoration: none;
    }
    .top .province .icon-up {
      color: #dc3c33;
    }
    .top .province .icon-down {
      color: #36be90;
    }
    .top .province .data {
      flex: 1;
      display: flex;
      margin-top: 0.175rem;
    }
    .top .province ul {
      flex: 1;
      line-height: 1;
      margin-bottom: 0.175rem;
    }
    .top .province ul li {
      display: flex;
      justify-content: space-between;
    }
    .top .province ul span {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .top .province ul.sup {
      font-size: 0.175rem;
    }
    .top .province ul.sup li {
      color: #4995f4;
      padding: 0.15rem;
    }
    .top .province ul.sup li.active {
      color: #a3c6f2;
      background-color: rgba(10, 67, 188, 0.2);
    }
    .top .province ul.sub {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 0.15rem;
      background-color: rgba(10, 67, 188, 0.2);
    }
    .top .province ul.sub li {
      color: #52ffff;
      padding: 0.125rem 0.175rem;
    }
    .clock {
      position: absolute;
      top: -0.45rem;
      right: 0.5rem;
      font-size: 0.25rem;
      color: #0bace6;
    }
    .clock i {
      margin-right: 5px;
      font-size: 0.25rem;
    }
    @media screen and (max-width: 1600px) {
      .top span {
        transform: scale(0.9);
      }
      .top .province ul.sup li {
        padding: 0.125rem 0.15rem;
      }
      .top .province ul.sub li {
        padding: 0.0625rem 0.15rem;
      }
      .quarter span {
        transform: scale(0.9);
      }
    }
    

    23-热销排行(top)-效果

    实现思路

    • 准备后台返回的真实数据
    • 利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串,进行渲染)
    • 当鼠标进入 tab 的时候
      • 激活当前的tab样式,删除其他tab的样式
      • 渲染各省热销 sub 模块 (拼接html格式字符串,进行渲染)
    • 默认激活第一个tab的效果
    • 开启定时器,按依次切换

    预备知识

    • 扩展知识:ES6模版字符
    // 模版字符
    var star = {
            name: "刘德华",
            age: 18
          };
    //   以前的写法 拼接的时候引号很容易出问题
    console.log("我的名字是" + star.name + "我的年龄是" + star.age);
    //   ES6 模板字符写法
    console.log(`我的名字是${star.name}我的年龄是${star.age}`);
    console.log(`<span>${star.name}</span><span>${star.age}</span>`);
    

    开始实现

    第一步:得到后台数据(实际开发中,这个数据通过ajax请求获得)

        var hotData = [
          {
            city: '北京',  // 城市
            sales: '25, 179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
              { name: '可爱多', num: '9,086', flag: true },
              { name: '娃哈哈', num: '8,341', flag: true },
              { name: '喜之郎', num: '7,407', flag: false },
              { name: '八喜', num: '6,080', flag: false },
              { name: '小洋人', num: '6,724', flag: false },
              { name: '好多鱼', num: '2,170', flag: true },
            ]
          },
          {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
              { name: '可爱多', num: '3,457', flag: false },
              { name: '娃哈哈', num: '2,124', flag: true },
              { name: '喜之郎', num: '8,907', flag: false },
              { name: '八喜', num: '6,080', flag: true },
              { name: '小洋人', num: '1,724', flag: false },
              { name: '好多鱼', num: '1,170', flag: false },
            ]
          },
          {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
              { name: '可爱多', num: '2,345', flag: true },
              { name: '娃哈哈', num: '7,109', flag: true },
              { name: '喜之郎', num: '3,701', flag: false },
              { name: '八喜', num: '6,080', flag: false },
              { name: '小洋人', num: '2,724', flag: false },
              { name: '好多鱼', num: '2,998', flag: true },
            ]
          },
          {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
              { name: '可爱多', num: '2,156', flag: false },
              { name: '娃哈哈', num: '2,456', flag: true },
              { name: '喜之郎', num: '9,737', flag: true },
              { name: '八喜', num: '2,080', flag: true },
              { name: '小洋人', num: '8,724', flag: true },
              { name: '好多鱼', num: '1,770', flag: false },
            ]
          },
           {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
              { name: '可爱多', num: '9,567', flag: true },
              { name: '娃哈哈', num: '2,345', flag: false },
              { name: '喜之郎', num: '9,037', flag: false },
              { name: '八喜', num: '1,080', flag: true },
              { name: '小洋人', num: '4,724', flag: false },
              { name: '好多鱼', num: '9,999', flag: true },
            ]
          }
        ]
    

    第二步:根据数据渲染各省热销 sup 模块内容

    • 删掉原先自带小li
    • 遍历数据 $.each()
    • 拼接字符串把数据渲染到 li 的span 里面
    • 追加给 .sup 盒子
     var supHTML = "";
      $.each(hotData, function(index, item) {
        // console.log(item);
        supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
        ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
      });
      $(".sup").html(supHTML);
    

    第三步:当数据进入 tab 的时候

    • 激活当前的tab样式,删除其他tab的样式
    • 渲染各省热销 sub 模块
      • 注意鼠标进入tab, 只遍历 当前索引号对应的 城市对象里面的 brands
      • 拼接html格式字符串,进行渲染
     
    

    第四步:默认激活第一个tab

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

    第五步:开启定时切换

    • 定时器里面 mouseenter 冲突问题的解决方案

      定时器里面不加mousenter 事件,而是直接重新渲染数据就可以(执行鼠标经过事件里面的代码)

      最好把渲染的代码封装到函数里面

     var index = 0;
      var timer = setInterval(function() {
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
      }, 2000);
    
      $(".province .sup").hover(
        // 鼠标经过事件
        function() {
          clearInterval(timer);
        },
        // 鼠标离开事件
        function() {
          clearInterval(timer);
          timer = setInterval(function() {
            index++;
            if (index >= 5) index = 0;
            // lis.eq(index).mouseenter();
            render(lis.eq(index));
          }, 2000);
        }
      );
    

    24-Echarts-社区介绍

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

    在这里插入图片描述

    • 在这里可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。

    25-Echarts-map使用(扩展)

    参考社区的例子:https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

    实现步骤:

    • 第一需要下载china.js提供中国地图的js文件
    • 第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
    • 使用社区提供的配置即可。

    需要修改:

    • 去掉图例组件和标题组件
    • 去掉背景颜色
    • 修改地图省份背景 #142957
    • 地图放大通过 zoom 设置为1.2即可
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: '#0b1c2d'
            }
          }
        },
    

    总结:这例子是扩展案例,大家以后可以多看看社区里面的案例。

    26-总结

    总结:实现一个需求,需要去推导,具备推导的能力需要练习,时间问题。

    源代码

    在这里插入图片描述

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>数据可视化项目</title>
        <link rel="stylesheet" href="fonts/icomoon.css"/>
        <link rel="stylesheet" href="css/index.css"/>
        <script src="js/echarts.min.js"></script>
        <script src="js/flexible.js"></script>
        <script src="js/jquery.min.js"></script>
    </head>
    
    <body>
    <!-- 父容器大盒子 -->
    <div class="viewport">
        <div class="column">
            <!-- 概览区域模块制作 -->
            <div class="panel overview">
                <div class="inner">
                    <ul>
                        <li>
                            <h4>2,190</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff"></i>
                                设备总数
                            </span>
                        </li>
                        <li class="item">
                            <h4>190</h4>
                            <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                季度新增
                            </span>
                        </li>
                        <li>
                            <h4>3,001</h4>
                            <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                运营设备
                            </span>
                        </li>
                        <li>
                            <h4>108</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                异常设备
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 监控区域模块制作 -->
            <div class="panel monitor">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" class="active">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</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 class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平区建路金燕龙写字楼</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <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">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 点位分布统计模块制作 -->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图模块 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    设备数据统计
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户统计模块 -->
            <div class="users panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    用户总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" class="active">365天</a>
                        <a href="javascript:;">90天</a>
                        <a href="javascript:;">30天</a>
                        <a href="javascript:;">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>20,301,987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4>99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额(万元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计</h3>
                        <a href="javascript:;" class="active" data-type="year"></a>
                        <a href="javascript:;" data-type="quarter"></a>
                        <a href="javascript:;" data-type="month"></a>
                        <a href="javascript:;" data-type="week"></a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:万</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道分布以及季度销售模块 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="radar"></div>
                        </div>
                    </div>
                </div>
                <!-- 销售进度模块 -->
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">50<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <!-- 全国热榜模块制作 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全国热榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                可爱多
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                娃哈啥
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                喜之郎
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省热销 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <!-- <li>
                                  <span>北京</span>
                                  <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                  <span>河北</span>
                                  <span>23,252 <s class="icon-down"></s></span>
                                </li> -->
                            </ul>
                            <ul class="sub">
                                <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>
    <!-- 想使用中国地图必须先引用这个china.js文件 -->
    <script src="js/china.js"></script>
    <!-- 引入我们自己的地图js文件 -->
    <script src="js/myMap.js"></script>
    </body>
    </html>
    

    index.css

    /*清除元素默认的内外边距  */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /*让所有斜体 不倾斜*/
    em,
    i {
        font-style: normal;
    }
    
    /*去掉列表前面的小点*/
    li {
        list-style: none;
    }
    
    /*图片没有边框   去掉图片底侧的空白缝隙*/
    img {
        border: 0; /*ie6*/
        vertical-align: middle;
    }
    
    /*让button 按钮 变成小手*/
    button {
        cursor: pointer;
    }
    
    /*取消链接的下划线*/
    a {
        color: #666;
        text-decoration: none;
    }
    
    a:hover {
        color: #e33333;
    }
    
    h4 {
        font-weight: 400;
    }
    
    body {
        background: url(../images/bg.jpg) no-repeat 0 0 / cover;
        /* background-size: cover; */
    }
    
    /* // 实现rem适配 */
    @media screen and (max-width: 1024px) {
        html {
            font-size: 42.66px !important;
        }
    }
    
    @media screen and (min-width: 1920px) {
        html {
            font-size: 80px !important;
        }
    }
    
    .viewport {
        display: flex;
        min-width: 1024px;
        max-width: 1920px;
        margin: 0 auto;
        padding: 1.1rem 0.25rem 0;
        background: url(../images/logo.png) no-repeat 0 0 / contain;
        min-height: 780px;
    }
    
    .viewport .column {
        flex: 3;
    }
    
    .viewport .column:nth-child(2) {
        flex: 4;
        margin: 0.4rem 0.25rem 0;
    }
    
    /* 公共面板样式  */
    .panel {
        position: relative;
        border: 15px solid transparent;
        border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
        border-image-source: url(../images/border.png);
        border-image-slice: 51 38 20 132;
        margin-bottom: 0.25rem;
    }
    
    .inner {
        position: absolute;
        top: -0.6375rem;
        left: -1.65rem;
        right: -0.475rem;
        bottom: -0.25rem;
        padding: 0.3rem 0.45rem;
    }
    
    .panel h3 {
        font-size: 0.25rem;
        color: #fff;
        font-weight: 400;
    }
    
    /* 概览区域模块制作 */
    .overview {
        height: 1.375rem;
    }
    
    .overview ul {
        display: flex;
        justify-content: space-between;
    }
    
    .overview ul li h4 {
        font-size: 0.35rem;
        color: #fff;
        margin: 0 0 0.1rem 0.06rem;
    }
    
    .overview ul li span {
        font-size: 0.2rem;
        color: #4c9bfd;
    }
    
    /* 监控区域模块制作 */
    .monitor {
        height: 6rem;
    }
    
    .monitor .inner {
        padding: 0.3rem 0;
        display: flex;
        flex-direction: column;
    }
    
    .monitor .tabs {
        padding: 0 0.45rem;
        margin-bottom: 0.225rem;
        display: flex;
    }
    
    .monitor .tabs a {
        color: #1950c4;
        font-size: 0.225rem;
        padding: 0 0.3375rem;
    }
    
    .monitor .tabs a:first-child {
        padding-left: 0;
        border-right: 0.025rem solid #00f2f1;
    }
    
    .monitor .tabs a.active {
        color: #fff;
    }
    
    .monitor .content {
        flex: 1;
        position: relative;
        display: none;
    }
    
    .monitor .head {
        display: flex;
        justify-content: space-between;
        line-height: 1.05;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 0.15rem 0.45rem;
        color: #68d8fe;
        font-size: 0.175rem;
    }
    
    .monitor .marquee-view {
        position: absolute;
        top: 0.5rem;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }
    
    .monitor .row {
        display: flex;
        justify-content: space-between;
        line-height: 1.05;
        font-size: 0.15rem;
        color: #61a8ff;
        padding: 0.15rem 0.45rem;
    }
    
    .monitor .row .icon-dot {
        position: absolute;
        left: 0.2rem;
        opacity: 0;
    }
    
    .monitor .row:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #68d8fe;
    }
    
    .monitor .row:hover .icon-dot {
        opacity: 1;
    }
    
    .monitor .col:first-child {
        width: 1rem;
    }
    
    .monitor .col:nth-child(2) {
        width: 2.5rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .monitor .col:nth-child(3) {
        width: 1rem;
    }
    
    /* 通过CSS3动画滚动marquee */
    .marquee-view .marquee {
        animation: move 15s linear infinite;
    }
    
    @keyframes move {
        0% {
        }
        100% {
            transform: translateY(-50%);
        }
    }
    
    /* 3.鼠标经过marquee 就停止动画 */
    .marquee-view .marquee:hover {
        animation-play-state: paused;
    }
    
    /* 点位分布统计模块制作 */
    .point {
        height: 4.25rem;
    }
    
    .point .chart {
        display: flex;
        margin-top: 0.3rem;
        justify-content: space-between;
    }
    
    .point .pie {
        width: 3.9rem;
        height: 3rem;
        margin-left: -0.125rem;
    }
    
    .point .data {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 2.1rem;
        padding: 0.45rem 0.375rem;
        box-sizing: border-box;
        background-image: url(../images/rect.png);
        background-size: cover;
    }
    
    .point h4 {
        margin-bottom: 0.15rem;
        font-size: 0.35rem;
        color: #fff;
    }
    
    .point span {
        display: block;
        color: #4c9bfd;
        font-size: 0.2rem;
    }
    
    /* 地图模块制作 */
    .map {
        height: 7.225rem;
        margin-bottom: 0.25rem;
        display: flex;
        flex-direction: column;
    }
    
    .map h3 {
        line-height: 1;
        padding: 0.2rem 0;
        margin: 0;
        font-size: 0.25rem;
        color: #fff;
        font-weight: 400;
    }
    
    .map .icon-cube {
        color: #68d8fe;
    }
    
    .map .chart {
        flex: 1;
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .map .geo {
        width: 100%;
        height: 100%;
    }
    
    /* 用户统计模块 */
    .users {
        height: 4.25rem;
        display: flex;
    }
    
    .users .chart {
        display: flex;
        margin-top: 0.3rem;
    }
    
    .users .bar {
        width: 7.35rem;
        height: 3rem;
    }
    
    .users .data {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 2.1rem;
        padding: 0.45rem 0.375rem;
        box-sizing: border-box;
        background-image: url(../images/rect.png);
        background-size: cover;
    }
    
    .users h4 {
        margin-bottom: 0.15rem;
        font-size: 0.35rem;
        color: #fff;
    }
    
    .users span {
        display: block;
        color: #4c9bfd;
        font-size: 0.2rem;
    }
    
    /* 订单模块制作 */
    .order {
        height: 1.875rem;
    }
    
    .order .filter {
        display: flex;
    }
    
    .order .filter a {
        display: block;
        height: 0.225rem;
        line-height: 1;
        padding: 0 0.225rem;
        color: #1950c4;
        font-size: 0.225rem;
        border-right: 0.025rem solid #00f2f1;
    }
    
    .order .filter a:first-child {
        padding-left: 0;
    }
    
    .order .filter a:last-child {
        border-right: none;
    }
    
    .order .filter a.active {
        color: #fff;
        font-size: 0.25rem;
    }
    
    .order .data {
        display: flex;
        margin-top: 0.25rem;
    }
    
    .order .item {
        width: 50%;
    }
    
    .order h4 {
        font-size: 0.35rem;
        color: #fff;
        margin-bottom: 0.125rem;
    }
    
    .order span {
        display: block;
        color: #4c9bfd;
        font-size: 0.2rem;
    }
    
    /* 销售区域 */
    .sales {
        height: 3.1rem;
    }
    
    .sales .caption {
        display: flex;
        line-height: 1;
    }
    
    .sales h3 {
        height: 0.225rem;
        padding-right: 0.225rem;
        border-right: 0.025rem solid #00f2f1;
    }
    
    .sales a {
        padding: 0.05rem;
        font-size: 0.2rem;
        margin: -0.0375rem 0 0 0.2625rem;
        border-radius: 0.0375rem;
        color: #0bace6;
    }
    
    .sales a.active {
        background-color: #4c9bfd;
        color: #fff;
    }
    
    .sales .inner {
        display: flex;
        flex-direction: column;
    }
    
    .sales .chart {
        flex: 1;
        padding-top: 0.1875rem;
        position: relative;
    }
    
    .sales .label {
        position: absolute;
        left: 0.525rem;
        top: 0.225rem;
        color: #4996f5;
        font-size: 0.175rem;
    }
    
    .sales .line {
        width: 100%;
        height: 100%;
        /* background-color: pink; */
    }
    
    /* 渠道分布以及季度销售模块 */
    .wrap {
        display: flex;
    }
    
    .channel,
    .quarter {
        flex: 1;
        height: 2.9rem;
    }
    
    .channel {
        margin-right: 0.25rem;
    }
    
    .channel .data {
        overflow: hidden;
    }
    
    .channel .data .radar {
        height: 2.1rem;
        width: 100%;
    }
    
    .channel h4 {
        color: #fff;
        font-size: 0.4rem;
        margin-bottom: 0.0625rem;
    }
    
    .channel small {
        font-size: 50%;
    }
    
    .channel span {
        display: block;
        color: #4c9bfd;
        font-size: 0.175rem;
    }
    
    /* 季度区块 */
    .quarter .inner {
        display: flex;
        flex-direction: column;
        margin: 0 -0.075rem;
    }
    
    .quarter .chart {
        flex: 1;
        padding-top: 0.225rem;
    }
    
    .quarter .box {
        position: relative;
    }
    
    .quarter .label {
        transform: translate(-50%, -30%);
        color: #fff;
        font-size: 0.375rem;
        position: absolute;
        left: 50%;
        top: 50%;
    }
    
    .quarter .label small {
        font-size: 50%;
    }
    
    .quarter .gauge {
        height: 1.05rem;
    }
    
    .quarter .data {
        display: flex;
        justify-content: space-between;
    }
    
    .quarter .item {
        width: 50%;
    }
    
    .quarter h4 {
        color: #fff;
        font-size: 0.3rem;
        margin-bottom: 0.125rem;
    }
    
    .quarter span {
        display: block;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #4c9bfd;
        font-size: 0.175rem;
    }
    
    /* 全国热榜模块制作 */
    /* 排行榜 */
    .top {
        height: 3.5rem;
    }
    
    .top .inner {
        display: flex;
    }
    
    .top .all {
        display: flex;
        flex-direction: column;
        width: 2.1rem;
        color: #4c9bfd;
        font-size: 0.175rem;
        vertical-align: middle;
    }
    
    .top .all ul {
        padding-left: 0.15rem;
        margin-top: 0.15rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .top .all li {
        overflow: hidden;
    }
    
    .top .all [class^="icon-"] {
        font-size: 0.45rem;
        vertical-align: middle;
        margin-right: 0.15rem;
    }
    
    .top .province {
        flex: 1;
        display: flex;
        flex-direction: column;
        color: #fff;
    }
    
    .top .province i {
        padding: 0 0.15rem;
        margin-top: 0.0625rem;
        float: right;
        font-style: normal;
        font-size: 0.175rem;
        color: #0bace6;
    }
    
    .top .province s {
        display: inline-block;
        transform: scale(0.8);
        text-decoration: none;
    }
    
    .top .province .icon-up {
        color: #dc3c33;
    }
    
    .top .province .icon-down {
        color: #36be90;
    }
    
    .top .province .data {
        flex: 1;
        display: flex;
        margin-top: 0.175rem;
    }
    
    .top .province ul {
        flex: 1;
        line-height: 1;
        margin-bottom: 0.175rem;
    }
    
    .top .province ul li {
        display: flex;
        justify-content: space-between;
    }
    
    .top .province ul span {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .top .province ul.sup {
        font-size: 0.175rem;
    }
    
    .top .province ul.sup li {
        color: #4995f4;
        padding: 0.15rem;
    }
    
    .top .province ul.sup li.active {
        color: #a3c6f2;
        background-color: rgba(10, 67, 188, 0.2);
    }
    
    .top .province ul.sub {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 0.15rem;
        background-color: rgba(10, 67, 188, 0.2);
    }
    
    .top .province ul.sub li {
        color: #52ffff;
        padding: 0.125rem 0.175rem;
    }
    
    .clock {
        position: absolute;
        top: -0.45rem;
        right: 0.5rem;
        font-size: 0.25rem;
        color: #0bace6;
    }
    
    .clock i {
        margin-right: 5px;
        font-size: 0.25rem;
    }
    
    @media screen and (max-width: 1600px) {
        .top span {
            transform: scale(0.9);
        }
    
        .top .province ul.sup li {
            padding: 0.125rem 0.15rem;
        }
    
        .top .province ul.sub li {
            padding: 0.0625rem 0.15rem;
        }
    
        .quarter span {
            transform: scale(0.9);
        }
    }
    

    icomoon.css

    @font-face {
      font-family: 'icomoon';
      src:  url('icomoon.eot');
      src:  url('icomoon.eot#iefix') format('embedded-opentype'),
        url('icomoon.ttf') format('truetype'),
        url('icomoon.woff') format('woff'),
        url('icomoon.svg#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    [class^="icon-"], [class*=" icon-"] {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'icomoon' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-dot:before {
      content: "\e900";
    }
    .icon-cup1:before {
      content: "\e901";
    }
    .icon-cup2:before {
      content: "\e902";
    }
    .icon-cup3:before {
      content: "\e903";
    }
    .icon-clock:before {
      content: "\e904";
    }
    .icon-down:before {
      content: "\e905";
    }
    .icon-cube:before {
      content: "\e906";
    }
    .icon-plane:before {
      content: "\e907";
    }
    .icon-train:before {
      content: "\e908";
    }
    .icon-bus:before {
      content: "\e909";
    }
    .icon-bag:before {
      content: "\e90a";
    }
    .icon-up:before {
      content: "\e90b";
    }
    

    index.js

    // 监控区域模块制作
    (function () {
        $(".monitor .tabs").on("click", "a", function () {
            $(this)
                .addClass("active")
                .siblings("a")
                .removeClass("active");
    
            // console.log($(this).index());
            //   选取对应索引号的content
            $(".monitor .content")
                .eq($(this).index())
                .show()
                .siblings(".content")
                .hide();
        });
        // 1. 先克隆marquee里面所有的行(row)
        $(".marquee-view .marquee").each(function () {
            // console.log($(this));
            var rows = $(this)
                .children()
                .clone();
            $(this).append(rows);
        });
    })();
    // 点位分布统计模块
    (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".pie"));
        // 2. 指定配置项和数据
        var option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            // 注意颜色写的位置
            color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff",
                "#9fe6b8",
                "#32c5e9",
                "#1d9dff"
            ],
            series: [
                {
                    name: "点位统计",
                    type: "pie",
                    // 如果radius是百分比则必须加引号
                    radius: ["10%", "70%"],
                    center: ["50%", "50%"],
                    roseType: "radius",
                    data: [
                        {value: 20, name: "云南"},
                        {value: 26, name: "北京"},
                        {value: 24, name: "山东"},
                        {value: 25, name: "河北"},
                        {value: 20, name: "江苏"},
                        {value: 25, name: "浙江"},
                        {value: 30, name: "四川"},
                        {value: 42, name: "湖北"}
                    ],
                    // 修饰饼形图文字相关的样式 label对象
                    label: {
                        fontSize: 10
                    },
                    // 修饰引导线样式
                    labelLine: {
                        // 连接到图形的线长度
                        length: 6,
                        // 连接到文字的线长度
                        length2: 8
                    }
                }
            ]
        };
    
        // 3. 配置项和数据给我们的实例化对象
        myChart.setOption(option);
        // 4. 当我们浏览器缩放的时候,图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();
    // 柱形图模块
    (function () {
        var item = {
            name: "",
            value: 1200,
            // 1. 修改当前柱形的样式
            itemStyle: {
                color: "#254065"
            },
            // 2. 鼠标放到柱子上不想高亮显示
            emphasis: {
                itemStyle: {
                    color: "#254065"
                }
            },
            // 3. 鼠标经过柱子不显示提示框组件
            tooltip: {
                extraCssText: "opacity: 0"
            }
        };
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".bar"));
        // 2. 指定配置和数据
        var option = {
            color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                    {offset: 0, color: "#00fffb"}, // 0 起始颜色
                    {offset: 1, color: "#0061ce"} // 1 结束颜色
                ]
            ),
            tooltip: {
                trigger: "item"
            },
            grid: {
                left: "0%",
                right: "3%",
                bottom: "3%",
                top: "3%",
                //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
                containLabel: true,
                // 是否显示直角坐标系网格
                show: true,
                //grid 四条边框的颜色
                borderColor: "rgba(0, 240, 255, 0.3)"
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "上海",
                        "广州",
                        "北京",
                        "深圳",
                        "合肥",
                        "",
                        "......",
                        "",
                        "杭州",
                        "厦门",
                        "济南",
                        "成都",
                        "重庆"
                    ],
                    axisTick: {
                        alignWithLabel: false,
                        // 把x轴的刻度隐藏起来
                        show: false
                    },
                    axisLabel: {
                        color: "#4c9bfd"
                    },
                    // x轴这条线的颜色样式
                    axisLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                            // width: 3
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: {
                        alignWithLabel: false,
                        // 把y轴的刻度隐藏起来
                        show: false
                    },
                    axisLabel: {
                        color: "#4c9bfd"
                    },
                    // y轴这条线的颜色样式
                    axisLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                            // width: 3
                        }
                    },
                    // y轴分割线的颜色样式
                    splitLine: {
                        lineStyle: {
                            color: "rgba(0, 240, 255, 0.3)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "直接访问",
                    type: "bar",
                    barWidth: "60%",
                    data: [
                        2100,
                        1900,
                        1700,
                        1560,
                        1400,
                        item,
                        item,
                        item,
                        900,
                        750,
                        600,
                        480,
                        240
                    ]
                }
            ]
        };
        // 3. 把配置给实例对象
        myChart.setOption(option);
        // 4. 当我们浏览器缩放的时候,图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();
    // 销售统计模块
    (function () {
        // (1)准备数据
        var data = {
            year: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ],
            quarter: [
                [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
                [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
            ],
            month: [
                [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
            week: [
                [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        };
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".line"));
        // 2. 指定配置和数据
        var option = {
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis"
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name,此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },
    
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "#4c9bfd"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "#4c9bfd"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [
                {
                    name: "预期销售额",
                    type: "line",
                    stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    data: data.year[0]
                },
                {
                    name: "实际销售额",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[1]
                }
            ]
        };
        // 3. 把配置和数据给实例对象
        myChart.setOption(option);
        // 4. tab切换效果制作
        // (2) 点击切换效果
        $(".sales .caption").on("click", "a", function () {
            // 此时要注意这个索引号的问题
            index = $(this).index() - 1;
            // 点击当前a 高亮显示 调用active
            $(this)
                .addClass("active")
                .siblings("a")
                .removeClass("active");
            // 拿到当前a 的自定义属性值
            // console.log(this.dataset.type);
            // 根据拿到的值 去找数据
            // console.log(data.year);
            // console.log(data["year"]);
            // console.log(data[this.dataset.type]);
            var arr = data[this.dataset.type];
            // console.log(arr);
            // 根据拿到的数据重新渲染 series里面的data值
            option.series[0].data = arr[0];
            option.series[1].data = arr[1];
            // 重新把配置好的新数据给实例对象
            myChart.setOption(option);
        });
        // 5. tab栏自动切换效果
        //  开启定时器每隔3s,自动让a触发点击事件即可
        var as = $(".sales .caption a");
        var index = 0;
        var timer = setInterval(function () {
            index++;
            if (index >= 4) index = 0;
            as.eq(index).click();
        }, 1000);
        // 鼠标经过sales,关闭定时器,离开开启定时器
        $(".sales").hover(
            function () {
                clearInterval(timer);
            },
            function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= 4) index = 0;
                    as.eq(index).click();
                }, 1000);
            }
        );
        // 当我们浏览器缩放的时候,图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();
    // 销售渠道模块 雷达图
    (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".radar"));
        // 2.指定配置
    
        var option = {
            tooltip: {
                show: true,
                // 控制提示框组件的显示位置
                position: ["60%", "10%"]
            },
            radar: {
                indicator: [
                    {name: "机场", max: 100},
                    {name: "商场", max: 100},
                    {name: "火车站", max: 100},
                    {name: "汽车站", max: 100},
                    {name: "地铁", max: 100}
                ],
                // 修改雷达图的大小
                radius: "65%",
                shape: "circle",
                // 分割的圆圈个数
                splitNumber: 4,
                name: {
                    // 修饰雷达图文字的颜色
                    textStyle: {
                        color: "#4c9bfd"
                    }
                },
                // 分割的圆圈线条的样式
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255, 0.5)"
                    }
                },
                splitArea: {
                    show: false
                },
                // 坐标轴的线修改为白色半透明
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.5)"
                    }
                }
            },
            series: [
                {
                    name: "北京",
                    type: "radar",
                    // 填充区域的线条颜色
                    lineStyle: {
                        normal: {
                            color: "#fff",
                            width: 1,
                            opacity: 0.5
                        }
                    },
                    data: [[90, 19, 56, 11, 34]],
                    // 设置图形标记 (拐点)
                    symbol: "circle",
                    // 这个是设置小圆点大小
                    symbolSize: 5,
                    // 设置小圆点颜色
                    itemStyle: {
                        color: "#fff"
                    },
                    // 让小圆点显示数据
                    label: {
                        show: true,
                        fontSize: 10
                    },
                    // 修饰我们区域填充的背景颜色
                    areaStyle: {
                        color: "rgba(238, 197, 102, 0.6)"
                    }
                }
            ]
        };
        // 3.把配置和数据给对象
        myChart.setOption(option);
        // 当我们浏览器缩放的时候,图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();
    // 销售模块 饼形图 半圆形 设置方式
    (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".gauge"));
        // 2. 指定数据和配置
        var option = {
            series: [
                {
                    name: "销售进度",
                    type: "pie",
                    radius: ["130%", "150%"],
                    // 移动下位置  套住50%文字
                    center: ["48%", "80%"],
                    //是否启用防止标签重叠策略
                    // avoidLabelOverlap: false,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    // 饼形图的起始角度为 180, 注意不是旋转角度
                    startAngle: 180,
                    // 鼠标经过不需要放大偏移图形
                    hoverOffset: 0,
                    data: [
                        {
                            value: 100,
                            itemStyle: {
                                // 颜色渐变#00c9e0->#005fc1
                                color: new echarts.graphic.LinearGradient(
                                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {offset: 0, color: "#00c9e0"}, // 0 起始颜色
                                        {offset: 1, color: "#005fc1"} // 1 结束颜色
                                    ]
                                )
                            }
                        },
                        {
                            value: 100,
                            itemStyle: {
                                color: "#12274d"
                            }
                        },
                        {
                            value: 200,
                            itemStyle: {
                                color: "transparent"
                            }
                        }
                    ]
                }
            ]
        };
        // 3. 把数据和配置给实例对象
        myChart.setOption(option);
        // 当我们浏览器缩放的时候,图表也等比例缩放
        window.addEventListener("resize", function () {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();
    // 全国热榜模块
    (function () {
        // 1. 准备相关数据
        var hotData = [
            {
                city: "北京", // 城市
                sales: "25, 179", // 销售额
                flag: true, //  上升还是下降
                brands: [
                    //  品牌种类数据
                    {name: "可爱多", num: "9,086", flag: true},
                    {name: "娃哈哈", num: "8,341", flag: true},
                    {name: "喜之郎", num: "7,407", flag: false},
                    {name: "八喜", num: "6,080", flag: false},
                    {name: "小洋人", num: "6,724", flag: false},
                    {name: "好多鱼", num: "2,170", flag: true}
                ]
            },
            {
                city: "河北",
                sales: "23,252",
                flag: false,
                brands: [
                    {name: "可爱多", num: "3,457", flag: false},
                    {name: "娃哈哈", num: "2,124", flag: true},
                    {name: "喜之郎", num: "8,907", flag: false},
                    {name: "八喜", num: "6,080", flag: true},
                    {name: "小洋人", num: "1,724", flag: false},
                    {name: "好多鱼", num: "1,170", flag: false}
                ]
            },
            {
                city: "上海",
                sales: "20,760",
                flag: true,
                brands: [
                    {name: "可爱多", num: "2,345", flag: true},
                    {name: "娃哈哈", num: "7,109", flag: true},
                    {name: "喜之郎", num: "3,701", flag: false},
                    {name: "八喜", num: "6,080", flag: false},
                    {name: "小洋人", num: "2,724", flag: false},
                    {name: "好多鱼", num: "2,998", flag: true}
                ]
            },
            {
                city: "江苏",
                sales: "23,252",
                flag: false,
                brands: [
                    {name: "可爱多", num: "2,156", flag: false},
                    {name: "娃哈哈", num: "2,456", flag: true},
                    {name: "喜之郎", num: "9,737", flag: true},
                    {name: "八喜", num: "2,080", flag: true},
                    {name: "小洋人", num: "8,724", flag: true},
                    {name: "好多鱼", num: "1,770", flag: false}
                ]
            },
            {
                city: "山东",
                sales: "20,760",
                flag: true,
                brands: [
                    {name: "可爱多", num: "9,567", flag: true},
                    {name: "娃哈哈", num: "2,345", flag: false},
                    {name: "喜之郎", num: "9,037", flag: false},
                    {name: "八喜", num: "1,080", flag: true},
                    {name: "小洋人", num: "4,724", flag: false},
                    {name: "好多鱼", num: "9,999", flag: true}
                ]
            }
        ];
        //  2. 根据数据渲染各省热销 sup 模块内容
        // (1) 遍历 hotData对象
        var supHTML = "";
        $.each(hotData, function (index, item) {
            // console.log(item);
            supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
        ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
        });
        // 把生成的5个小li字符串给 sub dom盒子
        $(".sup").html(supHTML);
        // 3. 当鼠标进入 tab 的时候
        // 鼠标经过当前的小li要高亮显示
        $(".province .sup").on("mouseenter", "li", function () {
            index = $(this).index();
            render($(this));
        });
    
        // 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染
        // 这个函数需要传递当前元素进去
        function render(currentEle) {
            currentEle
                .addClass("active")
                .siblings()
                .removeClass();
            // 拿到当前城市的品牌对象
            // console.log($(this).index());
            // 可以通过hotData[$(this).index()] 得到当前的城市
            // console.log(hotData[$(this).index()]);
            // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
            // console.log(hotData[$(this).index()].brands);
            // 开始遍历品牌数组
            var subHTML = "";
            $.each(hotData[currentEle.index()].brands, function (index, item) {
                // 是对应城市的每一个品牌对象
                // console.log(item);
                subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
        ${item.flag ? "icon-up" : "icon-down"}
        ></s></span></li>`;
            });
            // 把生成的6个小li字符串给 sub dom盒子
            $(".sub").html(subHTML);
        }
    
        // 4. 默认把第一个小li处于鼠标经过状态
        var lis = $(".province .sup li");
        lis.eq(0).mouseenter();
        // 5 开启定时器
        var index = 0;
        var timer = setInterval(function () {
            index++;
            if (index >= 5) index = 0;
            // lis.eq(index).mouseenter();
            render(lis.eq(index));
        }, 2000);
    
        $(".province .sup").hover(
            // 鼠标经过事件
            function () {
                clearInterval(timer);
            },
            // 鼠标离开事件
            function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= 5) index = 0;
                    // lis.eq(index).mouseenter();
                    render(lis.eq(index));
                }, 2000);
            }
        );
    })();
    

    flexible.js

    (function flexible(window, document) {
        var docEl = document.documentElement
        var dpr = window.devicePixelRatio || 1
    
        // adjust body font size
        function setBodyFontSize() {
            if (document.body) {
                document.body.style.fontSize = (12 * dpr) + 'px'
            } else {
                document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
        }
    
        setBodyFontSize();
    
        // set 1rem = viewWidth / 10
        function setRemUnit() {
            var rem = docEl.clientWidth / 20
            docEl.style.fontSize = rem + 'px'
        }
    
        setRemUnit()
    
        // reset rem unit on page resize
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
                setRemUnit()
            }
        })
    
        // detect 0.5px supports
        if (dpr >= 2) {
            var fakeBody = document.createElement('body')
            var testElement = document.createElement('div')
            testElement.style.border = '.5px solid transparent'
            fakeBody.appendChild(testElement)
            docEl.appendChild(fakeBody)
            if (testElement.offsetHeight === 1) {
                docEl.classList.add('hairlines')
            }
            docEl.removeChild(fakeBody)
        }
    }(window, document))
    

    myMap.js

    (function () {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".geo"));
        // 2. 指定配置和数据
        var geoCoordMap = {
            上海: [121.4648, 31.2891],
            东莞: [113.8953, 22.901],
            东营: [118.7073, 37.5513],
            中山: [113.4229, 22.478],
            临汾: [111.4783, 36.1615],
            临沂: [118.3118, 35.2936],
            丹东: [124.541, 40.4242],
            丽水: [119.5642, 28.1854],
            乌鲁木齐: [87.9236, 43.5883],
            佛山: [112.8955, 23.1097],
            保定: [115.0488, 39.0948],
            兰州: [103.5901, 36.3043],
            包头: [110.3467, 41.4899],
            北京: [116.4551, 40.2539],
            北海: [109.314, 21.6211],
            南京: [118.8062, 31.9208],
            南宁: [108.479, 23.1152],
            南昌: [116.0046, 28.6633],
            南通: [121.1023, 32.1625],
            厦门: [118.1689, 24.6478],
            台州: [121.1353, 28.6688],
            合肥: [117.29, 32.0581],
            呼和浩特: [111.4124, 40.4901],
            咸阳: [108.4131, 34.8706],
            哈尔滨: [127.9688, 45.368],
            唐山: [118.4766, 39.6826],
            嘉兴: [120.9155, 30.6354],
            大同: [113.7854, 39.8035],
            大连: [122.2229, 39.4409],
            天津: [117.4219, 39.4189],
            太原: [112.3352, 37.9413],
            威海: [121.9482, 37.1393],
            宁波: [121.5967, 29.6466],
            宝鸡: [107.1826, 34.3433],
            宿迁: [118.5535, 33.7775],
            常州: [119.4543, 31.5582],
            广州: [113.5107, 23.2196],
            廊坊: [116.521, 39.0509],
            延安: [109.1052, 36.4252],
            张家口: [115.1477, 40.8527],
            徐州: [117.5208, 34.3268],
            德州: [116.6858, 37.2107],
            惠州: [114.6204, 23.1647],
            成都: [103.9526, 30.7617],
            扬州: [119.4653, 32.8162],
            承德: [117.5757, 41.4075],
            拉萨: [91.1865, 30.1465],
            无锡: [120.3442, 31.5527],
            日照: [119.2786, 35.5023],
            昆明: [102.9199, 25.4663],
            杭州: [119.5313, 29.8773],
            枣庄: [117.323, 34.8926],
            柳州: [109.3799, 24.9774],
            株洲: [113.5327, 27.0319],
            武汉: [114.3896, 30.6628],
            汕头: [117.1692, 23.3405],
            江门: [112.6318, 22.1484],
            沈阳: [123.1238, 42.1216],
            沧州: [116.8286, 38.2104],
            河源: [114.917, 23.9722],
            泉州: [118.3228, 25.1147],
            泰安: [117.0264, 36.0516],
            泰州: [120.0586, 32.5525],
            济南: [117.1582, 36.8701],
            济宁: [116.8286, 35.3375],
            海口: [110.3893, 19.8516],
            淄博: [118.0371, 36.6064],
            淮安: [118.927, 33.4039],
            深圳: [114.5435, 22.5439],
            清远: [112.9175, 24.3292],
            温州: [120.498, 27.8119],
            渭南: [109.7864, 35.0299],
            湖州: [119.8608, 30.7782],
            湘潭: [112.5439, 27.7075],
            滨州: [117.8174, 37.4963],
            潍坊: [119.0918, 36.524],
            烟台: [120.7397, 37.5128],
            玉溪: [101.9312, 23.8898],
            珠海: [113.7305, 22.1155],
            盐城: [120.2234, 33.5577],
            盘锦: [121.9482, 41.0449],
            石家庄: [114.4995, 38.1006],
            福州: [119.4543, 25.9222],
            秦皇岛: [119.2126, 40.0232],
            绍兴: [120.564, 29.7565],
            聊城: [115.9167, 36.4032],
            肇庆: [112.1265, 23.5822],
            舟山: [122.2559, 30.2234],
            苏州: [120.6519, 31.3989],
            莱芜: [117.6526, 36.2714],
            菏泽: [115.6201, 35.2057],
            营口: [122.4316, 40.4297],
            葫芦岛: [120.1575, 40.578],
            衡水: [115.8838, 37.7161],
            衢州: [118.6853, 28.8666],
            西宁: [101.4038, 36.8207],
            西安: [109.1162, 34.2004],
            贵阳: [106.6992, 26.7682],
            连云港: [119.1248, 34.552],
            邢台: [114.8071, 37.2821],
            邯郸: [114.4775, 36.535],
            郑州: [113.4668, 34.6234],
            鄂尔多斯: [108.9734, 39.2487],
            重庆: [107.7539, 30.1904],
            金华: [120.0037, 29.1028],
            铜川: [109.0393, 35.1947],
            银川: [106.3586, 38.1775],
            镇江: [119.4763, 31.9702],
            长春: [125.8154, 44.2584],
            长沙: [113.0823, 28.2568],
            长治: [112.8625, 36.4746],
            阳泉: [113.4778, 38.0951],
            青岛: [120.4651, 36.3373],
            韶关: [113.7964, 24.7028]
        };
    
        var XAData = [
            [{name: "西安"}, {name: "北京", value: 100}],
            [{name: "西安"}, {name: "上海", value: 100}],
            [{name: "西安"}, {name: "广州", value: 100}],
            [{name: "西安"}, {name: "西宁", value: 100}],
            [{name: "西安"}, {name: "拉萨", value: 100}]
        ];
    
        var XNData = [
            [{name: "西宁"}, {name: "北京", value: 100}],
            [{name: "西宁"}, {name: "上海", value: 100}],
            [{name: "西宁"}, {name: "广州", value: 100}],
            [{name: "西宁"}, {name: "西安", value: 100}],
            [{name: "西宁"}, {name: "银川", value: 100}]
        ];
    
        var YCData = [
            [{name: "拉萨"}, {name: "北京", value: 100}],
            [{name: "拉萨"}, {name: "潍坊", value: 100}],
            [{name: "拉萨"}, {name: "哈尔滨", value: 100}]
        ];
    
        var planePath =
            "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
        //var planePath = 'arrow';
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
    
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],
                        value: dataItem[1].value
                    });
                }
            }
            return res;
        };
    
        var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
        var series = [];
        [
            ["西安", XAData],
            ["西宁", XNData],
            ["银川", YCData]
        ].forEach(function (item, i) {
            series.push(
                {
                    name: item[0] + " Top3",
                    type: "lines",
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0.7,
                        color: "red", //arrow箭头的颜色
                        symbolSize: 3
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                {
                    name: item[0] + " Top3",
                    type: "lines",
                    zlevel: 2,
                    symbol: ["none", "arrow"],
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                {
                    name: item[0] + " Top3",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 2,
                    rippleEffect: {
                        brushType: "stroke"
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "right",
                            formatter: "{b}"
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] / 8;
                    },
                    itemStyle: {
                        normal: {
                            color: color[i]
                        },
                        emphasis: {
                            areaColor: "#2B91B7"
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                }
            );
        });
        var option = {
            tooltip: {
                trigger: "item",
                formatter: function (params, ticket, callback) {
                    if (params.seriesType == "effectScatter") {
                        return "线路:" + params.data.name + "" + params.data.value[2];
                    } else if (params.seriesType == "lines") {
                        return (
                            params.data.fromName +
                            ">" +
                            params.data.toName +
                            "<br />" +
                            params.data.value
                        );
                    } else {
                        return params.name;
                    }
                }
            },
    
            geo: {
                map: "china",
                label: {
                    emphasis: {
                        show: true,
                        color: "#fff"
                    }
                },
                roam: true,
                //   放大我们的地图
                zoom: 1.2,
                itemStyle: {
                    normal: {
                        areaColor: "#142957",
                        borderColor: "#195BB9",
                        borderWidth: 1
                    },
                    emphasis: {
                        areaColor: "#2B91B7"
                    }
                }
            },
            series: series
        };
        // 3. 把数据和配置给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    })();
    

    china.js

    自行下载

    jQuery.min.js

    自行下载

    echarts.min.js

    自行下载

    images

    bg.jpg
    在这里插入图片描述
    border.jpg
    在这里插入图片描述
    border.png
    在这里插入图片描述
    line.png
    在这里插入图片描述
    logo.png
    在这里插入图片描述
    rect.png
    在这里插入图片描述

    展开全文
  • ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识: div ...

    ECharts数据可视化案例_BV1v7411R7mp

    可视化面板介绍

    ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。

    01-使用技术

    完成该项目需要具备以下知识:

    • div + css 布局
    • flex 布局
    • Less
    • 原生js + jquery 使用
    • rem适配
    • echarts基础

    02- 案例适配方案

    • 设计稿是1920px

      1. flexible.js 把屏幕分为 24 等份

      2. cssrem 插件的基准值是 80px

        插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

        但是别忘记重启vscode软件保证生效

    03-基础设置

    • body 设置背景图 ,缩放为 100% , 行高1.15
    • css初始化

    04-header 布局

    • 高度为100px
    • 背景图,在容器内显示
    • 缩放比例为 100%
    • h1 标题部分 白色 38像素 居中显示 行高为 80像素
    • 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素
    <script>
    	// 格式: 当前时间:2020年3月17-0时54分14秒
        var t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();//获取时
            var m = dt.getMinutes();//获取分
            var s = dt.getSeconds();//获取秒
            document.querySelector(".showTime").innerHTML = '当前时间:' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器,循环运行     
        }
    </script>
    
    • header部分css样式
    header {
      position: relative;
      height: 1.25rem;
      background: url(../images/head_bg.png) no-repeat top center;
      background-size: 100% 100%;
      h1 {
        font-size: 0.475rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
      .showTime {
        position: absolute;
        top: 0;
        right: 0.375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    

    05-mainbox 主体模块

    • 需要一个上左右的10px 的内边距

    • column 列容器,分三列,占比 3:5:3

    css样式:

    .mainbox {
      padding: 0.125rem 0.125rem 0;
      display: flex;
      .column {
        flex: 3;
      }
      &:nth-child(2) {
        flex: 5;
      }
    }
    

    06-公共面板模块 panel

    • 高度为 310px
    • 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
    • 有line.jpg 背景图片
    • padding为 上为 0 左右 15px 下为 40px
    • 下外边距是 15px
    • 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
    • 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
    .panel {
      position: relative;
      height: 3.875rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: url(../images/line\(1\).png);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          content: "";
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
    }
    

    07-柱形图 bar 模块(布局)

    • 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px

    • 图标内容模块 chart 高度 240px

    • 以上可以作为panel公共样式部分

      h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
      }
      .chart {
        height: 3rem;
        background-color: pink;
      }
    

    08-中间布局

    • 上面是no 数字模块
    • 下面是map 地图模块
    1. 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
    2. 注意中间列 column 有个 左右 10px 下 15px 的外边距
    3. no 模块里面上下划分 上面是数字(no-hd) 下面 是 相关文字说明(no-bd)
    4. no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
    5. no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
    6. no-hd 利用 after 和 before制作2个小角, 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
    7. 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
    8. no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
    /* 声明字体*/
    @font-face {
      font-family: electronicFont;
      src: url(../font/DS-DIGIT.TTF);
    }
    

    地图模块制作:

    1. 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
    2. 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
    3. 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
    4. 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
    <!--        no模块制作-->
    <div class="no">
        <div class="no-hd">
            <ul>
                <li>13970959821</li>
                <li>253938266</li>
            </ul>
        </div>
        <div class="no-bd">
            <ul>
                <li>前端需求人数</li>
                <li>市场供应人数</li>
            </ul>
        </div>
    </div>
    <!--        /no模块制作-->
    <!--        地图模块-->
    <div class="map">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="chart">地图模块</div>
    </div>
    <!--        /地图模块-->
    

    中间样式

    /* 声明字体*/
    @font-face {
      font-family: electronicFont;
      src: url(../font/DS-DIGIT.TTF);
    }
    .no {
      background: rgba(101, 132, 226, 0.1);
      padding: 0.1875rem;
      .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
          content: "";
          position: absolute;
          width: 30px;
          height: 10px;
          border-top: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
          top: 0;
          left: 0;
        }
        &::after {
          content: "";
          position: absolute;
          width: 30px;
          height: 10px;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
          right: 0;
          bottom: 0;
        }
        ul {
          display: flex;
          li {
            position: relative;
            flex: 1;
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.875rem;
            color: #ffeb7b;
            padding: 0.05rem 0;
            font-family: electronicFont;
            font-weight: bold;
            &:first-child::after {
              content: "";
              position: absolute;
              height: 50%;
              width: 1px;
              background: rgba(255, 255, 255, 0.2);
              right: 0;
              top: 25%;
            }
          }
        }
      }
      .no-bd ul {
        display: flex;
        li {
          flex: 1;
          height: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          font-size: 0.225rem;
          color: rgba(255, 255, 255, 0.7);
          padding-top: 0.125rem;
        }
      }
    }
    .map {
      position: relative;
      height: 10.125rem;
      .chart {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height: 10.125rem;
        width: 100%;
      }
      .map1,
      .map2,
      .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6.475rem;
        height: 6.475rem;
        background: url(../images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
      }
      .map2 {
        width: 8.0375rem;
        height: 8.0375rem;
        background-image: url(../images/lbx.png);
        opacity: 0.6;
        animation: rotate 15s linear infinite;
        z-index: 2;
      }
      .map3 {
        width: 7.075rem;
        height: 7.075rem;
        background-image: url(../images/jt.png);
        animation: rotate1 10s linear infinite;
      }
    
      @keyframes rotate {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
      @keyframes rotate1 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }
    }
    

    09-Echarts-介绍

    常见的数据可视化库:

    • D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
    • ECharts.js 百度出品的一个开源 Javascript 数据可视化库
    • Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
    • AntV 蚂蚁金服全新一代数据可视化解决方案 等等
    • Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

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

    大白话:

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

    10-Echarts-体验

    官方教程:五分钟上手ECharts

    使用步骤:

    1. 引入echarts 插件文件到html页面中
    2. 准备一个具备大小的DOM容器
    <div id="main" style="width: 600px;height:400px;"></div>
    
    1. 初始化echarts实例对象
    var myChart = echarts.init(document.getElementById('main'));
    
    1. 指定配置项和数据(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'
        }]
    };
    
    1. 将配置项设置给echarts实例对象
    myChart.setOption(option);
    

    11-Echarts-基础配置

    这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了

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

    • series

      • 系列列表。每个系列通过 type 决定自己的图表类型
      • 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
    • xAxis:直角坐标系 grid 中的 x 轴

      • boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
    • yAxis:直角坐标系 grid 中的 y 轴

    • grid:直角坐标系内绘图网格。

    • title:标题组件

    • tooltip:提示框组件

    • legend:图例组件

    • color:调色盘颜色列表

      数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

    option = {
        // color设置我们线条的颜色 注意后面是个数组
        color: ['pink', 'red', 'green', 'skyblue'],
        // 设置图表的标题
        title: {
            text: '折线图堆叠123'
        },
        // 图表的提示框组件 
        tooltip: {
            // 触发方式
            trigger: 'axis'
        },
        // 图例组件
        legend: {
           // series里面有了 name值则 legend里面的data可以删掉
        },
        // 网格配置  grid可以控制线形图 柱状图 图表大小
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true
        },
        // 工具箱组件  可以另存为图片等功能
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        // 设置x轴的相关配置
        xAxis: {
            type: 'category',
            // 是否让我们的线条和坐标轴有缝隙
            boundaryGap: false,
            data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
         // 设置y轴的相关配置
        yAxis: {
            type: 'value'
        },
        // 系列图表配置 它决定着显示那种类型的图表
        series: [
            {
                name: '邮件营销',
                type: 'line',
               
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
    
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
              
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
              
                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };
    
    

    12- 柱状图图表(两大步骤)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表
    1. 引入到html页面中
    // 柱状图1模块
    (function() {
      // 实例化对象
      let myChart = echarts.init(document.querySelector(".bar .chart"));
      // 指定配置和数据
      let option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发有效
            type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
    
      // 把配置给实例对象
      myChart.setOption(option);
    })();
    
    1. 根据需求定制

      • 修改图表柱形颜色 #2f89cf

      • 修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

    color: ["#2f89cf"],
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    
    • X轴相关设置 xAxis
      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • X轴线的样式 不显示
    // 设置x轴标签文字样式
    // x轴的文字颜色和大小
         axisLabel: {
           color: "rgba(255,255,255,.6)",
           fontSize: "12"
         },
    //  x轴样式不显示
    axisLine: {
        show: false
        // 如果想要设置单独的线条样式 
        // lineStyle: {
        //    color: "rgba(255,255,255,.1)",
        //    width: 1,
        //    type: "solid"
       }
    }
    
    • Y 轴相关定制
      • 文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
      • Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框
      • 分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)
    // y 轴文字标签样式
    axisLabel: {
         color: "rgba(255,255,255,.6)",
          fontSize: "12"
    },
    // y轴线条样式
    axisLine: {
         lineStyle: {
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
         }
    5232},
    // y 轴分隔线样式
    splitLine: {
       lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
    }
    
    • 修改柱形为圆角以及柱子宽度 series 里面设置
    series: [
          {
            name: "直接访问",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      };
    
    • 更换对应数据
    // x轴中更换data数据
    data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
    // series 更换数据
    data: [200, 300, 300, 900, 1500, 1200, 600]
    
    • 让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
      myChart.resize();
    });
    

    13-柱状图2定制

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 修改图形大小 grid

      // 图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },
    

    需求2: 不显示x轴

    xAxis: {
      show: false
    },
    

    需求3: y轴相关定制

    • 不显示y轴线和相关刻度
    //不显示y轴线条
    axisLine: {
        show: false
            },
    // 不显示刻度
    axisTick: {
       show: false
    },
    
    • y轴文字的颜色设置为白色
    axisLabel: {
          color: "#fff"
    },
    

    需求4: 修改第一组柱子相关样式(条状)

    name: "条",
    // 柱子之间的距离
    barCategoryGap: 50,
    //柱子的宽度
    barWidth: 10,
    // 柱子设为圆角
    itemStyle: {
        normal: {
          barBorderRadius: 20,       
        }
    },
    
    • 设置第一组柱子内百分比显示数据
    // 图形上的文本标签
    label: {
        normal: {
             show: true,
             // 图形内显示
             position: "inside",
             // 文字的显示格式
             formatter: "{c}%"
         }
    },
    
    • 设置第一组柱子不同颜色
    // 声明颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
      itemStyle: {
              normal: {
                barBorderRadius: 20,  
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
             
    },
    

    需求5: 修改第二组柱子的相关配置(框状)

    name: "框",
    type: "bar",
    barCategoryGap: 50,
    barWidth: 15,
    itemStyle: {
        color: "none",
        borderColor: "#00c1de",
        borderWidth: 3,
        barBorderRadius: 15
    },
    data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
    

    需求6: 给y轴添加第二组数据

    yAxis: [
          {
          type: "category",
          data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],
          // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          }
        },
          {
            show: true,
            data: [702, 350, 610, 793, 664],
               // 不显示y轴的线
          axisLine: {
            show: false
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            }
          }
        ],
    

    需求7: 设置两组柱子层叠以及更换数据

    // 给series  第一个对象里面的 添加 
    yAxisIndex: 0,
    // 给series  第二个对象里面的 添加 
    yAxisIndex: 1,
    // series 第一个对象里面的data
    data: [70, 34, 60, 78, 69],
    // series 第二个对象里面的data
    data: [100, 100, 100, 100, 100],
    // y轴更换第一个对象更换data数据
    data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
    // y轴更换第二个对象更换data数据
    data:[702, 350, 610, 793, 664],
    

    完整代码:

    // 柱状图2
    (function() {
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".bar2 .chart"));
      // 2. 指定配置和数据
      var option = {
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          {
            data: [702, 350, 610, 793, 664],
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) {
                // params 传进来的是柱子对象
                console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
    })();
    

    14-折线图1 人员变化模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。

    // 设置网格样式
    grid: { 
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,// 显示边框
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    

    需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%

    // 图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%' // 距离右边10%
    },
    

    需求3: x轴相关配置

    • 刻度去除
    • x轴刻度标签字体颜色:#4c9bfd
    • 剔除x坐标轴线颜色(将来使用Y轴分割线)
    • 轴两端是不需要内间距 boundaryGap
    xAxis: {
      type: 'category',
      data: ["周一", "周二"],
    axisTick: {
         show: false // 去除刻度线
       },
       axisLabel: {
         color: '#4c9bfd' // 文本颜色
       },
       axisLine: {
         show: false // 去除轴线
       },
       boundaryGap: false  // 去除轴内间距
    },
    

    需求4: y轴的定制

    • 刻度去除
    • 字体颜色:#4c9bfd
    • 分割线颜色:#012f4a
    yAxis: {
      type: 'value',
      axisTick: {
        show: false  // 去除刻度
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a' // 分割线颜色
        }
      }
    },
    

    需求5: 两条线形图定制

    • 颜色分别:#00f2f1 #ed3f35
    • 把折线修饰为圆滑 series 数据中添加 smooth 为 true
    color: ['#00f2f1', '#ed3f35'],
    series: [{
      name:'新增粉丝',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      // 折线修饰为圆滑
      smooth: true,
      },{
      name:'新增游客',
      data: [100, 331, 200, 123, 233, 543, 400],
      type: 'line',
      smooth: true,
    }]
    

    需求6: 配置数据

    // x轴的文字
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    
    // 图标数据
    series: [{
      name:'新增粉丝',
      data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      type: 'line',
      smooth: true
    },{
      name:'新增游客',
      data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     
      type: 'line',
      smooth: true
      }
    }]
    

    需求7: 新增需求 点击 2020年 2021年 数据发生变化

    以下是后台送过来数据(ajax请求过来的)

    var yearData = [
         {
           year: '2020',  // 年份
           data: [  // 两个数组是因为有两条线
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
             ]
         },
         {
           year: '2021',  // 年份
           data: [  // 两个数组是因为有两条线
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        		[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
             ]
         }
    ];
    
    • tab栏切换事件
    • 点击2020按钮 需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
    • 点击2020按钮 需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
    • 2021 按钮同样道理

    完整代码:

    // 折线图1模块制作
    (function() {
      var yearData = [
        {
          year: "2020", // 年份
          data: [
            // 两个数组是因为有两条线
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
        },
        {
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ];
      // 1. 实例化对象
      var myChart = echarts.init(document.querySelector(".line .chart"));
      // 2.指定配置
      var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // 如果series 对象有name 值,则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
    
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      };
    
      // 3. 把配置给实例对象
      myChart.setOption(option);
      // 4. 让图表跟随屏幕自动的去适应
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    
      // 5.点击切换效果
      $(".line h2").on("click", "a", function() {
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
      });
    })();
    

    15-折线图2 播放量模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    需求1: 更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

    legend: {
         top: "0%",
         textStyle: {
           color: "rgba(255,255,255,.5)",
           fontSize: "12"
         }
    },
    

    需求2: 修改图表大小

    grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },
    

    需求3: 修改x轴相关配置

    • 修改文本颜色为rgba(255,255,255,.6) 文字大小为 12
    • x轴线的颜色为 rgba(255,255,255,.2)
    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
    axisLabel: {
         textStyle: {
           color: "rgba(255,255,255,.6)",
           fontSize: 12
         }
       },
        // x轴线的颜色为   rgba(255,255,255,.2)
       axisLine: {
         lineStyle: {
           color: "rgba(255,255,255,.2)"
         }
       },
    

    需求4: 修改y轴的相关配置

    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    },
    axisLabel: {
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12
      }
    },
    // 修改分割线的颜色
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    }
    

    需求5: 修改两个线模块配置(注意在series 里面定制)

    //第一条 线是圆滑
    smooth: true,
    // 单独修改线的样式
    lineStyle: {
        color: "#0184d5",
        width: 2 
    },
     // 填充区域
    areaStyle: {
          // 渐变色,只需要复制即可
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
    },
    // 设置拐点 小圆点
    symbol: "circle",
    // 拐点大小
    symbolSize: 8,
    // 设置拐点颜色以及边框
    itemStyle: {
        color: "#0184d5",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12
    },
    // 开始不显示拐点, 鼠标经过显示
    showSymbol: false,
    
    name: "转发量",
    type: "line",
    smooth: true,
    lineStyle: {
      normal: {
        color: "#00d887",
        width: 2
      }
     },
     areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0, 216, 135, 0.4)"
            },
            {
              offset: 0.8,
              color: "rgba(0, 216, 135, 0.1)"
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
      }
    },
    // 设置拐点 小圆点
    symbol: "circle",
    // 拐点大小
    symbolSize: 5,
    // 设置拐点颜色以及边框
     itemStyle: {
        color: "#00d887",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12
    },
    // 开始不显示拐点, 鼠标经过显示
    showSymbol: false,
    

    需求6: 更换数据

    // x轴更换数据
    data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
    // series  第一个对象data数据
    data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
    // series  第二个对象data数据
    data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
    

    16-饼形图 1年龄分布模块制作

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    定制图表需求1:

    • 修改图例组件在底部并且居中显示。
    • 每个小图标的宽度和高度修改为 10px
    • 文字大小为12 颜色 rgba(255,255,255,.5)
    legend: {
         // 距离底部为0%
         bottom: "0%",
         // 小图标的宽度和高度
         itemWidth: 10,
         itemHeight: 10,
         data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
         // 修改图例组件的文字为 12px
         textStyle: {
           color: "rgba(255,255,255,.5)",
           fontSize: "12"
         }
    },
    

    定制需求2:

    • 修改水平居中 垂直居中
    • 修改内圆半径和外圆半径为 [“40%”, “60%”] pink老师友情提示,带有直角坐标系的比如折线图柱状图是 grid修改图形大小,而我们饼形图是通过 radius 修改大小
    series: [
         {
           name: "年龄分布",
           type: "pie",
           // 设置饼形图在容器中的位置
           center: ["50%", "50%"],
           //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
           radius: ["40%", "60%"],
           // 不显示标签文字
           label: { show: false },
           // 不显示连接线
           labelLine: { show: false },
         }
    ]
    

    定制需求3:更换数据

    // legend 中的data  可省略
    data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    //  series 中的数据
    data: [
             { value: 1, name: "0岁以下" },
             { value: 4, name: "20-29岁" },
             { value: 2, name: "30-39岁" },
             { value: 2, name: "40-49岁" },
             { value: 1, name: "50岁以上" }
    ] ,
    

    定制需求4: 更换颜色

    color: [
              "#065aab",
              "#066eab",
              "#0682ab",
              "#0696ab",
              "#06a0ab",
            ],
    
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
      myChart.resize();
    });
    

    17-饼形图2 地区分布模块制作(南丁格尔玫瑰图)

    • 官网找到类似实例, 适当分析,并且引入到HTML页面中
    • 根据需求定制图表

    第二步:按照需求定制

    • 需求1:颜色设置
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    
    • 需求2:修改饼形图大小 ( series对象)
    radius: ['10%', '70%'],
    
    • 需求3: 把饼形图的显示模式改为 半径模式