1

<template>
  <div class="app-container realtime-data">
    <el-row>
      <div class="el-card box-card is-always-shadow">
        <div class="el-card__header">
          <div class="clearfix">
            <el-radio-group v-model="radioname">
              <el-radio-button label="注册" />
              <el-radio-button label="活跃" />
              <el-radio-button label="最高同时在线" />
            </el-radio-group>
            <p class="data-details">今天：<strong>6</strong>   平均值：<strong>0</strong>   近7天值：<strong>0</strong>   近30天值：<strong>0</strong></p>
          </div>
        </div>
        <div class="el-card__body">
          <div id="myChart" :style="{width: '100%', height: '380px'}" />
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ProrealTime',
  data() {
    return {
      radioname: '注册',
      myChart: '',
      option: '',
      data1: [],
      data2: []
    }
  },
  created() {
    function genData(len, offset) {
      // const lngRange = [-10.781327, 131.48]
      // const latRange = [18.252847, 52.33]

      var arr = new Float32Array(len * 2)
      var off = 0

      for (var i = 0; i < len; i++) {
        var x = +Math.random() * 10
        var y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10
        arr[off++] = x
        arr[off++] = y
      }
      return arr
    }
    this.data1 = genData(5e5)
    this.data2 = genData(5e5, 10)
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      this.myChart = echarts.init(document.getElementById('myChart'))
      this.option = {
        title: {
          text: echarts.format.addCommas(this.data1.length / 2 + this.data2.length / 2) + ' Points'
        },
        tooltip: {},
        toolbox: {
          left: 'center',
          feature: {
            dataZoom: {}
          }
        },
        legend: {
          orient: 'vertical',
          right: 10
        },
        xAxis: [{
        }],
        yAxis: [{
        }],
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider'
        }],
        animation: false,
        series: [{
          name: 'A',
          type: 'scatter',
          data: this.data1,
          dimensions: ['x', 'y'],
          symbolSize: 3,
          itemStyle: {
            opacity: 0.4
          },
          large: true
        }, {
          name: 'B',
          type: 'scatter',
          data: this.data2,
          dimensions: ['x', 'y'],
          symbolSize: 3,
          itemStyle: {
            opacity: 0.4
          },
          large: true
        }]
      }
      // 防止越界，重绘canvas
      window.onresize = this.myChart.resize
      this.myChart.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
.realtime-data {
  .data-details {
    font-size: 13px;
    padding-top: 15px;
    padding-bottom: 0px;
    strong {
      color: #00abf7;
    }
  }
}
</style>