refactor: 默认使用svg渲染echart

frontend/src/business/components/api/report/components/MetricChart.vue

@@ -9,7 +9,7 @@
             </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">
@@ -50,9 +50,11 @@
 </template>
 
 <script>
+import MsChart from "@/business/components/common/chart/MsChart";
+
 export default {
   name: "MsMetricChart",
-
+  components: {MsChart},
   props: {
     content: Object,
     totalTime: Number
@@ -62,7 +64,7 @@
       hour: 0,
       minutes: 0,
       seconds: 0,
-        time: 0
+      time: 0,
     }
   },
   created() {

frontend/src/business/components/common/chart/MsChart.vue

@@ -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>

frontend/src/business/components/common/components/MsPieChart.vue

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

frontend/src/business/components/performance/report/components/PerformanceChart.vue

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

frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue

@@ -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 {

frontend/src/business/components/performance/report/components/TestOverview.vue

@@ -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>
+import MsChart from "@/business/components/common/chart/MsChart";
+
 export default {
   name: "TestOverview",
+  components: {MsChart},
   data() {
     return {
       maxUsers: "0",

frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue

@@ -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

frontend/src/common/js/chart.js

@@ -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) {