| <!-- |
| - Licensed to the Apache Software Foundation (ASF) under one or more |
| - contributor license agreements. See the NOTICE file distributed with |
| - this work for additional information regarding copyright ownership. |
| - The ASF licenses this file to You under the Apache License, Version 2.0 |
| - (the "License"); you may not use this file except in compliance with |
| - the License. You may obtain a copy of the License at |
| - |
| - http://www.apache.org/licenses/LICENSE-2.0 |
| - |
| - Unless required by applicable law or agreed to in writing, software |
| - distributed under the License is distributed on an "AS IS" BASIS, |
| - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| - See the License for the specific language governing permissions and |
| - limitations under the License. |
| --> |
| |
| <template> |
| <v-container grid-list-xl fluid > |
| <v-layout row wrap> |
| <v-flex lg12> |
| <breadcrumb title="serviceRelation" :items="breads"></breadcrumb> |
| </v-flex> |
| </v-layout> |
| |
| <v-flex lg12> |
| <v-card> |
| <div id="chartContent" style="width:100%;height:500%;"/> |
| </v-card> |
| </v-flex> |
| |
| </v-container> |
| |
| </template> |
| <script> |
| import Breadcrumb from '@/components/public/Breadcrumb' |
| export default { |
| components: { |
| Breadcrumb |
| }, |
| data: () => ({ |
| success: null, |
| breads: [ |
| { |
| text: 'serviceMetrics', |
| href: '' |
| }, |
| { |
| text: 'serviceRelation', |
| href: '' |
| } |
| ], |
| responseData: null |
| }), |
| methods: { |
| initData: function () { |
| // eslint-disable-next-line no-undef |
| this.chartContent = echarts.init(document.getElementById('chartContent')) |
| this.chartContent.showLoading() |
| this.$axios.get('/metrics/relation') |
| .then(response => { |
| if (response && response.status === 200) { |
| this.success = true |
| this.responseData = response.data |
| this.responseData.type = 'force' |
| this.initChart(this.responseData) |
| } |
| }) |
| .catch(error => { |
| this.success = false |
| this.responseData = error.response.data |
| }) |
| }, |
| initChart: function (data) { |
| this.chartContent.hideLoading() |
| |
| const option = { |
| legend: { |
| top: 'bottom', |
| data: data.categories.map(i => i.name) |
| }, |
| series: [{ |
| type: 'graph', |
| layout: 'force', |
| animation: false, |
| label: { |
| normal: { |
| show: true, |
| position: 'right' |
| } |
| }, |
| draggable: true, |
| data: data.nodes.map(function (node, idx) { |
| node.id = idx |
| return node |
| }), |
| categories: this.responseData.categories, |
| force: { |
| edgeLength: 100, |
| repulsion: 10 |
| }, |
| edges: data.links, |
| edgeSymbol: ['', 'arrow'], |
| edgeSymbolSize: 7 |
| }] |
| } |
| this.chartContent.setOption(option) |
| } |
| }, |
| mounted: function () { |
| this.initData() |
| } |
| |
| } |
| </script> |
