diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
new file mode 100644
index 000000000..0efbae7ec
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="chart-room">
+    <loading  :ref="localLoading"></loading>
+
+    <div class="chart-header"></div>
+
+    <div class="chart-body" ref="chartBody" id="chartBody"></div>
+
+    <div class="chart-foot">
+      <el-scrollbar>
+        <div class="chart-legend"></div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts';
+  import chartDataFormat from "../../../charts/chartDataFormat";
+  import loading from "../../../common/loading";
+  import chartConfig from './chartConfig'
+  export default {
+    name: "chart",
+    props:[],
+    data(){
+      return {
+        option:chartConfig.getCommonOption
+      }
+    },
+    created() {
+    },
+    methods:{
+
+    },
+    watch:{
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
new file mode 100644
index 000000000..276511270
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -0,0 +1,82 @@
+<script>
+    import chartDataFormat from "../../../charts/chartDataFormat";
+    const commonOption={
+      title:{
+        show:false,
+      },
+      color: this.bgColorList,
+      tooltip: {
+        trigger: 'axis',
+        confine:false,
+        extraCssText:'z-index:1000;',
+        // formatter:null,
+        // position:null,
+      },
+      grid: {
+        top: 13,
+        left: 0,
+        right: 30,
+        containLabel: true,
+        bottom:35,//156
+      },
+      dataZoom: [{
+        type: 'slider',
+        show:true,
+        xAxisIndex: [0],
+        start: 0,
+        end: 100,
+        height:25,
+        bottom:10,//96
+        left:40,
+        right:48,
+      }],
+      xAxis: {
+        type: 'time',
+        // boundaryGap: false,//line-false; bar-true;
+        axisLabel: {
+          intervale: 0,
+          rotate: 0,
+          formatter: function (value) {
+            var t_date = new Date(value);
+            return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+              + [t_date.getHours(), t_date.getMinutes()].join(':');
+          }
+        },
+        axisPointer: {//y轴上显示指针对应的值
+          show: true,
+        },
+        splitLine:{
+          show:false
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitLine:{
+          show:true
+        },
+        axisLabel: {
+          // formatter:null,
+        },
+      },
+      useUTC: false,//使用本地时间
+      series: [],
+    }
+
+    export default {
+      getCommonOption:function(){
+        return commonOption;
+      },
+      setTooltipPostion:function(positionFunc){
+        commonOption.tooltip.position=positionFunc;
+      },
+      setTooltipFormatter:function(formatFunc){
+        commonOption.tooltip.formatter=formatFunc;
+      },
+      setYAxisLabelFormatter:function(formatFunc){
+        commonOption.yAxis.axisLabel.formatter=formatFunc;
+      },
+      setSeries:function(series){
+        commonOption.series=series;
+      }
+    }
+</script>
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.scss b/nezha-fronted/src/components/page/dashboard/overview/overview.scss
new file mode 100644
index 000000000..067753ebb
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.scss
@@ -0,0 +1,80 @@
+.overview{
+  height: 100%;
+}
+
+.overview-content-header{
+  display: flex;
+  padding-top: 10px;
+}
+.overview-content-header .header-title{
+  flex:13;
+  height: 35px;
+  line-height: 35px;
+  font-size: 24px !important;
+  font-weight: 700;
+  margin-left: 15px;
+}
+.overview-content-header .header-tool{
+  flex: 2;
+  height: 35px;
+}
+.header-tool .tool-container{
+  display: flex;
+  text-align: center;
+}
+.tool-container .time{
+  flex: 4;
+  font-size: 24px !important;
+  font-weight: 700;
+  display: inline-block;
+  height: 35px;
+  line-height: 35px;
+  vertical-align: middle;
+}
+.tool-container .date{
+  flex: 4;
+  height: 35px;
+}
+.date .week{
+  font-size: 18px;
+  font-weight: bold;
+}
+.date .sys-date{
+  padding-top: 5px;
+  font-size: 12px;
+}
+.tool-container .operation{
+  flex: 2;
+  display: inline-block;
+  line-height: 35px;
+}
+.operation .nz-icon-maxview{
+  font-size: 30px !important;
+}
+.overview-content{
+  height: 100%;
+  width: 100%;
+}
+/*100份*/
+.overview-content .content-row-box{
+  margin: 15px 15px 15px 15px;
+  width: 99%;
+}
+.content-row-box .content-col-box{
+  border: 1px solid lightgrey;
+  padding: 15px;
+  display: inline-block;
+}
+.box-height-250{
+  height: 250px;
+}
+.box-height-350{
+  height: 350px;
+}
+.box-height-400{
+  height: 400px;
+}
+.box-height-500{
+  height: 500px;
+}
+
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
new file mode 100644
index 000000000..bded6c4c7
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="overview">
+      <!--左侧菜单栏-->
+      <div class="overview-left content-left">
+        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <div class="sidebar-info">
+          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
+          <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
+        </div>
+      </div>
+      <!--右侧内容-->
+      <div class="overview-right content-right">
+        <!--标题-->
+        <div class="overview-content-header">
+          <div class="header-title">{{$t('dashboard.overview.contentTitle')}}</div>
+          <div class="header-tool">
+            <div class="tool-container">
+              <div class="time">{{sysTime}}</div>
+              <div class="date">
+                <div class="week">{{sysWeek}}</div>
+                <div class="sys-date">{{sysDate}}</div>
+              </div>
+              <div class="operation"><span ><i class="nz-icon nz-icon-maxview"></i></span></div>
+            </div>
+          </div>
+        </div>
+
+        <!--内容-->
+        <div class="overview-content">
+          <el-scrollbar>
+            <div class="content-row-box">
+              <div class="content-col-box box-height-250 " style="width: 45%"></div>
+              <div class="content-col-box box-height-250 " style="width: 25%"></div>
+              <div class="content-col-box box-height-250 " style="width: 23%"></div>
+            </div>
+            <div class="content-row-box">
+              <div class="content-col-box box-height-350 " style="width: 45%"></div>
+              <div class="content-col-box box-height-350 "style="width: 50.2%"></div>
+            </div>
+            <div class="content-row-box">
+              <div class="content-col-box box-height-400 "style="width: 25%"></div>
+              <div class="content-col-box box-height-400 "style="width: 48%"></div>
+              <div class="content-col-box box-height-400 "style="width: 20%"></div>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "overview",
+    props:[],
+    data(){
+      return {
+        sysTime:'',
+        sysDate:'',
+        sysWeek:'',
+      }
+    },
+    created() {
+    },
+    methods:{
+      /*header 时间处理 start*/
+      initDate:function(){
+        this.sysTime=this.getTime();
+        this.sysDate=this.getDate();
+        this.sysWeek=this.getWeek();
+        this.freshTime();
+      },
+      freshTime:function(){
+        let $temp=this;
+        setInterval(function(){
+          $temp.sysTime=$temp.getTime()
+          $temp.sysDate=$temp.getDate();
+          $temp.sysWeek=$temp.getWeek();
+        },1000)
+      },
+      getTime:function(){
+        let date=new Date();
+        let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
+        let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
+        let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
+        return hours+':'+minutes+':'+seconds;
+      },
+      getDate:function(){
+        let date=new Date();
+        let years=date.getFullYear();
+        let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
+        let days=date.getDate()>9?date.getDate():'0'+date.getDate();
+        return years+'-'+months+'-'+days;
+      },
+      getWeek:function(){
+        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
+        let enWeeks=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+        let cnWeeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
+        let date=new Date();
+        let day=date.getDay();
+        if(language == 'en'){
+          return enWeeks[day];
+        }else if(language == 'cn'){
+          return cnWeeks[day];
+        }else{
+          return enWeeks[day];
+        }
+      },
+      /*header 时间处理end*/
+      jumpTo(data, id) {
+        //this.$store.state.assetData.moduleData = data
+        //this.$store.state.assetData.selectedData = id
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+    },
+    computed:{
+
+    },
+    mounted() {
+      this.initDate();
+    }
+  }
+</script>
+
+<style scoped>
+@import "overview.scss";
+</style>
+<style>
+  .overview .el-scrollbar__wrap{
+    margin-bottom: 0px !important;
+  }
+</style>