CN-408 feat : 初步效果

src/views/charts/charts/ChartEchart.vue

@@ -29,6 +29,7 @@ export default {
   },
   methods: {
     initEcharts (id) {
+      console.log('chartechart里的',id);
       this.initDom(id)
       const chartParams = this.chartInfo.params
       if (chartParams.showLegend === false) {
@@ -112,6 +113,7 @@ export default {
           })
         }
       } else {
+        console.log('chartOption',this.chartOption);
         const seriesTemplate = this.chartOption.series[0]
         this.chartOption.series = this.chartData.map(r => {
           const serie = {

src/views/charts/charts/StatisticsLegend.vue

@@ -5,6 +5,8 @@
       <div class="table__below-title">Name</div>
       <div class="table__below-statistics">Avg</div>
       <div class="table__below-statistics">Max</div>
+      <div class="table__below-statistics">P50</div>
+      <div class="table__below-statistics">P90</div>
     </div>
     <div class="chart__table-below">
       <div v-for="(item, index) in data" :key="index" class="table-below-box" :class="{'table-below-box--inactivated': !item.active}" @click="toggleLegend(index)">
@@ -12,6 +14,8 @@
         <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
         <div class="table__below-statistics" :title="item.aggregation.avg">{{valueToRangeValue(item.aggregation.avg, chartInfo.params.unitType).join(' ')}}</div>
         <div class="table__below-statistics" :title="item.aggregation.max">{{valueToRangeValue(item.aggregation.max, chartInfo.params.unitType).join(' ')}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.p50">{{valueToRangeValue(item.aggregation.p50, chartInfo.params.unitType).join(' ')}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.p90">{{valueToRangeValue(item.aggregation.p90, chartInfo.params.unitType).join(' ')}}</div>
       </div>
     </div>
   </div>

src/views/charts/charts/chart-echart-mixin.js

@@ -46,6 +46,7 @@ export default {
         !this.myChart && (this.myChart = echarts.init(dom))
       }
       this.chartOption = this.$_.cloneDeep(getOption(this.chartInfo.type))
+      console.log('chartOption mixin里的',id,this.chartOption);
     },
     // 出来y轴相关配置
     handleYaxis () {

src/views/charts/charts/options/line.js

@@ -62,7 +62,20 @@ export const line = {
       type: 'line',
       smooth: false,
       symbol: 'none',
-      data: []
+      data: [],
+      markLine: {
+        label :{
+          position: 'middle'
+        },
+        data: [
+          {
+            name: 'P50',
+            yAxis: 50 ,
+            position:'middle',
+
+          },
+          { yAxis: 90, name: 'P90' }]
+      }
     }
   ]
 }

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -71,6 +71,8 @@ export default {
             if (t.legend === 'bytesRate') {
               this.entityData.max = t.aggregation.max
               this.entityData.avg = t.aggregation.avg
+              this.entityData.p50 = t.aggregation.p50
+              this.entityData.p90 = t.aggregation.p90
             } else if (t.legend === 'bytesSentRate') {
               this.entityData.bytesSentRate = _.nth(t.values,-3)[1]
               this.chartOptionSent = {