是否看过黑客的高级数据页面，感觉很帅很高大上，其实。。。很简单，只要跟着咱一步一步来，你也可以做到。这里咱们用echart和flexible布局，来做一个响应式的动态数据页面。废话不多说，咱先上成品图。(学习黑马pink老师的~)

展示.gif

配置及插件

创建css、image、js文件夹
编辑器咱们这边用的是vscode，然后安装了两个小插件
插件1：cssrem ：扩展设置里面，把属性root font size 设置到80，方便后面px和rem的转化
插件2：Easy LESS:用于根据less文件自动成圣css文件，创建index.less文件
我们从百度拷下flexbile.js文件,并导入html

如下图~

接下来，我们要开始布局了

设置页面css初始化，及全图背景

step1:初始化咱们的body，因为默认是有margin和padding的，并且盒模型也要设定为标准盒模型；
step2:设置全图背景，并居中显示

编写heder

step1:在html页面中，声明header组件，并声明script标签;
step2:在script标签中，编写咱们的计时器，通过样式showTime找到标签并渲染;

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); //设定定时器，循环运行
}

这时候，背景，和头部已经完成了，咱先看下效果图：

完成header.png

编写body

两侧格局

step1:新建section标签，并把body分成3块，如图;
step2:由于我们需要中间木块宽，两侧窄，我们可以把两边的宽度设置为3份，中间五份，用flex布局;
step3:每个面板panel都是有背景图的，并且四个角还有直角的border，咱们引入背景图，并且利用伪类为panel写上边框（图3）
step4:这时候只有上面两个角有边框，所以咱们给panel-footer也写两个伪类，为下面两个角加上边框（图4）

这时候面板效果就出来了，咱们复制到左右两边各三个，看下效果图：

两边框架完成.png

中间格局

上面那块数字展示板咱就不讲了，需要的同学们找我拿下代码自己看一下哈~
下面的中国地图模块其实是由四个模块组成的：地球背景，两个旋转的样式图片，及中国地图。

HTML CSS：总的操作也就是背景图片的层级覆盖

看下效果：

地图及动画完成.png

自适应页面咱们这就写完了，接下来就是echart操作了~

Echart 引入及使用

step1：下载并引入echarts.js文件
step2：准备一个具备宽高的DOM容器：每个echarts表格都需要一个有宽高的DOM容器
step3：初始化echarts实例对象，因此我们在js文件夹中，新建一个index.js文件，用来存放我们的echarts表格
step4：制定配置项和数据(option)
step5：将配置项设置给echarts实例对象
step6：从echarts官网里面的实例，选择自己要的数据表格，copy下来
step7：给每个面板都选一个自己喜欢的数据

// 柱状图1模块
// 声明一个立即执行函数，为的是防止变量污染
(function() {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
  // 监听屏幕大小变化，重新渲染表格
  window.addEventListener("resize", function() {
    myChart.resize();
  });

})();

当给6个面板都插入echart表格后，看下效果：

echarts数据导入完成.png

导入中国地图

step1:导入地图都需要导入一个china.js的依赖，需要的可以找我拿资源
step2:去echarts论坛上找一个自己想要的中国地图
step3:引入方式跟表格相似

看下成品图效果

成品图.png

附带一张option中比较主要的几个配置，感兴趣的同学可以自己去研究研究

配置详情.png

结语

一个看似高大上的大数据页面就这么完成了，篇幅有限，没办法讲得很详细，主要是讲了自适应页面的制作，大数据基本还是引入了echarts的内容，按照官方的配置文档写了一些简单的。需要完整代码的同学们可以私聊我，我会打包一起给你。觉得有意思的同学们可以点个赞，收藏起来，你们的支持就是我最大的动力~

其他有趣文章的传送门：

手摸手教你从0用echart写一个响应式页面