weiyuan-document-web/src/views/statics/line.vue

<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="日访问统计">
      <div slot="content"></div>
      <slot>
        <div>
          <el-date-picker
            v-model="value"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="pick">
          </el-date-picker>

          <el-button size="small" type="primary" style="margin-left: 10px;" @click="getData">查询</el-button>
        </div>
      </slot>
    </lx-header>

    <div style="display: flex;margin-top: 20px">
      <div v-if="data" class="box">
        <div style="border-bottom: 2px solid rgba(200,200,200,0.7);padding-bottom: 20px">
          <i class="el-icon-coin"></i>
          <span style="font-weight: 600;padding: 0 10px">日访问统计</span>
        </div>

        <div id="line-chart"/>
      </div>
    </div>
  </div>
</template>

<script>
import { day } from "@/api/statics";
import echarts from 'echarts';

require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {
      chart: "",
      value: [ this.$moment(new Date()).format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')],
      select: {
        start_date: this.$moment(new Date()).format('YYYY-MM-DD'),
        end_date: this.$moment(new Date()).format('YYYY-MM-DD')
      },
      data: {},

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    init () {
      this.chart = echarts.init(document.getElementById('line-chart'))
      let xAxis = [];
      for (let key in this.data) {
        xAxis.push(this.data[key][0]?.leixing)
      }
      this.chart.setOption(
        {
          xAxis: {
            type: 'category',
            data: xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: (() => {
            let data = []
            for (let key in this.data) {
              data.push({
                data: this.data[key].map(i => i.total),
                type: 'line',
                smooth: true,
              })
            }

            return data;
          })()
        }
      )
    },

    pick (e) {
      if (e && e.length > 0) {
        this.select.start_date = e[0]
        this.select.end_date = e[1]
      } else {
        this.select.start_date = ''
        this.select.end_date = ''
      }
    },

    async getData () {
      const res = await day(this.select)
      this.data = res

      this.init();
    }
  },
  computed: {},

  created() {
    this.getData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>

<style scoped lang="scss">
.box {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-right: 40px;

  #line-chart {

    box-sizing: border-box;
    min-height: 240px;
  }

}
</style>