refactor(测试跟踪): 选择用例较多时，依赖关系图滚动条居中

--bug=1025898 --user=陈建星 【测试跟踪】功能用例关联的用例太多时，页面查看依赖关系是空白的 https://www.tapd.cn/55049933/s/1368661

framework/sdk-parent/frontend/src/components/chart/MsChart.vue

@@ -9,6 +9,7 @@
       :group="group"
       @click="onClick"
       @datazoom="datazoom"
+      @finished="$emit('finished')"
       v-on="$listeners"
       :watch-shallow="watchShallow"
       :manual-update="manualUpdate"

framework/sdk-parent/frontend/src/components/graph/RelationshipGraph.vue

@@ -1,5 +1,11 @@
 <template>
-  <ms-chart v-if="visible" :options="options" :height="height" :width="width" ref="msChart"/>
+  <ms-chart
+    v-if="visible"
+    :options="options"
+    :height="height"
+    :width="width"
+    @finished="$emit('finished')"
+    ref="msChart"/>
 </template>
 
 <script>

framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue

@@ -6,8 +6,13 @@
         <drawer-header :title="$t('commons.relationship.graph')" @close="close" @export="exportCharts"/>
       </template>
       <div>
-        <el-scrollbar>
-          <relationship-graph :height="height" :width="width" :data="graphData.data" :links="graphData.links"
+        <el-scrollbar class="graph-scrollbar">
+          <relationship-graph
+            :height="height"
+            :width="width"
+            :data="graphData.data"
+            :links="graphData.links"
+            @finished="handleFinished"
             ref="relationshipGraph"/>
         </el-scrollbar>
       </div>
@@ -73,6 +78,12 @@ export default {
         });
       });
     },
+    handleFinished() {
+      // 滚动条设置居中
+      let graphScrollbar = document.querySelector('.graph-scrollbar .el-scrollbar__wrap');
+      let graphScrollbarView = document.querySelector('.graph-scrollbar .el-scrollbar__wrap .ms-chart');
+      graphScrollbar.scrollLeft = (graphScrollbarView.clientWidth - graphScrollbar.clientWidth)/2
+    },
     close() {
       this.visible = false;
     }