用vue ant写一个插件页面，需求是展示一个图表，Y轴是网速Kbit/s，间隔50Kbit/s，X轴是时间间隔10分钟，图表中线有HTTP、sFlow、SSH、NetFlow、ICMP、SNM、TLS、Facebook、Other、1h ago、trend、EMA、SMA、RSl cur vs past (right axis)、95th Perc，并在下方展示总流量、平均流量、最大流量及最大流量的时间

首先，需要安装 Vue 和 Ant Design Vue。可以使用以下命令进行安装：

npm install vue ant-design-vue --save

然后在 main.js 中引入 Ant Design Vue 和对应的样式：

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

接下来，创建一个 Chart 组件，用于展示图表：

<template>
  <div>
    <div class="chart-container">
      <a-chart :options="options" />
    </div>
    <div class="stats-container">
      <div class="stats-item">
        <p class="stats-value">{{ total }}</p>
        <p class="stats-label">Total Traffic</p>
      </div>
      <div class="stats-item">
        <p class="stats-value">{{ average }}</p>
        <p class="stats-label">Average Traffic</p>
      </div>
      <div class="stats-item">
        <p class="stats-value">{{ max }}</p>
        <p class="stats-label">Max Traffic</p>
      </div>
      <div class="stats-item">
        <p class="stats-value">{{ maxTime }}</p>
        <p class="stats-label">Max Traffic Time</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    average: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 0
    },
    maxTime: {
      type: String,
      default: ''
    }
  },
  computed: {
    options () {
      // 生成图表配置
    }
  }
}
</script>

<style>
.chart-container {
  height: 400px;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.stats-item {
  text-align: center;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
}

.stats-label {
  color: #999;
}
</style>

然后在父组件中引入 Chart 组件，并传入需要展示的数据和统计信息：

<template>
  <div>
    <chart :data="chartData" :total="total" :average="average" :max="max" :maxTime="maxTime" />
  </div>
</template>

<script>
import Chart from './Chart.vue'

export default {
  components: {
    Chart
  },
  data () {
    return {
      chartData: [], // 图表数据
      total: 0, // 总流量
      average: 0, // 平均流量
      max: 0, // 最大流量
      maxTime: '' // 最大流量时间
    }
  },
  mounted () {
    // 获取数据，更新 chartData、total、average、max 和 maxTime
  }
}
</script>

最后，生成图表配置的代码如下：

options () {
  const xAxisData = []
  const yAxisData = []
  const seriesData = []

  // 生成 x 轴和 y 轴数据
  for (let i = 0; i < this.data.length; i++) {
    const item = this.data[i]
    xAxisData.push(item.time)
    yAxisData.push(item.speed)
  }

  // 生成系列数据
  seriesData.push({
    name: 'HTTP',
    type: 'line',
    data: [],
    yAxisIndex: 0,
    smooth: true
  })
  // 同理生成其他系列数据

  // 生成图表配置
  return {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData
    },
    yAxis: [
      {
        type: 'value',
        minInterval: 50,
        splitNumber: 10
      },
      {
        type: 'value',
        show: false
      }
    ],
    series: seriesData
  }
}

以上是用 Vue 和 Ant Design Vue 编写展示图表的插件页面的基本流程，具体实现还需要根据具体需求进行调整。