diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a5ee454a02710f7dc8801b19765ccdeb628957
Binary files /dev/null and b/src/assets/logo/logo.png differ
diff --git "a/src/assets/\347\273\204 65.png" "b/src/assets/\347\273\204 65.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c961faa4911fbfee6c8e333b43c45d3a2071158c
Binary files /dev/null and "b/src/assets/\347\273\204 65.png" differ
diff --git "a/src/assets/\347\273\204 66.png" "b/src/assets/\347\273\204 66.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a23f51880abcd89d9c808e135ad40e851a35b140
Binary files /dev/null and "b/src/assets/\347\273\204 66.png" differ
diff --git "a/src/assets/\347\273\204 67.png" "b/src/assets/\347\273\204 67.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e5c871bf108c01aee4552de36d4760ed44ece5a4
Binary files /dev/null and "b/src/assets/\347\273\204 67.png" differ
diff --git "a/src/assets/\350\267\257\345\276\204 14.png" "b/src/assets/\350\267\257\345\276\204 14.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d9063b9af923a58a27e4b5dbecf87b1a2676841e
Binary files /dev/null and "b/src/assets/\350\267\257\345\276\204 14.png" differ
diff --git a/src/componets/HomePage/firstGraph.vue b/src/componets/HomePage/firstGraph.vue
index 40675fedd2beec4cc739017183e3ec288f03eb89..3aedab40917b257f507b719dfc88b235c798d01e 100644
--- a/src/componets/HomePage/firstGraph.vue
+++ b/src/componets/HomePage/firstGraph.vue
@@ -1,147 +1,152 @@
 <template>
-<div style="display: flex; justify-content: center;flex-direction:column;">
+  <div style="display: flex; justify-content: center; flex-direction: column">
     <!-- <div class="title">JS报错趋势统计</div> -->
     <title-componentVue :na="na"></title-componentVue>
-    <div id="main" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
-</div>
+    <div
+      id="main"
+      style="
+        height: calc((100vw / 7 * 2 - 99px) * 0.67);
+        width: calc(100vw / 7 * 2 - 99px);
+      "
+    ></div>
+  </div>
 </template>
 
 <script>
 import titleComponentVue from './titleComponent.vue'
 export default {
-    name: 'firstGraph',
-    components: {
-        titleComponentVue
-    },
-    data() {
-        return {
-            time: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],
-            jsErrorNumberTong: [12, 120, 430, 430, 450, 320, 120] || [],
-            jsErrorNumberYi: [12, 225, 327, 330, 320, 220, 120] || [],
-            na: 'JS报错趋势统计'
-        }
-    },
-    mounted() {
-        const chartDom = document.getElementById('main')
-        const myChart = this.$echarts.init(chartDom, 'dark')
-        let option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
+  name: 'firstGraph',
+  components: {
+    titleComponentVue,
+  },
+  data() {
+    return {
+      time: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],
+      jsErrorNumberTong: [12, 120, 430, 430, 450, 320, 120] || [],
+      jsErrorNumberYi: [12, 225, 327, 330, 320, 220, 120] || [],
+      na: 'JS报错趋势统计',
+    }
+  },
+  mounted() {
+    const chartDom = document.getElementById('main')
+    const myChart = this.$echarts.init(chartDom, 'dark')
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      backgroundColor: '#000000',
+      // title: {
+      //     text: 'JS报错趋势统计',
+      //     textStyle: {
+      //         fontFamily: "Alibaba",
+      //         fontSize: 18,
+      //         color: "#fff",
+      //     }
+      // },
+      legend: {
+        orient: 'vertical',
+        data: ['同步错误', '异步错误'],
+        right: -5,
+        top: 15,
+      },
+      xAxis: {
+        type: 'category',
+        data: this.time, // 时间
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: '同步错误',
+          type: 'line',
+          data: this.jsErrorNumberTong,
+          symbol: 'none',
+          lineStyle: {
+            // 设置线条的style等
+            normal: {
+              color: '#466AEB', // 折线线条颜色:红色
+            },
+          },
+          itemStyle: {
+            // 设置线条上点的颜色（和图例的颜色）
+            normal: {
+              color: '#466AEB',
             },
-            backgroundColor: '#000000',
-            // title: {
-            //     text: 'JS报错趋势统计',
-            //     textStyle: {
-            //         fontFamily: "Alibaba",
-            //         fontSize: 18,
-            //         color: "#fff", 
-            //     }
-            // },
-            legend: {
-                orient: 'vertical',
-                data: ['同步错误', '异步错误'],
-                right: -5,
-                top: 15
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // 渐变颜色
+                {
+                  offset: 0,
+                  color: '#466AEB',
+                },
+                {
+                  offset: 1,
+                  color: '#ffff',
+                },
+              ],
+              global: false,
             },
-            xAxis: {
-                type: 'category',
-                data: this.time, // 时间
-                boundaryGap: false
+          },
+        },
+        {
+          name: '异步错误',
+          type: 'line',
+          symbol: 'none',
+          data: this.jsErrorNumberYi,
+          lineStyle: {
+            // 设置线条的style等
+            normal: {
+              color: '#6BE6C1', // 折线线条颜色:红色
             },
-            yAxis: {
-                type: 'value',
-                splitLine: {
-                    show: false
-                }
+          },
+          itemStyle: {
+            // 设置线条上点的颜色（和图例的颜色）
+            normal: {
+              color: '#6BE6C1',
             },
-            series: [{
-                    name: '同步错误',
-                    type: 'line',
-                    data: this.jsErrorNumberTong,
-                    symbol: 'none',
-                    lineStyle: {
-                        // 设置线条的style等
-                        normal: {
-                            color: '#466AEB' // 折线线条颜色:红色
-                        }
-                    },
-                    itemStyle: {
-                        // 设置线条上点的颜色（和图例的颜色）
-                        normal: {
-                            color: '#466AEB'
-                        }
-                    },
-                    areaStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                // 渐变颜色
-                                {
-                                    offset: 0,
-                                    color: '#466AEB'
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#ffff'
-                                }
-                            ],
-                            global: false
-                        }
-                    }
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                // 渐变颜色
+                {
+                  offset: 0,
+                  color: '#6BE6C1',
                 },
                 {
-                    name: '异步错误',
-                    type: 'line',
-                    symbol: 'none',
-                    data: this.jsErrorNumberYi,
-                    lineStyle: {
-                        // 设置线条的style等
-                        normal: {
-                            color: '#6BE6C1' // 折线线条颜色:红色
-                        }
-                    },
-                    itemStyle: {
-                        // 设置线条上点的颜色（和图例的颜色）
-                        normal: {
-                            color: '#6BE6C1'
-                        }
-                    },
-                    areaStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                // 渐变颜色
-                                {
-                                    offset: 0,
-                                    color: '#6BE6C1'
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#402D6B'
-                                }
-                            ],
-                            global: false
-                        }
-                    }
-                }
-            ]
-        };
-        myChart.setOption(option)
+                  offset: 1,
+                  color: '#402D6B',
+                },
+              ],
+              global: false,
+            },
+          },
+        },
+      ],
     }
+    myChart.setOption(option)
+  },
 }
 </script>
 
-<style>
-
-</style>
+<style></style>
diff --git a/src/componets/HomePage/fourGraph.vue b/src/componets/HomePage/fourGraph.vue
index 3ff04e16116c86c3a15137caeb5e5e55993ef52c..0491a4a6a6cbaf47db12e7c0fbe9b1513faef8f2 100644
--- a/src/componets/HomePage/fourGraph.vue
+++ b/src/componets/HomePage/fourGraph.vue
@@ -1,423 +1,508 @@
 <template>
-<div class="water-eval-container">
-    <div class="cityGreenLand-charts" id="cityGreenLand-charts">
-    </div>
-</div>
+  <div class="water-eval-container">
+    <div class="cityGreenLand-charts" id="cityGreenLand-charts"></div>
+  </div>
 </template>
 
 <script>
-import 'echarts-gl';
+import 'echarts-gl'
 export default {
-    name: "cityGreenLand",
-    components: {},
-    data() {
-        return {
-            optionData: [{
-                name: '<1s',
-                value: 10000,
-                itemStyle: {
-                    color: '#22c4ff',
-                }
-            }, {
-                name: '1-3s',
-                value: 12116,
-                itemStyle: {
-                    color: '#aaff00'
-                }
-            }, {
-                name: '3-5s',
-                value: 16616,
-                itemStyle: {
-                    color: '#ffaaff'
-                }
-            }],
+  name: 'cityGreenLand',
+  components: {},
+  data() {
+    return {
+      optionData: [
+        {
+          name: '<1s',
+          value: 10000,
+          itemStyle: {
+            color: '#22c4ff',
+          },
+        },
+        {
+          name: '1-3s',
+          value: 12116,
+          itemStyle: {
+            color: '#aaff00',
+          },
+        },
+        {
+          name: '3-5s',
+          value: 16616,
+          itemStyle: {
+            color: '#ffaaff',
+          },
+        },
+        {
+          name: '>5s',
+          value: 16616,
+          itemStyle: {
+            color: '#4D74FF',
+          },
+        },
+      ],
+    }
+  },
+  props: ['loadData'],
+  mounted() {},
+  methods: {
+    getData() {
+      if (this.loadData && this.loadData.length) {
+        for (let i = 0; i < this.optionData.length; i++) {
+          this.optionData[i].value = this.loadData[i]
         }
+      }
+      this.init()
     },
-    mounted() {
-        this.$nextTick(function () {
-            this.init();
-        });
-    },
-    methods: {
-        init() {
-            //构建3d饼状图
-            let myChart = this.$echarts.init(document.getElementById('cityGreenLand-charts'));
-            // 传入数据生成 option
-            this.option = this.getPie3D(this.optionData, 0.8);
-            myChart.setOption(this.option);
-            //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-            this.option.series.push({
-                name: 'pie2d',
-                type: 'pie',
-                labelLine: {
-                    length: 10,
-                    length2: 10
-                },
-                startAngle: -20, //起始角度，支持范围[0, 360]。
-                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-                radius: ['20%', '50%'],
-                center: ['50%', '50%'],
-                data: this.optionData,
-                itemStyle: {
-                    opacity: 0
-                }
-            });
-            myChart.setOption(this.option);
-            this.bindListen(myChart);
-        },
 
-        getPie3D(pieData, internalDiameterRatio) {
-            //internalDiameterRatio:透明的空心占比
-            let that = this;
-            let series = [];
-            let sumValue = 0;
-            let startValue = 0;
-            let endValue = 0;
-            let legendData = [];
-            let legendBfb = [];
-            let k = 1 - internalDiameterRatio;
-            pieData.sort((a, b) => {
-                return (b.value - a.value);
-            });
-            // 为每一个饼图数据，生成一个 series-surface 配置
-            for (let i = 0; i < pieData.length; i++) {
-                sumValue += pieData[i].value;
-                let seriesItem = {
-                    name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-                    type: 'surface',
-                    parametric: true,
-                    wireframe: {
-                        show: false
-                    },
-                    pieData: pieData[i],
-                    pieStatus: {
-                        selected: false,
-                        hovered: false,
-                        k: k
-                    },
-                    center: ['10%', '50%']
-                };
+    init() {
+      //构建3d饼状图
+      let myChart = this.$echarts.init(
+        document.getElementById('cityGreenLand-charts')
+      )
+      // 传入数据生成 option
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10,
+        },
+        startAngle: -20, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0,
+        },
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
 
-                if (typeof pieData[i].itemStyle != 'undefined') {
-                    let itemStyle = {};
-                    typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-                    typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-                    seriesItem.itemStyle = itemStyle;
-                }
-                series.push(seriesItem);
-            }
+    getPie3D(pieData, internalDiameterRatio) {
+      //internalDiameterRatio:透明的空心占比
+      let that = this
+      let series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      let k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return b.value - a.value
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        let seriesItem = {
+          name:
+            typeof pieData[i].name === 'undefined'
+              ? `series${i}`
+              : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+          center: ['10%', '50%'],
+        }
 
-            // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-            // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-            legendData = [];
-            legendBfb = [];
-            for (let i = 0; i < series.length; i++) {
-                endValue = startValue + series[i].pieData.value;
-                series[i].pieData.startRatio = startValue / sumValue;
-                series[i].pieData.endRatio = endValue / sumValue;
-                series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
-                    false, false, k, series[i].pieData.value);
-                startValue = endValue;
-                let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
-                legendData.push({
-                    name: series[i].name,
-                    value: bfb
-                });
-                legendBfb.push({
-                    name: series[i].name,
-                    value: bfb
-                });
-            }
-            let boxHeight = this.getHeight3D(series, 26); //通过传参设定3d饼/环的高度，26代表26px
-            // 准备待返回的配置项，把准备好的 legendData、series 传入。
-            let option = {
-                legend: {
-                    data: legendData,
-                    orient: 'horizontal',
-                    left: 10,
-                    top: 10,
-                    itemGap: 10,
-                    textStyle: {
-                        color: '#A1E2FF',
-                    },
-                    show: false,
-                    icon: "circle",
-                    formatter: function (param) {
-                        let item = legendBfb.filter(item => item.name == param)[0];
-                        let bfs = that.fomatFloat(item.value * 100, 2) + "%";
-                        return `${item.name}  ${bfs}`;
-                    }
-                },
-                labelLine: {
-                    show: false,
-                    lineStyle: {
-                        color: '#7BC0CB'
-                    }
-                },
-                label: {
-                    show: false,
-                    position: 'outside',
-                    rich: {
-                        b: {
-                            color: '#7BC0CB',
-                            fontSize: 12,
-                            lineHeight: 20
-                        },
-                        c: {
-                            fontSize: 16,
-                        },
-                    },
-                    formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+        if (typeof pieData[i].itemStyle != 'undefined') {
+          let itemStyle = {}
+          typeof pieData[i].itemStyle.color != 'undefined'
+            ? (itemStyle.color = pieData[i].itemStyle.color)
+            : null
+          typeof pieData[i].itemStyle.opacity != 'undefined'
+            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+            : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
 
-                },
-                // hover
-                tooltip: {
-                    formatter: params => {
-                        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                            let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
-                                100).toFixed(2);
-                            return `${params.seriesName}<br/>` +
-                                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                                `${ bfb }%`;
-                        }
-                    }
-                },
-                xAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                yAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                zAxis3D: {
-                    min: -1,
-                    max: 1
-                },
-                grid3D: {
-                    show: false,
-                    boxHeight: boxHeight, //圆环的高度
-                    viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
-                        alpha: 40, //角度
-                        distance: 300, //调整视角到主体的距离，类似调整zoom
-                        rotateSensitivity: 0, //设置为0无法旋转
-                        zoomSensitivity: 0, //设置为0无法缩放
-                        panSensitivity: 0, //设置为0无法平移
-                        autoRotate: false //自动旋转
-                    }
-                },
-                series: series
-            };
-            return option;
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        )
+        startValue = endValue
+        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb,
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb,
+        })
+      }
+      let boxHeight = this.getHeight3D(series, 26) //通过传参设定3d饼/环的高度，26代表26px
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          left: 10,
+          top: 10,
+          itemGap: 10,
+          textStyle: {
+            color: '#A1E2FF',
+          },
+          show: false,
+          icon: 'circle',
+          formatter: function (param) {
+            let item = legendBfb.filter((item) => item.name == param)[0]
+            let bfs = that.fomatFloat(item.value * 100, 2) + '%'
+            return `${item.name}  ${bfs}`
+          },
         },
-
-        //获取3d丙图的最高扇区的高度
-        getHeight3D(series, height) {
-            series.sort((a, b) => {
-                return (b.pieData.value - a.pieData.value);
-            })
-            return height * 25 / series[0].pieData.value;
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: '#7BC0CB',
+          },
         },
-
-        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-        getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-            // 计算
-            let midRatio = (startRatio + endRatio) / 2;
-            let startRadian = startRatio * Math.PI * 2;
-            let endRadian = endRatio * Math.PI * 2;
-            let midRadian = midRatio * Math.PI * 2;
-            // 如果只有一个扇形，则不实现选中效果。
-            if (startRatio === 0 && endRatio === 1) {
-                isSelected = false;
+        label: {
+          show: false,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#7BC0CB',
+              fontSize: 12,
+              lineHeight: 20,
+            },
+            c: {
+              fontSize: 16,
+            },
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+        },
+        // hover
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== 'mouseoutSeries' &&
+              params.seriesName !== 'pie2d'
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2)
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              )
             }
-            // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-            k = typeof k !== 'undefined' ? k : 1 / 3;
-            // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-            let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-            let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-            // 计算高亮效果的放大比例（未高亮，则比例为 1）
-            let hoverRate = isHovered ? 1.05 : 1;
-            // 返回曲面参数方程
-            return {
-                u: {
-                    min: -Math.PI,
-                    max: Math.PI * 3,
-                    step: Math.PI / 32
-                },
-                v: {
-                    min: 0,
-                    max: Math.PI * 2,
-                    step: Math.PI / 20
-                },
-                x: function (u, v) {
-                    if (u < startRadian) {
-                        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    if (u > endRadian) {
-                        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-                },
-                y: function (u, v) {
-                    if (u < startRadian) {
-                        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    if (u > endRadian) {
-                        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                    }
-                    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-                },
-                z: function (u, v) {
-                    if (u < -Math.PI * 0.5) {
-                        return Math.sin(u);
-                    }
-                    if (u > Math.PI * 2.5) {
-                        return Math.sin(u) * h * .1;
-                    }
-                    return Math.sin(v) > 0 ? 1 * h * .1 : -1;
-                }
-            };
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
         },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 40, //角度
+            distance: 300, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: false, //自动旋转
+          },
+        },
+        series: series,
+      }
+      return option
+    },
 
-        fomatFloat(num, n) {
-            var f = parseFloat(num);
-            if (isNaN(f)) {
-                return false;
-            }
-            f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
-            var s = f.toString();
-            var rs = s.indexOf('.');
-            //判定如果是整数，增加小数点再补0
-            if (rs < 0) {
-                rs = s.length;
-                s += '.';
-            }
-            while (s.length <= rs + n) {
-                s += '0';
-            }
-            return s;
+    //获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value
+      })
+      return (height * 25) / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2
+      let startRadian = startRatio * Math.PI * 2
+      let endRadian = endRatio * Math.PI * 2
+      let midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
         },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            )
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        },
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
 
-        bindListen(myChart) {
-            // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-            let that = this;
-            let selectedIndex = '';
-            let hoveredIndex = '';
-            // 监听点击事件，实现选中效果（单选）
-            myChart.on('click', function (params) {
-                // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-                let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
-                let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
-                let k = that.option.series[params.seriesIndex].pieStatus.k;
-                let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
-                let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-                // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-                if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
-                    that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
-                            selectedIndex].pieData
-                        .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
-                            selectedIndex].pieData
-                        .value);
-                    that.option.series[selectedIndex].pieStatus.selected = false;
-                }
-                // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-                that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                    isSelected,
-                    isHovered, k, that.option.series[params.seriesIndex].pieData.value);
-                that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
-                // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-                isSelected ? selectedIndex = params.seriesIndex : null;
-                // 使用更新后的 option，渲染图表
-                myChart.setOption(that.option);
-            });
-            // 监听 mouseover，近似实现高亮（放大）效果
-            myChart.on('mouseover', function (params) {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-                if (hoveredIndex === params.seriesIndex) {
-                    return;
-                    // 否则进行高亮及必要的取消高亮操作
-                } else {
-                    // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-                    if (hoveredIndex !== '') {
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-                        isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-                        isHovered = false;
-                        startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-                        endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-                        k = that.option.series[hoveredIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                        that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                            isSelected,
-                            isHovered, k, that.option.series[hoveredIndex].pieData.value);
-                        that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                        hoveredIndex = '';
-                    }
-                    // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-                    if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                        isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
-                        isHovered = true;
-                        startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
-                        endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-                        k = that.option.series[params.seriesIndex].pieStatus.k;
-                        // 对当前点击的扇形，执行高亮操作（对 option 更新）
-                        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                            isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
-                        that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
-                        // 记录上次高亮的扇形对应的系列号 seriesIndex
-                        hoveredIndex = params.seriesIndex;
-                    }
-                    // 使用更新后的 option，渲染图表
-                    myChart.setOption(that.option);
-                }
-            });
-            // 修正取消高亮失败的 bug
-            myChart.on('globalout', function () {
-                // 准备重新渲染扇形所需的参数
-                let isSelected;
-                let isHovered;
-                let startRatio;
-                let endRatio;
-                let k;
-                if (hoveredIndex !== '') {
-                    // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                    isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-                    isHovered = false;
-                    k = that.option.series[hoveredIndex].pieStatus.k;
-                    startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-                    endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-                    // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                    that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                        isSelected,
-                        isHovered, k, that.option.series[hoveredIndex].pieData.value);
-                    that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-                    // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                    hoveredIndex = '';
-                }
-                // 使用更新后的 option，渲染图表
-                myChart.setOption(that.option);
-            });
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      let that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected
+        let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        let k = that.option.series[params.seriesIndex].pieStatus.k
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            )
+          that.option.series[selectedIndex].pieStatus.selected = false
         }
-    }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          )
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              )
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== 'mouseoutSeries' &&
+            params.seriesName !== 'pie2d'
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              )
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            )
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .water-eval-container {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .cityGreenLand-charts {
-    width: calc((100vw / 7 * 2 - 64px) * 5 / 8 );
-    height: calc((100vw / 7 * 2 - 64px) * 9 / 16 );
-    max-height: 250px;
+  width: calc((100vw / 7 * 2 - 64px) * 5 / 8);
+  height: calc((100vw / 7 * 2 - 64px) * 9 / 16);
+  max-height: 250px;
 }
 </style>
diff --git a/src/componets/Performance/barComponent.vue b/src/componets/Performance/barComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bec27a34b41e9fb9a55397b1e5831a7ddabdacb
--- /dev/null
+++ b/src/componets/Performance/barComponent.vue
@@ -0,0 +1,71 @@
+<template>
+  <div id="main1"></div>
+</template>
+
+<script>
+export default {
+  name: 'barComponent',
+  data() {
+    return {
+      nameArr: [],
+      data: [],
+    }
+  },
+  props: ['mountArr'],
+  mounted() {},
+  methods: {
+    getMountArr() {
+      this.mountArr.forEach((item) => {
+        this.nameArr.push(item.componentName)
+        this.data.push({ value: item.mountTime })
+      })
+      this.init()
+    },
+    init() {
+      const chartDom = document.getElementById('main1')
+      const myChart = this.$echarts.init(chartDom, 'dark')
+
+      window.onresize = function () {
+        myChart.resize()
+      }
+
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: this.nameArr,
+        },
+        backgroundColor: '#000000',
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            data: this.data,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)',
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#main1 {
+  height: 27vh;
+}
+</style>
diff --git a/src/componets/Performance/lineComponent.vue b/src/componets/Performance/lineComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61c4135bfa7c4a34d65ed235533ecc5f7fa570a6
--- /dev/null
+++ b/src/componets/Performance/lineComponent.vue
@@ -0,0 +1,160 @@
+<template>
+  <div id="line"></div>
+</template>
+
+<script>
+import { getpaintTime } from '@/services/performance'
+
+export default {
+  name: 'lineComponent',
+  data() {
+    return {
+      paintArr: [],
+      firstPaint: [],
+      firstContentfulPaint: [],
+      firstMeaningfulPaint: [],
+      largestContentfulPaint: [],
+    }
+  },
+  mounted() {
+    this.getPaintArr()
+  },
+  methods: {
+    async getPaintArr() {
+      let res = await getpaintTime()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.paintArr.push(res.data.result[i])
+      }
+      this.paintArr = this.paintArr.sort((a, b) => a.day - b.day)
+
+      this.paintArr.forEach((item) => {
+        this.firstPaint.push(item.firstPaint)
+      })
+
+      this.paintArr.forEach((item) => {
+        this.firstContentfulPaint.push(item.firstContentfulPaint)
+      })
+
+      this.paintArr.forEach((item) => {
+        this.firstMeaningfulPaint.push(item.firstMeaningfulPaint)
+      })
+
+      this.paintArr.forEach((item) => {
+        this.largestContentfulPaint.push(item.largestContentfulPaint)
+      })
+
+      this.init()
+    },
+    init() {
+      const chartDom = document.getElementById('line')
+      const myChart = this.$echarts.init(chartDom, 'dark')
+
+      window.onresize = function () {
+        myChart.resize()
+      }
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        backgroundColor: '#000000',
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: 'FP',
+            type: 'line',
+            data: this.firstPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#6BE6C1 ',
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#6BE6C1 ',
+              },
+            },
+          },
+          {
+            name: 'FCP',
+            type: 'line',
+            data: this.firstContentfulPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#8ED6FA ',
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#8ED6FA',
+              },
+            },
+          },
+          {
+            name: 'FMP',
+            type: 'line',
+            data: this.firstMeaningfulPaint,
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: '#466AEB',
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#466AEB',
+              },
+            },
+          },
+          {
+            name: 'LCP',
+            type: 'line',
+            data: this.largestContentfulPaint,
+            symbolSize: 10,
+
+            lineStyle: {
+              normal: {
+                color: '#EABE37',
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#EABE37',
+              },
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#line {
+  width: 50vw;
+  height: 27vh;
+}
+</style>
diff --git a/src/componets/Performance/listComponent.vue b/src/componets/Performance/listComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b71fe7de933a04a6395f316ebeb84740cc5de5fe
--- /dev/null
+++ b/src/componets/Performance/listComponent.vue
@@ -0,0 +1,173 @@
+<template>
+  <div id="main"></div>
+</template>
+
+<script>
+export default {
+  name: 'listComponent',
+  data() {
+    return {}
+  },
+  props: ['loadData'],
+  mounted() {},
+  methods: {
+    init() {
+      const chartDom = document.getElementById('main')
+      const myChart = this.$echarts.init(chartDom, 'dark')
+
+      window.onresize = function () {
+        myChart.resize()
+      }
+
+      const seriesLabel = {
+        show: true,
+        position: 'right',
+      }
+      let option = {
+        grid: {
+          left: '10%',
+          // right: '30%',
+          bottom: '0%',
+          top: '0%',
+          containLabel: true,
+        },
+        backgroundColor: '#000000',
+        // title: {
+        //     text: '页面访问速度分布',
+        //     textStyle: {
+        //         fontFamily: "Alibaba",
+        //         fontSize: 18,
+        //         color: "#fff",
+        //     }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        // grid: {
+        //     left: 100
+        // },
+        // toolbox: {
+        //   show: true,
+        //   feature: {
+        //     saveAsImage: {}
+        //   }
+        // },
+        xAxis: {
+          type: 'value',
+          show: false,
+          axisLabel: {
+            formatter: '{value}',
+          },
+          splitLine: {
+            show: false,
+          },
+          color: 'black',
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: '#000',
+              width: 1, //这里是为了突出显示加上的
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          boundaryGap: true,
+          type: 'category',
+          inverse: true,
+          data: ['0', '1', '2', '3'],
+          axisLabel: {
+            interval: 0,
+            formatter: function (value) {
+              if (parseInt(value) == 0) {
+                return '{' + value + '| } {value|' + '< 1秒   ' + '}'
+              } else if (parseInt(value) == 1) {
+                return '{' + value + '| } {value|' + '1-3秒   ' + '}'
+              } else if (parseInt(value) == 2) {
+                return '{' + value + '| } {value|' + '3-5秒  ' + '}'
+              } else {
+                return '{' + value + '| } {value|' + '5秒以上' + '}'
+              }
+            },
+            margin: 20,
+            rich: {
+              value: {
+                lineHeight: 30,
+                align: 'center',
+              },
+              0: {
+                height: 8,
+                width: 8,
+                align: 'center',
+                backgroundColor: '#8ED6FA ',
+                borderRadius: 10,
+              },
+              1: {
+                height: 8,
+                width: 8,
+                align: 'center',
+                backgroundColor: '#6BE6C1 ',
+                borderRadius: 10,
+              },
+              2: {
+                height: 8,
+                width: 8,
+                align: 'center',
+                backgroundColor: '#466AEB ',
+                borderRadius: 10,
+              },
+              3: {
+                height: 8,
+                width: 8,
+                align: 'center',
+                backgroundColor: '#466AEB ',
+                borderRadius: 10,
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: 'count',
+            type: 'bar',
+            label: seriesLabel,
+            data: this.loadData,
+            barWidth: 13,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#1A70F3', // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: '#6BE6C1 ', // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+            // barCategoryGap: '100%',
+            // boundaryGap: ['10%','10%','10%','20%']
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#main {
+  width: calc((100vw / 7 * 2 - 64px) * 5 / 8);
+}
+</style>
diff --git a/src/componets/Performance/paintList.vue b/src/componets/Performance/paintList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f7904c5a2a11b3e0f6875ca6b679b9af1bbdb22
--- /dev/null
+++ b/src/componets/Performance/paintList.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="main">
+    <div class="paint">
+      <div class="common" style="background-color: #6be6c1"></div>
+      <div style="color: #6be6c1">首屏绘制时间（FP）</div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #8ed6fa"></div>
+      <div style="color: #8ed6fa">首次内容绘制时间（FCP）</div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #466aeb"></div>
+      <div style="color: #466aeb; text-align: left">
+        第一个有意义的内容出现时间（FMP）
+      </div>
+    </div>
+    <div class="paint">
+      <div class="common" style="background-color: #eabe37"></div>
+      <div style="color: #eabe37">最大内容块渲染时间（LCP）</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'paintList',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.paint {
+  display: flex;
+  margin-right: 1.3021vw;
+  .common {
+    width: 0.5729vw;
+    height: 0.5729vw;
+    border-radius: 50%;
+    margin-right: 0.5208vw;
+  }
+}
+</style>
diff --git a/src/componets/Performance/performanceBottom.vue b/src/componets/Performance/performanceBottom.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52d0771f88c9c6f633995886172c56d558dcfc45
--- /dev/null
+++ b/src/componets/Performance/performanceBottom.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="footer">
+    <div class="left">
+      <div style="display: flex; margin-bottom: 0.9896vw">
+        <titleComponent na="近7天页面访问速度分布"></titleComponent>
+      </div>
+      <div class="page">
+        <div class="topleft"></div>
+        <div class="topright"></div>
+        <div class="leftbottom"></div>
+        <div class="rightbottom"></div>
+        <ListComponent :loadData="loadData" ref="list"></ListComponent>
+        <div>
+          <fourGraph :loadData="loadData" ref="four"></fourGraph>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div style="display: flex; margin-bottom: 0.9896vw">
+        <titleComponent na="近7天监控组件访问时间"></titleComponent>
+      </div>
+      <div class="component">
+        <div class="topleft"></div>
+        <div class="topright"></div>
+        <div class="leftbottom"></div>
+        <div class="rightbottom"></div>
+        <BarComponent :mountArr="mountArr" ref="mount"></BarComponent>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from '../HomePage/titleComponent.vue'
+import fourGraph from '../HomePage/fourGraph.vue'
+import ListComponent from './listComponent.vue'
+import BarComponent from './barComponent.vue'
+import { getLoadArr, getMountArr } from '@/services/performance'
+
+export default {
+  name: 'performanceBottom',
+  components: {
+    titleComponent,
+    fourGraph,
+    ListComponent,
+    BarComponent,
+  },
+  data() {
+    return {
+      loadArr: [],
+      mountArr: [],
+      best: 0,
+      good: 0,
+      bad: 0,
+      badest: 0,
+      loadData: [],
+    }
+  },
+  mounted() {
+    this.getLoadArr()
+    this.getMountArr()
+  },
+  methods: {
+    async getLoadArr() {
+      const res = await getLoadArr()
+      this.loadArr = res.data.result
+      this.loadArr.forEach((item) => {
+        if (item.loadTime < 1000) {
+          this.best++
+        } else if (item.loadTime < 3000) {
+          console.log(item.loadTime)
+          this.good++
+        } else if (item.loadTime < 5000) {
+          this.bad++
+        } else {
+          this.badest++
+        }
+      })
+      this.loadData.push(this.best)
+      this.loadData.push(this.good)
+      this.loadData.push(this.bad)
+      this.loadData.push(this.badest)
+      this.$refs.list.init()
+      this.$refs.four.getData()
+    },
+    async getMountArr() {
+      const res = await getMountArr()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.mountArr.push(res.data.result[i])
+      }
+
+      this.$refs.mount.getMountArr()
+      console.log(this.$refs.mount.mountArr)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 1.0417vw;
+  display: flex;
+  justify-content: space-between;
+}
+.left,
+.right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.page {
+  position: relative;
+  width: 36.4583vw;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+}
+.component {
+  position: relative;
+  width: 26vw;
+  height: 28vh;
+  border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+}
+
+.topleft {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-left: 2px solid #a485e6;
+  border-top: 2px solid #a485e6;
+}
+.topright {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-right: 2px solid #a485e6;
+  border-top: 2px solid #a485e6;
+}
+.leftbottom {
+  position: absolute;
+  bottom: -2px;
+  left: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-left: 2px solid #a485e6;
+  border-bottom: 2px solid #a485e6;
+}
+.rightbottom {
+  position: absolute;
+  bottom: -1px;
+  right: -2px;
+  width: 0.5208vw;
+  height: 0.5208vw;
+  border-right: 2px solid #a485e6;
+  border-bottom: 2px solid #a485e6;
+}
+</style>
diff --git a/src/componets/Performance/performanceMain.vue b/src/componets/Performance/performanceMain.vue
new file mode 100644
index 0000000000000000000000000000000000000000..084745214bff18fe839c403707a078617dafd8bd
--- /dev/null
+++ b/src/componets/Performance/performanceMain.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="main">
+    <div class="wrapper">
+      <performanceTop :paintArr="paintArr" ref="top"></performanceTop>
+      <performanceMiddle></performanceMiddle>
+      <performanceBottom></performanceBottom>
+    </div>
+    <a href="https://www.npmjs.com/package/revue-monitor" class="md">
+      <img src="../../assets/组 67.png" alt="" class="img" />
+      <p>使用文档</p>
+    </a>
+  </div>
+</template>
+
+<script>
+import performanceTop from './performanceTop.vue'
+import performanceMiddle from './performanceMiddle.vue'
+import performanceBottom from './performanceBottom.vue'
+import { getpaintTime } from '@/services/performance'
+
+export default {
+  name: 'performanceMain',
+  components: {
+    performanceTop,
+    performanceMiddle,
+    performanceBottom,
+  },
+  data() {
+    return {
+      paintArr: [],
+    }
+  },
+
+  mounted() {
+    this.getPaintArr()
+  },
+  methods: {
+    async getPaintArr() {
+      let res = await getpaintTime()
+      for (let i = 0; i < res.data.result.length; i++) {
+        this.paintArr.push(res.data.result[i])
+      }
+      this.$refs.top.getPaintArr()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  flex: 0.842;
+  height: 100vh;
+  background: #000000;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  box-sizing: border-box;
+}
+.wrapper {
+  width: 100%;
+  margin: 6.7vh 7.7vw 6.7vh 7.7vw;
+}
+.md {
+  position: fixed;
+  top: 3.1vh;
+  right: 3.3854vw;
+  width: 8.3333vw;
+  height: 5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 27px 27px 27px 27px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  display: flex;
+  justify-content: space-around;
+  vertical-align: center;
+  .img {
+    margin-top: 1.28vh;
+    margin-left: 1.3021vw;
+    width: 1.0938vw;
+    height: 2.3vh;
+  }
+  p {
+    width: 5vw;
+    height: 2.5vh;
+    font-size: 0.9vw;
+    font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 1vh;
+    margin-right: 0.625vw;
+  }
+}
+</style>
diff --git a/src/componets/Performance/performanceMiddle.vue b/src/componets/Performance/performanceMiddle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f58a99ad5de3b229c0f93700be0d0d0bcc0b9499
--- /dev/null
+++ b/src/componets/Performance/performanceMiddle.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="middle">
+    <div style="display: flex; margin-bottom: 0.9895vw">
+      <titleComponent na="近7天页面渲染时间"></titleComponent>
+    </div>
+    <div class="wrapper">
+      <LineComponent></LineComponent>
+      <div class="topleft"></div>
+      <div class="topright"></div>
+      <div class="leftbottom"></div>
+      <div class="rightbottom"></div>
+      <PaintList></PaintList>
+    </div>
+  </div>
+</template>
+
+<script>
+import titleComponent from '../HomePage/titleComponent.vue'
+import LineComponent from './lineComponent.vue'
+import PaintList from './paintList.vue'
+export default {
+  name: 'performanceMiddle',
+  components: {
+    titleComponent,
+    LineComponent,
+    PaintList,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.middle {
+  margin-top: 1.0417vw;
+  position: relative;
+  .wrapper {
+    position: relative;
+    border: 1px solid rgba($color: #a0a7e6, $alpha: 0.6);
+    display: flex;
+    justify-content: space-between;
+  }
+  .topleft {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-left: 2px solid #a485e6;
+    border-top: 2px solid #a485e6;
+  }
+  .topright {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-right: 2px solid #a485e6;
+    border-top: 2px solid #a485e6;
+  }
+  .leftbottom {
+    position: absolute;
+    bottom: -2px;
+    left: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-left: 2px solid #a485e6;
+    border-bottom: 2px solid #a485e6;
+  }
+  .rightbottom {
+    position: absolute;
+    bottom: -1px;
+    right: -2px;
+    width: 0.5208vw;
+    height: 0.5208vw;
+    border-right: 2px solid #a485e6;
+    border-bottom: 2px solid #a485e6;
+  }
+}
+</style>
diff --git a/src/componets/Performance/performanceTop.vue b/src/componets/Performance/performanceTop.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12ea064a905f45c9d506b0ac3a72f2ad9cac7892
--- /dev/null
+++ b/src/componets/Performance/performanceTop.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="top">
+    <div class="left">
+      <div style="display: flex; margin-bottom: 0.9895vw">
+        <titleComponent na="近7天概况"></titleComponent>
+      </div>
+      <div class="meanTime">
+        <div class="item">
+          <div class="item-item1">FP平均时间</div>
+          <div class="item-item2">{{ parseInt(firstPaint / 7) }}ms</div>
+        </div>
+        <div class="item">
+          <div class="item-item1">FCP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(firstContentfulPaint / 7) }}ms
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-item1">FMP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(firstMeaningfulPaint / 7) }}ms
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-item1">LCP平均时间</div>
+          <div class="item-item2">
+            {{ parseInt(largestContentfulPaint / 7) }}ms
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div style="display: flex; margin-bottom: 0.9895vw">
+        <titleComponent na="近7天白屏页面个数"></titleComponent>
+      </div>
+      <div class="blank">
+        <div class="count">{{ count }}</div>
+        <div class="status">
+          <div class="healthy">健康状况:</div>
+          <div class="what">{{ getWhat(count) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getBlankCount } from '@/services/performance'
+import titleComponent from '../HomePage/titleComponent.vue'
+export default {
+  name: 'performanceTop',
+  components: {
+    titleComponent,
+  },
+  props: ['paintArr'],
+  data() {
+    return {
+      firstPaint: 0,
+      firstContentfulPaint: 0,
+      firstMeaningfulPaint: 0,
+      largestContentfulPaint: 0,
+      count: 0,
+    }
+  },
+  mounted() {
+    this.getCount()
+  },
+  methods: {
+    getWhat(count) {
+      if (count < 5) {
+        return '优秀'
+      } else if (count < 10) {
+        return '良好'
+      } else {
+        return '直接扑街'
+      }
+    },
+    getPaintArr() {
+      this.paintArr.forEach((item) => {
+        this.firstPaint += item.firstPaint
+        this.firstContentfulPaint += item.firstContentfulPaint
+        this.firstMeaningfulPaint += item.firstMeaningfulPaint
+        this.largestContentfulPaint += item.largestContentfulPaint
+      })
+    },
+    async getCount() {
+      const res = await getBlankCount()
+      this.count = res.data.count
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left,
+.right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.meanTime {
+  width: 44.6354vw;
+  height: 10.5vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 0.7;
+  border: 0.0521vw solid #275079;
+  display: flex;
+}
+.blank {
+  width: 19.0104vw;
+  height: 11vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  padding-left: 1.5625vw;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+  .count {
+    margin-top: 6px;
+    width: 3.39vw;
+    height: 3.39vw;
+    border: 8px solid #6be6c1;
+    border-radius: 50%;
+    opacity: 1;
+    font-size: 2.1354vw;
+    line-height: 3.39vw;
+    color: #fff;
+  }
+  .status {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.302vw;
+    margin-right: 3.6458vw;
+    .healthy {
+      width: 4.1146vw;
+      height: 2.037vh;
+      font-size: 0.833vw;
+      font-weight: 400;
+      color: #fff;
+      line-height: 0px;
+    }
+    .what {
+      margin-top: 1.0417vw;
+      width: 2.4479vw;
+      height: 3.0555vw;
+      font-size: 1vw;
+      font-weight: 500;
+      color: #fff;
+      line-height: 0px;
+    }
+  }
+}
+.item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .item-item1 {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    color: #82a1bf;
+    line-height: 0px;
+  }
+  .item-item2 {
+    margin-bottom: 10px;
+    text-align: center;
+    font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
+    font-size: 28px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 0px;
+  }
+}
+</style>
diff --git a/src/componets/leftMenu.vue b/src/componets/leftMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ebae4fb4f14108ba34ab6ba6fa108e4103ede785
--- /dev/null
+++ b/src/componets/leftMenu.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="main">
+    <div class="logo">
+      <img src="../assets/logo/logo.png" alt="Revue" class="img" />
+    </div>
+    <el-menu
+      default-active="2"
+      background-color="#25253f"
+      text-color="#fff"
+      active-text-color="#466AEB"
+      :router="true"
+      style="width: 100%"
+    >
+      <el-menu-item index="/">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/路径 14.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">首页</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/js-error">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 65.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">js错误</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/performance">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 66.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">页面性能</span>
+        </div>
+      </el-menu-item>
+      <el-menu-item index="/req-error">
+        <div class="item">
+          <div class="wrapper">
+            <img src="../assets/组 67.png" alt="" class="item-img" />
+          </div>
+          <span slot="title">接口错误</span>
+        </div>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leftMenu',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  flex: 0.158;
+  height: 100vh;
+  background: #25253f;
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding-top: 1.7708vw;
+  .logo {
+    margin-bottom: 1.1vw;
+  }
+}
+.img {
+  width: 8.0208vw;
+}
+.item {
+  display: flex;
+  flex-flow: row wrap;
+  align-content: center;
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .item-img {
+    width: 0.8781vw;
+    height: 1.9vh;
+    margin-top: -0.4vh;
+    margin-left: 2.5vw;
+    margin-right: 2.4vw;
+  }
+}
+:deep(.el-menu) {
+  border-right: 0px;
+}
+</style>
diff --git a/src/services/performance.js b/src/services/performance.js
new file mode 100644
index 0000000000000000000000000000000000000000..2fb08fe8fdbe0d4f7343df80f1b0dbea143f4ddb
--- /dev/null
+++ b/src/services/performance.js
@@ -0,0 +1,9 @@
+import service from '@/utils/request'
+
+export const getLoadArr = () => service.get('/loadArr')
+
+export const getMountArr = () => service.get('/mountArr')
+
+export const getBlankCount = () => service.get('/blankCount')
+
+export const getpaintTime = () => service.get('/paintTime')
diff --git a/src/views/PerformanceView.vue b/src/views/PerformanceView.vue
index ad36014ffac04cb31076eefa910a5cef9947e5c2..713fa3cb553e1b85636d2df617457379d19d0710 100644
--- a/src/views/PerformanceView.vue
+++ b/src/views/PerformanceView.vue
@@ -1,29 +1,28 @@
 <template>
-  <div>
-    PerformanceView
+  <div class="main">
+    <leftMenu></leftMenu>
+    <performanceMain></performanceMain>
   </div>
 </template>
 
 <script>
+import performanceMain from '@/componets/Performance/performanceMain.vue'
+import leftMenu from '@/componets/leftMenu.vue'
+
 export default {
   name: 'PerformanceView',
-
-  data() {
-    return {
-      
-    };
-  },
-
-  mounted() {
-    
+  components: {
+    performanceMain,
+    leftMenu,
   },
 
-  methods: {
-    
-  },
-};
+  methods: {},
+}
 </script>
 
 <style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+.main {
+  display: flex;
+  font-family: Alibaba;
+}
+</style>