vue大屏项目基础模板，前端驾驶舱demo，完整代码分享

前端开发工作中，经常会遇到大屏展示项目，我每次开发大屏项目，都会基于这个模板来做，模版已经实现了基础布局，基础布局是按照flex自适应开发的，每个echarts图表也都做了自动适配。后期加上美工的图片 + 样式微调就搞定啦，如果追求快速开发，直接搬走妥妥够用。

下面直接上样式：（因为没有任何背景图 和 图片资源，加上样式就会好看很多）

大屏主页面代码：bigdata.vue

<template>
    <div id="big-data-container" class="big-data-container">
        <div class="head">
            <h1>人力资源管理系统驾驶舱</h1>
        </div>
        <div class="data-container">
            <div class="data-left">
                <div class="data-left-item">
                    <div class="title">各事业部工时</div>
                    <div id="chart-left-1" style="height: calc(100% - 30px);"></div>
                    <div class="data-foot-line"></div>
                </div>
                <div class="data-left-item">
                    <div class="title">员工出勤情况</div>
                    <div id="chart-left-3" style="height: calc(100% - 30px);"></div>
                    <div class="data-foot-line"></div>
                </div>
                <div class="data-left-item">
                    <div class="title">项目工时情况</div>
                    <div id="chart-left-2" style="height: calc(100% - 30px);"></div>
                    <div class="data-foot-line"></div>
                </div>
            </div>
            <div class="data-center">
                <!-- <div class="title">中间位置</div> -->
                <div class="center-top-num">
                    <div class="item">
                        <div class="text">集团员工人数</div>
                        <div class="num">1,046</div>
                    </div>
                    <div class="item">
                        <div class="text">正式员工人数</div>
                        <div class="num">966</div>
                    </div>
                    <div class="item">
                        <div class="text">实习员工人数</div>
                        <div class="num">84</div>
                    </div>
                    <div class="data-foot-line"></div>
                </div>
                <div class="center-top">
                    <div class="title">员工活跃信息</div>
                    <iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
                    <div class="data-foot-line"></div>
                </div>
                <div class="title">出勤情况总计</div>
                <div id="chart-center" class="chart-center"></div>
            </div>
            <div class="data-right">
                <div class="data-right-item">
                    <div class="title">考勤异常走势</div>
                    <div id="chart-right-1" style="height: calc(100% - 30px);"></div>
                    <div class="data-foot-line"></div>
                </div>
                <div class="data-right-item">
                    <div class="title">员工打卡统计</div>
                    <iview-circle></iview-circle>
                    <div class="data-foot-line"></div>
                </div>
                <div class="data-right-item right-3">
                    <div class="title">项目工时排行榜</div>
                    <div id="chart-right-3" class="right-item">
                        <div class="item">
                            <div class="top">排名</div>
                            <div class="pro-name">项目名称</div>
                            <div class="num">工时</div>
                            <div class="num">人数</div>
                        </div>
                        <div class="item">
                            <div class="top top-1">
                                <span>1</span>
                            </div>
                            <div class="pro-name">人员管理系统</div>
                            <div class="num">679</div>
                            <div class="num">8</div>
                        </div>
                        <div class="item">
                            <div class="top top-2">
                                <span>2</span>
                            </div>
                            <div class="pro-name">生产管理系统</div>
                            <div class="num">1,700</div>
                            <div class="num">6</div>
                        </div>
                        <div class="item">
                            <div class="top top-3">
                                <span>3</span>
                            </div>
                            <div class="pro-name">智慧园区管理系统</div>
                            <div class="num">366</div>
                            <div class="num">3</div>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
var echarts = require('echarts');
import { chartLeft1, chartLeft2, chartLeft3, chartRight1 } from './bigdata/chart-options';
import IviewCircle from './bigdata/IviewCircle';
import './bigdata/layout.less';
export default {
    components: {
        'iview-circle': IviewCircle
    },
    data() {
        return {};
    },
    mounted() {
        var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'));
        $chartLeft1.setOption(chartLeft1);

        var $chartLeft2 = echarts.init(document.getElementById('chart-left-2'));
        $chartLeft2.setOption(chartLeft2);

        var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'));
        $chartLeft3.setOption(chartLeft3);

        var $chartCenter = echarts.init(document.getElementById('chart-center'));
        $chartCenter.setOption(chartRight1);

        var $chartRight1 = echarts.init(document.getElementById('chart-right-1'));
        $chartRight1.setOption(chartRight1);
    }
};
</script>
<style scoped>
/* .chart-center {
  display: flex;
  border: 1px solid #0000ff;
  height: 200px;
  flex-direction: column;
  margin-top: 20px;
}
.chart-center .item {
  text-align: center;
  border: 1px solid #00c1b3;
  flex: 1;
} */
.right-3 {
    display: flex;
    flex-direction: column;
    /* margin-top: 20px; */
}

.right-3 .right-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.right-3 .item {
    text-align: left;
    border-bottom: 1px solid #549069;
    flex: 1;
    display: flex;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 14px;
    line-height: 30px;
}

.right-3 .item:last-child {
    border-bottom: 0;
}

.right-3 .item > div {
    color: white;
}

.right-3 .top {
    width: 60px;
    position: relative;
}

.right-3 .top span {
    position: absolute;
    width: 20px;
    line-height: 20px;
    top: 5px;
    text-align: center;
    border-radius: 5px;
}

.right-3 .top-1 span {
    background: #e80d0d;
}

.right-3 .top-2 span {
    background: #00c935;
}

.right-3 .top-3 span {
    background: #0083f4;
}

.right-3 .num {
    width: 88px;
}

.right-3 .pro-name {
    flex: 1;
}
</style>

各个关联文件：

chart-options.js

var echarts = require("echarts");
let chartLeft1 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "10px",
    right: "0%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "第一事业部",
        "第二事业部",
        "第三事业部",
        "第四事业部",
        "第五事业部",
        "第七事业部" 
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1    )",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      type: "bar",
      data: [200, 600, 300, 900, 1500, 1200, 600],
      barWidth: "35%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};

let chartLeft2 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "10px",
    right: "0%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "07.01",
        "07.02",
        "07.03",
        "07.04",
        "07.05",
        "07.06",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1    )",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1    )",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ], series: [
    {
      type: "bar",
      name: "销量",
      data: [1200, 800, 300, 500, 560, 220],
      barWidth: "25%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }, {
      type: "bar",
      name: "订单",
      data: [1000, 750, 380, 450, 450, 120],
      barWidth: "25%",
      itemStyle: {
        normal: {
          color: "#46d000",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};

let chartLeft3 = {
  tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: {
    left: "0%",
    top: "-5px",
    right: "3%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: {
      type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1    )",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    }
  },
  yAxis: {
      type: 'category',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1    )",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    },
      data: ['周一', '周二', '周三', '周四', '周五']
  },
  series: [
      {
          name: '直接访问',
          type: 'bar',
          stack: '总量',
          label: {
              show: true,
              position: 'insideRight'
          },
            barWidth: "55%",
    itemStyle: {
      normal: {
        color: "#2f89cf",
        opacity: 1,
        barBorderRadius: 5
      }
    },
          data: [120, 302, 400, 200, 700]
      }
  ]
};

let chartRight1 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["白班人数", "夜班人数", "考勤异常"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "20",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [
        "2020.06.15",
        "2020.06.16",
        "2020.06.17",
        "2020.06.18",
        "2020.06.19",
        "2020.06.20",
        "2020.06.21",
        "2020.06.22"
      ]
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 60,
      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)"
        }
      }
    }
  ],
  series: [
    {
      name: "白班人数",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#45d4ba",
        width: 1
      }, //线条的样式
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#83cddc"
          },
          {
            offset: 1,
            color: "#bfdffbb5"
          }
        ])
      },
      data: [5, 22, 150, 54, 1, 230, 4, 1]
    },
    {
      name: "夜班人数",
      type: "line",

      smooth: true,
      lineStyle: {
        color: "#04a710",
        width: 1
      }, //
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0cbf22"
          },
          {
            offset: 1,
            color: "#b8f7d1b5"
          }
        ])
      },
      data: [10, 150, 1, 250, 20, 100, 10, 150]
    },
    {
      name: "考勤异常",
      type: "line",

      lineStyle: {
        color: "#0864c3",
        width: 1
      }, //线条的样式
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#29d7ff"
          },
          {
            offset: 1,
            color: "#34ccef85"
          }
        ])
      },
      data: [100, 2, 260, 1, 200, 30, 101, 40]
    }
  ]
};

export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }

layout.less

.big-data-container {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #1400a8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  .head {
    height: 75px;
    /* height: 1.05rem; */
    background: url(./head_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
  }
}

.head h1 {
  margin: 0;
  color: #fff;
  text-align: center;
  /* font-size: .4rem; */
  /* line-height: .8rem; */
  line-height: 71px;
}

.data-container {
  /* margin: 5px 15px;
        height:100%; */

  margin: 0px 15px;
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  bottom: 0;
}

.data-container > div {
  float: left;
  /* border: 1px solid white; */
  height: 100%;
}

.data-center {
  padding: 0 0.9rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  // .center-top{
  //   height: 210px;
  //   background: red;
  // }
.chart-center{
  flex: 1;
}
}
.chart-center{
  width: 100%;
display: flex;
//  background: white;
}
.data-left,
.data-right {
  width: 30%;
  display: flex;

  flex-direction: column;
}

.data-left-item,
.data-right-item,.center-top,.center-top-num,.chart-center {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.data-foot-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.data-foot-line:before,
.data-foot-line:after {
  position: absolute;
  width: 10px;
  height:10px;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.boxall:before,
.data-foot-line:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}

.boxall:after,
.data-foot-line:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}

.boxall:before,
.boxall:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left-item:before,
.data-right-item:before,
.center-top-num:before,
.center-top:before{
  border-left: 2px solid #02a6b5;
  left: 0;
  position: absolute;
  width: 10px;
  height:10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left-item:after,
.data-right-item:after,
.center-top-num:after,
.center-top:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left,
.data-right {
  /* display: flex; */
}

.data-left > .data-left-item,
.data-right > .data-right-item {
  flex: 1;
  margin-bottom: 0.9rem;
}

.data-center  .title,
.data-left > .data-left-item .title,
.data-right > .data-right-item .title {
  /* font-size: .2rem; */
  font-size: 1rem;
  padding: 7px 0;
  color: #fff;
  text-align: center;
  /* line-height: .5rem; */
}

.data-center .chart-center{
  width: 100%;
}

.center-top-num{
  height: 80px;
  padding-top: 7px;
  margin-bottom: 0.8rem;
  display: flex;
  .item{
    flex: 1;
    text-align: center;
  }
  .text{
    color: #fcf0d8;
    font-size: 14px;
  }
  .num{
    font-size: 34px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: bold;
    color: #67caca;
  }
}

IviewCircle.vue

<template>
  <div class="demo-Circle">
    <div style>
      <i-circle
        :size="size"
        :trail-width="4"
        :stroke-width="5"
        :percent="75"
        stroke-linecap="square"
        stroke-color="#43a3fb"
      >
        <div class="demo-Circle-custom">
          <h1>1500</h1>
          <p>昨日活跃用户数量</p>
          <span>
            占比
            <i>{{1500/20000}}%</i>
          </span>
        </div>
      </i-circle>
    </div>
    <div style>
      <i-circle
        :size="size"
        :trail-width="4"
        :stroke-width="5"
        :percent="75"
        stroke-linecap="square"
        stroke-color="#43a3fb"
      >
        <div class="demo-Circle-custom">
          <h1>12000</h1>
          <p>上月活跃用户数量</p>
          <span>
            占比
            <i>{{12000/150000}}%</i>
          </span>
        </div>
      </i-circle>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    size:{
      type:Number,
      default:150
    }
  }
}
</script>
<style scoped>
.demo-Circle {
  display: flex;
}
.demo-Circle > div {
  flex: 1;
  text-align: center;
}
.demo-Circle > div:first-child{
  padding-left:10%;
}

.demo-Circle > div:last-child{
  padding-right:10%;
}
</style>
<style lang="less" scoped>
.demo-Circle-custom {
  & h1 {
    color:#ffffff;
    font-size: 28px;
    font-weight: normal;
  }
  & p {
    color: #ece8e8;
    font-size: 14px;
    margin: 10px 0 15px;
  }
  & span {
    display: block;
    padding-top: 15px;
    color: wheat;
    font-size: 14px;
    &:before {
      content: "";
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: #e0e3e6;
      position: relative;
      top: -15px;
    }
  }
  & span i {
    font-style: normal;
    color: white;
  }
}
</style>

2024-08-05 更新：

鉴于有朋友问我，<i-circle> 标签是什么，这个是项目内引用了 iview 组件库的 circle 圆环，我安装的版本： "iview": "^3.2.2"

npm安装即可使用了，但如不需要整个组件库，建议换一下其他的单独圆环插件，会比较轻量