feat: 折线图优化点：横坐标联动+列表请求参数+css样式+去掉原来的折线图

src/api/service.js

@@ -82,10 +82,8 @@ export function serviceBar(query,app_alias) {
 }
 //9. 接口解析-接口映射RED相关图表
 export function getChartData(data){
-  let url = `/api/v1/url-mapping/chart?start_time=${data.start_time}&
-  end_time=${data.end_time}&app_alias=${data.app_alias}&type=${data.type}&
-  service_name=${data.service_name}&method=${data.method}&route=${data.route}`
-  return instance.get(url)
+  let url = `/api/v1/url-mapping/chart`
+  return instance.get(url, data)
 }
 
 

src/utils/requestOther.js

@@ -130,7 +130,7 @@ class Request {
   }
   get(url, params) {
     this.url = url
-    return this.request.get(url, params)
+    return this.request.get(url, {params})
   }
 
   post(url, data) {

src/views/service/InterfaceDetail/components/LineCharts.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="line-content">
-        <div id="chart1" class="line-chart"></div>
-        <div id="chart2" class="line-chart"></div>
-        <div id="chart3" class="line-chart"></div>
+        <div id="chart1" class="line-chart" v-loading="loading1"></div>
+        <div id="chart2" class="line-chart" v-loading="loading2"></div>
+        <div id="chart3" class="line-chart" v-loading="loading3"></div>
     </div>
 </template>
 <script>
+import moment from 'moment'
 // import resize from '../../service/mixins/resize'
 import storage from '@/utils/storage'
 import { getChartData } from '@/api/service'
@@ -18,7 +19,10 @@ export default {
             subListQuery:{
                 start_time: 0,
                 end_time: 0
-            }
+            },
+            loading1: false,
+            loading2: false,
+            loading3: false
         }
     },
     watch:{
@@ -81,30 +85,43 @@ export default {
                 // 5: 'HTTP Status 4xx Percent Per Minute(%)',
                 // 6: 'HTTP Status 5xx Percent Per Minute(%)',
             }
+            
             for(let i = 1; i <=3; i++){
+                this[`loading${i}`] = true
                 if(this[`myChartScale${i}`] == null) {
                     this[`myChartScale${i}`] = this.$echarts5.init(document.getElementById(`chart${i}`));
                     this[`myChartScale${i}`].resize();
                 }
                 const res = await this.getChartDataFn(obj[i])
                 if(res.code == 200){
+                    this[`loading${i}`] = false
                     let data = res.data
                     data.text = obj[i]
-                    let option = this.getOption(data)
+                    let option = this.getOption(data, obj[i])
                     this[`myChartScale${i}`].setOption(option);
+                    this[`myChartScale${i}`].getZr().on('click', params => {
+                        let data = storage.get('paramsValue')
+                        let timestamp = moment(data[0].name).unix();
+                        this.$emit('chartClick', timestamp);
+                    })
+                    // 分别设置每个实例的 group id
+                    this[`myChartScale${i}`].group = 'group1';
+                    this.$echarts5.connect('group1');
                 }
             }
         },
-        getOption(data) {
+        getOption(data, type) {
             let option = {
                 title:{
+                    top: 0,
                     text:data.text,
                     textStyle:{
                         fontSize:14
                     }
                 },
                 legend: {
-                    left: 'center',    // 设置水平位置为居中
+                    top: '10%',
+                    left: 0,    // 设置水平位置为居中
                     orient: 'horizontal' // 设置图例水平排布
                 },
                 tooltip: {
@@ -132,6 +149,7 @@ export default {
                 },
                 toolbox: {
                     show: true,
+                    top: '8%',
                     feature: {
                         dataZoom: { //数据区域缩放。目前只支持直角坐标系的缩放
                             show: false, //是否显示该工具。
@@ -154,8 +172,11 @@ export default {
                 },
                 xAxis: {
                     type: 'category',
-                    boundaryGap: false,
-                    data: data.times
+                    data: data.times,
+                    axisLabel: {
+                        interval: data.times.length > 10 ?3: 0, //每间隔显示一个坐标
+                        rotate: 45 // 文字倾斜
+                    }
                 },
                 yAxis: {
                     type: 'value',
@@ -177,9 +198,10 @@ export default {
                 series: []
             };
             for(let key in data.values){
+                let tempType = type == 'HTTP Status Trend(requests per second)' ? 'bar':'line'
                 let obj = {
                     name: key,
-                    type: 'line',
+                    type: tempType,
                     data:data.values[key]
                 }
                 option.series.push(obj)
@@ -197,7 +219,7 @@ export default {
     flex-direction: row;
     flex-flow:row wrap;
     .line-chart{
-        width: 100%;
+        width: 33%;
         height:300px;
         margin-bottom: 20px;
     }

src/views/service/InterfaceDetail/index.vue

@@ -12,8 +12,8 @@
               <span style="font-size:18px;" v-else>{{name}}</span>
             </div>
 
-            <div id="scaleMain" style="width:100%;min-width:500px;height:180px;margin-bottom:24px"></div>
-            <LineCharts class="line-div"/>
+            <!-- <div id="scaleMain" style="width:100%;min-width:500px;height:180px;margin-bottom:24px"></div> -->
+            <LineCharts class="line-div" @chartClick="chartClick"/>
             <el-table
               v-loading="tableLoading"
               :data="rowData"
@@ -64,7 +64,6 @@ import { getUrlMappingRange } from '@/api/mapping'
 import storage from '@/utils/storage'
 
 // import resize from './mixins/resize'
-import moment from 'moment'
 import LineCharts from './components/LineCharts.vue'
 export default {
   data(){
@@ -156,9 +155,6 @@ export default {
   },
   mounted(){
     this.handelgetUrlMappingRange();
-    this.$nextTick(() =>{ 
-        this.drawEchartsScale(this.row);
-    }) 
     // document.addEventListener('click', this.handleChartClick);
   },
   methods:{
@@ -172,114 +168,6 @@ export default {
     //     this.myChartScale.dispatchAction({ type: 'hideTip' });
     //   }
     // },
-    drawEchartsScale(row) {
-      let _this = this;
-      if(row != null){
-      // let myChartScale = this.$echarts5.init(document.getElementById('scaleMain'));
-      _this.myChartScale = this.$echarts5.init(document.getElementById('scaleMain'));
-      //绘制趋势echarts
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          // confine: false,
-          // appendToBody: true,
-          // showContent: () => {},
-          // hideContent: () => {},
-          // show: true,
-          // formatter: function (params) {
-          //   storage.set('paramsValue',params)
-          //   return params
-          // },
-           formatter: function (params) {
-            storage.set('paramsValue',params)
-            let axisValueLabel = params[0].axisValueLabel
-            let str0 = '';
-            params.forEach((item, idx) => {
-              // str1+=`${}`
-              str0 += `${item.marker}${item.seriesName}<span style='margin-left:30px;text-align:right;font-weight:400'>${item.data}</span>`
-              switch (idx) {
-                case 0:
-                  str0;
-                  break;
-                case 1:
-                  str0;
-                  break;
-                default:
-                  str0
-              }
-              str0 += idx === params.length - 1 ? '' : '<br/>'
-            })
-            return axisValueLabel+ '<br>' + str0
-          }
-        },
-        grid: {
-          left: '2%',
-          right: '8%',
-          bottom: 0,
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: row.duration_stats.time,
-          // show:true
-        },
-        yAxis: {
-          type: 'value',
-          scale: true,
-            gridIndex:0,
-            axisLabel: {
-              formatter: '{value}'
-            },
-            axisLine:{
-              show:true
-            },
-            axisTick:{
-              show:true
-            },
-            splitLine: {
-              show: true
-            },
-        },
-        series: [
-          {
-            name: 'P.50',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'none',
-            // symbol: 'emptyCircle',//拐点
-            data:row.duration_stats.p50
-          },
-          {
-            name: 'P.95',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'none',//拐点
-            // symbol: 'emptyCircle',//拐点
-            data:row.duration_stats.p90
-          },
-          {
-            name: 'P.99',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'none',//拐点
-            // symbol: 'emptyCircle',//拐点
-            data:row.duration_stats.p99
-          }
-        ]
-      };
-      _this.myChartScale.setOption(option);
-
-      _this.myChartScale.getZr().on('click', params => {
-        let data = storage.get('paramsValue')
-        let timestamp = moment(data[0].name).unix();
-        
-        _this.childQueryParams.start_time = timestamp
-        _this.childQueryParams.end_time =timestamp
-        _this.handelgetUrlMappingRange();
-      })
-      }
-    },
     Refresh(timeOut){
       this.serviceMapTimer = setInterval(()=>{
       },timeOut)
@@ -314,6 +202,11 @@ export default {
       //   path:'/service/Interface/index'
       // })
     },
+    chartClick(timestamp){
+      this.childQueryParams.start_time = timestamp;
+      this.childQueryParams.end_time = timestamp;
+      this.handelgetUrlMappingRange();
+    }
   },
   beforeDestroy(){
     clearInterval(this.serviceMapTimer);