边框图片

看到上图div边框，是由不规则的图片组成，如果使用普通的border属性，只能绘制简单的线条，无法显示上图复杂效果；如果使用背景图片实现效果，但你会发现图片的宽高是固定的，无法实现随着div宽高的拉伸自适应，就算设置背景图自动拉伸，也会导致背景变形。

当你遇到需要复杂的边框时，可以考虑边框图片border-image属性，该属性是css3新增属性，就是用于解决这类复杂边框问题。

使用代码如下：

    .image_box {
      width: 300px;
      height: 100px;
      border-style: solid;  // 使用边框图片必须设置
      border-image-source: url('./images/border2.png');
      border-image-slice: 26;
      border-image-width: 26px;
    }

1、图片资源(border-image-source)

border-image: none | <image>

border-image的背景图使用url()调用，图片可以是相对路径或是绝对路径，也可以不使用图片，none 表示border-image不做任何效果，边框使用 border-style 指定的样式。

2、图片剪裁位置(border-image-slice)

border-image-slice 从名字上看就很好理解：边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，如下：

注意：如果数值单位为像素px，只填写数字即可。

3、边框背景宽度(border-image-width)

border-image-width 作用是将 DOM 节点分割成九宫格。

4、注意

使用边框图片必须设置border-style否则没法显示。

iconfont字体图标

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

应用场景

看到上图是京东首页的搜索栏，搜索栏右侧的相机，放大镜，购物车都是使用iconfont技术实现的。

使用image标签弊端

除了iconfont外，也可以用普通图片标签实现。但是使用图片会有下面弊端：

• 增加了页面的请求
• 图片的大小和颜色不容易改变
• 为了调高清晰度，图片越来越大

CSS Sprites

为了减少图片请求数，提高性能，我们可能会使用雪碧图：把网页中比较小的一些小图片整合到一张图片文件中，再利用 CSS 的 background-image 属性插入图片，然后利用 background-position 属性对图片所需要的部分进行精确定位。但是它有个问题就是，雪碧图比较适合固定功能的网站。如果我们的网站每隔一段时间就要加一些新功能，添加和替换雪碧图就变成了很繁琐的工作。

iconfont

优点

• 可以方便地将任何 CSS 效果应用于它们。
• 因为它们是矢量图形，所以它们是可伸缩的。这意味着我们可以在不降低质量的情况下伸缩它们。
• 我们只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。
• 由于尺寸小，它们加载速度快。
• 它们在所有浏览器中都得到支持（甚至支持到 IE6）。

不足

• 不能用来显示复杂图像
• 通常只限于一种颜色，除非应用一些 CSS 技巧

iconfont使用方法

1. 使用免费公共iconfont

   • 访问阿里iconfont网站，上面有大量免费图标。点击访问

   • 搜索需要的图标

     

   • 点击右上角-下载资源

     

CSS3自适应布局单位VW与VH

实现元素的自适应布局可以使用以前学习的rem，但是需要通过媒体查询或者js动态获取窗口大小设置根元素font-size实现适配。

浏览器其实有更好用的适配方案，下面是该特性支持情况，可以看到大部分移动端和桌面chrome浏览器都能支持，所以现阶段如果没有特别要求支持IE浏览器的，可以放心使用。

在移动端ios8以上以及Android 4.4以上获得支持，并且在微信 x5 内核中也得到完美的全面支持

视图单位（Viewport units）指为浏览器内部的可视区域大小

1vw表示可是宽度的1%，1vh表示可是高度的1%；它和百分比布局最大的区别是，百分比是相对于包含它的最近的父元素的高度和宽度，而视图单位是基于可视区域。

可视化项目

目录准备

VSCode安装less转换css插件

整体结构布局

页面分三列布局

设备列表

<div class="device">
  <div class="counter">
    <div class="count">2,923</div>
    <div class="icon_title">
      <div class="icon_title_icon blue"></div>
      <div class="icon_title_text">设备总数</div>
    </div>
  </div>
  <div class="counter">
    <div class="count">123</div>
    <div class="icon_title">
      <div class="icon_title_icon green"></div>
      <div class="icon_title_text">季度新增</div>
    </div>
  </div>
  <div class="counter">
    <div class="count">2,923</div>
    <div class="icon_title">
      <div class="icon_title_icon green"></div>
      <div class="icon_title_text">运营设备</div>
    </div>
  </div>
  <div class="counter">
    <div class="count">2,923</div>
    <div class="icon_title">
      <div class="icon_title_icon red"></div>
      <div class="icon_title_text">异常设备</div>
    </div>
  </div>
</div>

设计图上边框图片出现在多个地方，可以通过less的函数功能实现

// 设置边框图片函数
.setBorderImage() {
  border-style: solid;
  border-image: url('../images/border.png');
  border-image-slice: 40 37 18 125;
  border-image-width: 40px 37px 18px 125px;
}
// 左侧区域-设备
.left_side {
  margin-top: -3vw;
  .device {
    height: 6.3vw;
    .setBorderImage();
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
// 公共样式
.counter {
  .count {
    color: #fff;
    font-size: 1.4vw;
    margin-bottom: 0.5vw;
  }
  .icon_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    &_icon {
      width: 0.3vw;
      height: 0.55vw;
      border-radius: 35%;
      margin-right: 0.54vw;
      &.red {
        background-color: red;
      }
      &.blue {
        background-color: #0850fe;
      }
      &.green {
        background-color: #5bc492;
      }
      &.yellow {
        background-color: #ffff0b;
      }
    }
    &_text {
      color: #006cff;
      font-size: 1vw;
    }
  }
}

故障设备监控

1、头部tab点击切换效果

$('.fault_device .tab .item').click(function() {
  // $(this)表示当前点击元素，给当前点击元素增加active类名，siblings方法获取同级兄弟元素
  $(this).addClass('active').siblings().removeClass('active');
})

2、列表无缝滚动

核心使用css3动画实现

<div class="list">
  <div class="item">
    <div>20180705</div>
    <div>广东省广州市天河区黑马</div>
    <div>10000101</div>
  </div>
  <div class="item">
    <div>20180705</div>
    <div>广东省广州市天河区黑马</div>
    <div>10000101</div>
  </div>
</div>

.list {
  height: 17vw;
  overflow: hidden;
  .item {
    display: flex;
    justify-content: space-between;
    padding: 0.5vw 1.2vw;
    color: #2f62c2;
    font-size: 0.8vw;
    animation: move 4s linear infinite;
  }
  @keyframes move {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-800%);
    }
  }
}

eCharts快速入门

1、引入 ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2、绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这样你的第一个图表就诞生了！

图表配置

1、点位分布统计

配置代码：

var myChart = echarts.init(document.getElementById('main'));
var option = {
  // 饼图每个模块的颜色
  color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
  // 鼠标悬停在图表时提示
  tooltip: {
    trigger: 'item', // 触发类型，item表示数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
    formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框浮层内容格式器，{a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
  },
  // 系列 - 数据图
  series: [
    {
      name: '访问来源', // 系列名称，用于tooltip的显示
      type: 'pie', // 类型，pie表示饼图
      radius: ['10%', '70%'], // 饼图的半径， 数组的第一项是内半径，第二项是外半径。
      center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
      data: [ // 图表数据，name表示项的名称，value表示数据项的值
        { value: 20, name: '云南' },
        { value: 26, name: '北京' },
        { value: 24, name: '山东' },
        { value: 25, name: '河北' },
        { value: 20, name: '江苏' },
        { value: 25, name: '浙江' },
        { value: 30, name: '四川' },
        { value: 42, name: '湖北' }
      ],
      roseType: 'area', // 是否展示成南丁格尔图，通过半径区分数据大小。过于专业，忽略吧
    }
  ]
};
myChart.setOption(option);

2、销售额统计

  var saleChart = echarts.init(document.getElementById('sale_chart'));
    const list = [
      [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      ],
      [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
      ],
      [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
      ],
      [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
      ],
    ];
    var option = {
      xAxis: {
        type: 'category', // 坐标轴类型
        axisLabel: {
          color: 'blue', // 刻度标签文字的颜色
        },
        data: [ // x轴数据
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      yAxis: { // y轴配置
        type: 'value',
        axisLabel: {
          color: 'blue', // 颜色
        },
        // 设置分割线
        splitLine: {
          lineStyle: {
            color: 'blue',
          },
        },
      },
      // 图例，用于控制显示特定数据
      legend: {
        data: ['预期销售额', '实际销售额'], // 和series中数据对应起来
        textStyle: {
          color: 'blue',
        },
      },
      // 系列 重要的数据
      series: [
        {
          name: '预期销售额',
          // 注意 list的结构
          data: list[0][0],
          type: 'line',
          itemStyle: {
            color: 'red',
          },
          // 控制折线图的线条弯曲
          smooth: 0.5,
        },
        {
          name: '实际销售额',
          data: list[0][1],
          type: 'line',
          itemStyle: {
            color: 'aqua',
          },
          smooth: 0.5,
        },
      ],
    };
    saleChart.setOption(option);

3、一季度销量进度

    var myChart = echarts.init(document.querySelector('#channels_chart'));
    option = {
      title: {
        text: '75%',
        x: '47%',
        y: '50%%',
        textStyle: {
          color: '#fff',
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['80%', '100%'],
          center: ['50%', '70%'],
          label: {
            show: false,
            position: 'center',
          },
          data: [
            { value: 1, name: '直接访问', itemStyle: { color: '#12274d' } },
            { value: 2, name: '透明的元素', itemStyle: { color: 'transparent' } },
            { value: 1, name: '联盟广告', itemStyle: { color: '#00abd7' } },
          ],
        },
      ],
    };

    myChart.setOption(option);

4、全国用户总量统计

var userChart = echarts.init(document.querySelector("#user_chart"));
    var option = {
      grid: {
        top: "10%",
        bottom: 0,
        left: 0,
        right: "5%",
        // 是否包含刻度文字 
        containLabel: true
      },
      // 横坐标
      xAxis: {
        type: 'category',
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        axisLabel: {
          color: "blue"
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: "blue"
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        },
      },
      // 系列
      series: [{
        data: [2100, 1900, 1700, 1560, 1400, {
          value: 1200,
          itemStyle: {
            color: "#254065"
          }
        }, {
            value: 1200,
            itemStyle: {
              color: "#254065"
            }
          }, {
            value: 1200,
            itemStyle: {
              color: "#254065"
            }
          }, 900, 750, 600, 480, 240],
        type: 'bar',
        // 先设置统一的颜色  个别柱子不同的颜色再单独在data中设置 
        itemStyle: {
          // 渐变
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        },
      }]
    };
    userChart.setOption(option);

5、迁徙图

如果碰到复杂的图表没法通过官方实例完成的，可以去该网站查看其他开发者提供的案例。