test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 默认使用svg渲染echart

This commit is contained in:
Captain.B 2020-08-26 16:23:31 +08:00
parent e483748b97
commit b653848594
8 changed files with 452 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/business/components/api/report/components/MetricChart.vue
View File

@ -5,22 +5,22 @@
<el-row type="flex" justify="center" align="middle">
<el-row>
<div class="metric-time">
<div class="value" style="margin-right: 50px">{{time}}</div>
<div class="value" style="margin-right: 50px">{{ time }}</div>
</div>
</el-row>
<chart id="chart" ref="chart" :options="options" :autoresize="true"></chart>
<ms-chart id="chart" ref="chart" :options="options" :autoresize="true"></ms-chart>
<el-row type="flex" justify="center" align="middle">
<i class="circle success"/>
<div class="metric-box">
<div class="value">{{content.success}}</div>
<div class="name">{{$t('api_report.success')}}</div>
<div class="value">{{ content.success }}</div>
<div class="name">{{ $t('api_report.success') }}</div>
</div>
<div style="width: 40px"></div>
<i class="circle fail"/>
<div class="metric-box">
<div class="value">{{content.error}}</div>
<div class="name">{{$t('api_report.fail')}}</div>
<div class="value">{{ content.error }}</div>
<div class="name">{{ $t('api_report.fail') }}</div>
</div>
</el-row>
</el-row>
@ -30,18 +30,18 @@
<el-row type="flex" justify="space-around" align="middle">
<div class="metric-icon-box">
<i class="el-icon-warning-outline fail"></i>
<div class="value">{{fail}}</div>
<div class="name">{{$t('api_report.fail')}}</div>
<div class="value">{{ fail }}</div>
<div class="name">{{ $t('api_report.fail') }}</div>
</div>
<div class="metric-icon-box">
<i class="el-icon-document-checked assertions"></i>
<div class="value">{{assertions}}</div>
<div class="name">{{$t('api_report.assertions_pass')}}</div>
<div class="value">{{ assertions }}</div>
<div class="name">{{ $t('api_report.assertions_pass') }}</div>
</div>
<div class="metric-icon-box">
<i class="el-icon-document-copy total"></i>
<div class="value">{{this.content.total}}</div>
<div class="name">{{$t('api_report.request')}}</div>
<div class="value">{{ this.content.total }}</div>
<div class="name">{{ $t('api_report.request') }}</div>
</div>
</el-row>
</div>
@ -50,19 +50,21 @@
</template>
<script>
export default {
name: "MsMetricChart",
import MsChart from "@/business/components/common/chart/MsChart";
export default {
name: "MsMetricChart",
components: {MsChart},
props: {
content: Object,
totalTime: Number
},
data() {
return {
hour:0,
hour: 0,
minutes: 0,
seconds: 0,
time: 0
time: 0,
}
},
created() {
@ -155,27 +157,27 @@
return this.content.passAssertions + " / " + this.content.totalAssertions;
}
},
}
}
</script>
<style scoped>
.metric-container {
.metric-container {
padding: 20px;
}
}
.metric-container #chart {
.metric-container #chart {
width: 140px;
height: 140px;
margin-right: 40px;
}
}
.metric-container .split {
.metric-container .split {
margin: 20px;
height: 100px;
border-left: 1px solid #D8DBE1;
}
}
.metric-container .circle {
.metric-container .circle {
width: 12px;
height: 12px;
border-radius: 50%;
@ -183,70 +185,70 @@
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
}
.metric-container .circle.success {
.metric-container .circle.success {
background-color: #67C23A;
}
}
.metric-container .circle.fail {
.metric-container .circle.fail {
background-color: #F56C6C;
}
}
.metric-box {
.metric-box {
display: inline-block;
text-align: center;
}
}
.metric-box .value {
.metric-box .value {
font-size: 32px;
font-weight: 600;
letter-spacing: -.5px;
}
}
.metric-time .value {
.metric-time .value {
font-size: 25px;
font-weight: 400;
letter-spacing: -.5px;
}
}
.metric-box .name {
.metric-box .name {
font-size: 16px;
letter-spacing: -.2px;
color: #404040;
}
}
.metric-icon-box {
.metric-icon-box {
text-align: center;
margin: 0 10px;
}
}
.metric-icon-box .value {
.metric-icon-box .value {
font-size: 20px;
font-weight: 600;
letter-spacing: -.4px;
line-height: 28px;
vertical-align: middle;
}
}
.metric-icon-box .name {
.metric-icon-box .name {
font-size: 13px;
letter-spacing: 1px;
color: #BFBFBF;
line-height: 18px;
}
}
.metric-icon-box .fail {
.metric-icon-box .fail {
color: #F56C6C;
font-size: 40px;
}
}
.metric-icon-box .assertions {
.metric-icon-box .assertions {
font-size: 40px;
}
}
.metric-icon-box .total {
.metric-icon-box .total {
font-size: 40px;
}
}
</style>

41
frontend/src/business/components/common/chart/MsChart.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<chart
:init-options="defaultInitOptions"
:options="options"
:theme="theme"
:group="group"
:watch-shallow="watchShallow"
:manual-update="manualUpdate"
:autoresize="autoresize"/>
</template>
<script>
export default {
name: "MsChart",
props: {
options: Object,
theme: [String, Object],
initOptions: Object,
group: String,
autoresize: Boolean,
watchShallow: Boolean,
manualUpdate: Boolean
},
data() {
return {
defaultInitOptions: this.initOptions
}
},
mounted() {
this.defaultInitOptions = this.defaultInitOptions || {};
// 默认渲染svg
if (!this.defaultInitOptions.renderer) {
this.defaultInitOptions.renderer = 'svg';
}
}
}
</script>
<style scoped>
</style>

10
frontend/src/business/components/common/components/MsPieChart.vue
View File

@ -1,17 +1,19 @@
<template>
<div>
<chart :options="options">
</chart>
<ms-chart :options="options">
</ms-chart>
</div>
</template>
<script>
export default {
import MsChart from "@/business/components/common/chart/MsChart";
export default {
name: "MsPieChart",
components: {},
components: {MsChart},
mounted() {
this.getDataNamesByData();
},

10
frontend/src/business/components/performance/report/components/PerformanceChart.vue
View File

@ -1,12 +1,14 @@
<template>
<chart :options="bar"></chart>
<ms-chart :options="bar"></ms-chart>
</template>
<script>
import echarts from 'echarts'
import echarts from 'echarts'
import MsChart from "@/business/components/common/chart/MsChart";
export default {
export default {
name: "PerformanceChart",
components: {MsChart},
data() {
return {
bar: {
@ -188,7 +190,7 @@
},
}
}
}
}
</script>
<style scoped>

4
frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue
View File

@ -84,7 +84,7 @@
</el-col>
<el-col :span="14">
<div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
<chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></chart>
<ms-chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></ms-chart>
</el-col>
</el-row>
</div>
@ -92,6 +92,7 @@
<script>
import echarts from "echarts";
import MsChart from "@/business/components/common/chart/MsChart";
const TARGET_LEVEL = "TargetLevel";
const RAMP_UP = "RampUp";
@ -102,6 +103,7 @@ const RPS_LIMIT_ENABLE = "rpsLimitEnable";
export default {
name: "MsPerformancePressureConfig",
components: {MsChart},
props: ['report'],
data() {
return {

9
frontend/src/business/components/performance/report/components/TestOverview.vue
View File

@ -59,18 +59,21 @@
<el-row>
<el-col :span="12">
<chart ref="chart1" :options="loadOption" class="chart-config" :autoresize="true"></chart>
<ms-chart ref="chart1" :options="loadOption" class="chart-config" :autoresize="true"></ms-chart>
</el-col>
<el-col :span="12">
<chart ref="chart2" :options="resOption" class="chart-config" :autoresize="true"></chart>
<ms-chart ref="chart2" :options="resOption" class="chart-config" :autoresize="true"></ms-chart>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
import MsChart from "@/business/components/common/chart/MsChart";
export default {
name: "TestOverview",
components: {MsChart},
data() {
return {
maxUsers: "0",

4
frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue
View File

@ -99,7 +99,7 @@
</el-col>
<el-col :span="14">
<div class="title">{{ $t('load_test.pressure_prediction_chart') }}</div>
<chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></chart>
<ms-chart class="chart-container" ref="chart1" :options="orgOptions" :autoresize="true"></ms-chart>
</el-col>
</el-row>
</div>
@ -107,6 +107,7 @@
<script>
import echarts from "echarts";
import MsChart from "@/business/components/common/chart/MsChart";
const TARGET_LEVEL = "TargetLevel";
const RAMP_UP = "RampUp";
@ -117,6 +118,7 @@ const RPS_LIMIT_ENABLE = "rpsLimitEnable";
export default {
name: "PerformancePressureConfig",
components: {MsChart},
props: {
testPlan: {
type: Object

1
frontend/src/common/js/chart.js
View File

@ -2,6 +2,7 @@ import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'zrender/lib/svg/svg'
export default {
install(Vue) {