图类型 demo

frontend/src/performance/components/project/MsChart.vue

+<template>
+  <chart :options="bar"></chart>
+</template>
+
+<script>
+  import echarts from 'echarts'
+
+  export default {
+    name: "MsChart",
+    data() {
+      return {
+        bar: {
+
+          backgroundColor: '#394056',
+          title: {
+            top: 20,
+            text: 'Requests',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 16,
+              color: '#F1F1F3'
+            },
+            left: '1%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            }
+          },
+          legend: {
+            top: 20,
+            icon: 'rect',
+            itemWidth: 14,
+            itemHeight: 5,
+            itemGap: 13,
+            data: ['CMCC', 'CTCC', 'CUCC'],
+            right: '4%',
+            textStyle: {
+              fontSize: 12,
+              color: '#F1F1F3'
+            }
+          },
+          grid: {
+            top: 100,
+            left: '2%',
+            right: '2%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+          }],
+          yAxis: [{
+            type: 'value',
+            name: '(%)',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 14
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            }
+          }],
+          series: [{
+            name: 'CMCC',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(137, 189, 27, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(137, 189, 27, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(137,189,27)',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+
+              }
+            },
+            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+          }, {
+            name: 'CTCC',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0, 136, 212, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(0, 136, 212, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(0,136,212)',
+                borderColor: 'rgba(0,136,212,0.2)',
+                borderWidth: 12
+
+              }
+            },
+            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+          }, {
+            name: 'CUCC',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(219, 50, 51, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(219, 50, 51, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(219,50,51)',
+                borderColor: 'rgba(219,50,51,0.2)',
+                borderWidth: 12
+              }
+            },
+            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+          }]
+        },
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/performance/components/router/router.js

@@ -13,6 +13,7 @@ import MsProject from "../project/MsProject";
 import OrganizationWorkspace from "../settings/organization/OrganizationWorkspace";
 import PersonSetting from "../settings/personal/PersonSetting";
 import SystemWorkspace from "../settings/system/SystemWorkspace";
+import MsChart from "../project/MsChart";
 
 Vue.use(VueRouter);
 
@@ -99,6 +100,13 @@ const router = new VueRouter({
       components: {
         content: MsProject
       }
+    },
+    {
+      path: "/chart",
+      name: 'chart',
+      components: {
+        content: MsChart
+      }
     }
   ]
 });

frontend/src/performance/components/testPlan/components/PressureConfig.vue

@@ -83,6 +83,8 @@
 </template>
 
 <script>
+  import echarts from "echarts";
+
   const TARGET_LEVEL = "TargetLevel";
   const RAMP_UP = "RampUp";
   const STEPS = "Steps";
@@ -170,11 +172,47 @@
           yAxis: {
             type: 'value'
           },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            }
+          },
           series: [{
             data: [],
             type: 'line',
             step: 'start',
             smooth: false,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                width: 1
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(137, 189, 27, 0.3)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(137, 189, 27, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgb(137,189,27)',
+                borderColor: 'rgba(137,189,2,0.27)',
+                borderWidth: 12
+              }
+            },
           }]
         };
         let timePeriod = Math.ceil(this.rampUpTime / this.step);