echarts 动态数据

<template>
  <div>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-form :form="form" layout="inline">
        <standard-form-row grid last>
          <a-row :gutter="24">
            <a-col :lg="6" :md="10" :sm="10" :xs="24">
              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="服务器标识">
                <a-select
                  style="max-width: 200px; width: 100%;"
                  v-model="defaultName"
                  :default-value="defaultId"
                  @change="handleChange"
                >
                  <a-select-option v-for="item of serverNameList" :key="item.serverId" :value="item.serverId">{{ item.serverName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="10" :sm="10" :xs="24">
              <a-form-item :wrapper-col="{ sm: { span: 16 }, xs: { span: 24 } }" label="日期">
                <a-date-picker @change="onChangePicker" :defaultValue="moment(getCurrentData(), 'YYYY-MM-DD')" />
              </a-form-item>
            </a-col>
          </a-row>
        </standard-form-row>
      </a-form>
    </a-card>
    <a-row>
      <a-col :lg="23" :md="23" :sm="23" :xs="23">
        <div class="ant-pro-pages-list-projects-cardList">
          <div id="line" style="width: 100%;height:500px;"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import { TagSelect, StandardFormRow } from '@/components'
import { postOnlinepeak, getServiers } from '@/services/http-service'
const echarts = require('echarts')

const TagSelectOption = TagSelect.Option
// 设置日期默认值
function dateFormat (fmt, date) {
  let ret
  const opt = {
    'Y+': date.getFullYear().toString(), // 年
    'm+': (date.getMonth() + 1).toString(), // 月
    'd+': date.getDate().toString() // 日
  }
  for (const k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt)
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
    }
  }
  return fmt
}

export default {
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow
  },
  data () {
    return {
      currentData: '', // 获取当前时间
      serverNameList: [], // 获取所有大区
      defaultName: '', // 默认大区
      defaultId: 1,
      onlinePeakData: [], // 峰值数据
      form: this.$form.createForm(this),
      loading: true,
      data: [],
      datas: [],
      myChart: {},
      queryParam: '',
      queryParam1: null
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    }
  },
  created () {
    // 获取大区
    getServiers().then((res) => {
      this.serverNameList = res.data.data.list
      this.defaultName = this.serverNameList[0].serverName
      this.defaultId = this.serverNameList[0].serverId
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      this.onlinepeak()
      this.timer = setInterval(() => {
        this.onlinepeak()
      }, 3000)
    })
  },
  methods: {
    moment,
    // 默认为当前时间
    getCurrentData () {
      const date = new Date()
      this.currentData = dateFormat('YYYY-mm-dd', date)
      return new Date().toLocaleDateString()
    },
    // 监听日期点击
    onChangePicker (date, dateString) {
      // console.log(date, dateString)
      this.queryParam = dateString
      this.$nextTick(() => {
      this.onlinepeak()
      this.timer = setInterval(() => {
        this.onlinepeak()
      }, 3000)
    })
    },
    // 监听大区
    handleChange (value) {
      // console.log(`selected ${value}`)
      this.queryParam1 = value
      this.$nextTick(() => {
      this.onlinepeak()
      this.timer = setInterval(() => {
        this.onlinepeak()
      }, 3000)
    })
    },
    // 获取数据
    onlinepeak () {
        const accordingDate = this.queryParam === '' ? this.currentData : this.queryParam
        const serverId = this.queryParam1 === null ? 1 : this.queryParam1
        const requestParameters = { 'serverId': serverId, 'accordingDate': accordingDate }
        // console.log(requestParameters)
        postOnlinepeak(requestParameters).then((res) => {
          if (res.data.data.list.length > 288) {
            this.onlinePeakData = res.data.data.list.slice(-288)
          } else {
            this.onlinePeakData = res.data.data.list
          }
          this.data = []
          this.datas = []
          this.onlinePeakData.forEach((item) => {
            this.data.push(item.timeGetData)
            this.datas.push(item.onlineQuantity)
          })
          // console.log(this.data.length)
          if (this.data.length > 288) {
          this.data.splice(0, 288)
          this.datas.splice(0, 288)
        }
        // console.log(this.onlinePeakData)
        var option = this.myChart.getOption()
        option.xAxis[0].data = this.data
        option.series[0].data = this.datas
        // console.log(option.series[0].data)
        this.myChart.setOption(option)
      })
    },
    // 折线图
    drawChart () {
      this.myChart = echarts.init(document.getElementById('line'))
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: '在线峰值折现图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['在线人数']
        },
        grid: {
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: [
          {
            name: '在线人数',
            type: 'value',
            min: function (value) { return value.min }, // 设置Y轴最小值为当前数据最低值
            max: function (value) { return value.max } // 设置Y轴最大值为当前数据最高值
          }
        ],
        series: [
          {
            name: '在线人数',
            type: 'line',
            lineStyle: {
              width: 1
            },
            data: []
          }
        ]
      })
    }
  },
  beforeDestroy () {
    // 销毁定时器
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;
  height: 100%;
  width: 100%;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>
posted @ 2021-04-23 10:49  zjxgdq  阅读(321)  评论(0)  编辑  收藏  举报