使组件显示在echarts上 以及el-date-picker时间选择默认值

使组件显示在echarts上 以及el-date-picker时间选择默认值

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="day" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="month" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <div style="height:20px;">
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div style="width:100%; height:300px;">
            <div style="position:relative;z-index:99;">
              <div style="text-align: right; width:100%">
                <el-date-picker size="mini" v-model="time" type="datetimerange" align="right" start-placeholder="开始日期"
                  end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="getDrinkNumber">
                </el-date-picker>
              </div>
              <div style="text-align: right; margin-top:4px; margin-right:5px">
                <template>
                  <el-radio v-model="selType" label="1" @change="getDrinkNumber">品牌</el-radio>
                  <el-radio v-model="selType" label="2" @change="getDrinkNumber">度数</el-radio>
                </template>
              </div>
            </div>
            <div id="brand" style="width:100%; height:300px;margin-top:-50px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="drink" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="pot" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import { limit7, monthSum, drinkNumber } from "@/api/admin/statistic";
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      statistic: [],
      selType: "1",
      time: this.defaultTime(),
      brand: {}
    };
  },
  created() {
  },
  methods: {
    defaultTime() {
      var time_7 = new Date();
      time_7.setDate(time_7.getDate() - 6)
      var time = new Date();
      return [
        new Date(time_7.getFullYear(), time_7.getMonth(), time_7.getDate()),
        new Date(time.getFullYear(), time.getMonth(), time.getDate(), 23, 59, 59)
      ]
    },
    getDrinkNumber() {
      drinkNumber({
        selType: this.selType,
        startTime: this.time[0].toLocaleString().replace(/\//g, "-"),
        endTime: this.time[1].toLocaleString().replace(/\//g, "-"),
      }).then(response => {
        this.brand.xAxis[0].data = response.data.x;
        this.brand.series[0].data = response.data.y;
        echarts.init(document.getElementById('brand')).setOption(this.brand);
      });
    },
  },

  mounted() {
    //example 折线图
    var day;
    var drink;
    var pot;
    var month;
    day = {
      title: {
        text: '活跃/新增'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['活跃', '新增']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '活跃',
          type: 'line',
          stack: 'Total',
          data: []
        },
        {
          name: '新增',
          type: 'line',
          stack: 'Total',
          data: []
        }
      ]
    };
    drink = {
      title: {
        text: '饮酒量'
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        }
      ]
    };
    pot = {
      title: {
        text: '酒壶使用量'
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        }
      ]
    };
    month = {
      title: {
        text: '月活跃'
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        }
      ]
    };
    this.brand = {
      title: {
        text: '月活跃'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '60%',
          data: []
        }
      ]
    };
    this.getDrinkNumber();
    limit7().then(response => {
      day.xAxis.data = response.data.createdTime;
      day.series[0].data = response.data.loginNumber;
      day.series[1].data = response.data.newUser;
      drink.xAxis.data = response.data.createdTime;
      drink.series[0].data = response.data.drinkSum;
      pot.xAxis.data = response.data.createdTime;
      pot.series[0].data = response.data.potSum;
      echarts.init(document.getElementById('day')).setOption(day);
      echarts.init(document.getElementById('drink')).setOption(drink);
      echarts.init(document.getElementById('pot')).setOption(pot);
    });
    monthSum().then(response => {
      month.xAxis.data = response.data.createdTime;
      month.series[0].data = response.data.loginNumber;
      echarts.init(document.getElementById('month')).setOption(month);
    });
  }
};
</script>

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "x": [
            "茅台",
            "五粮液",
            "国窖1573",
            "洋河",
            "剑南春",
            "张裕"
        ],
        "y": [
            "68",
            "20",
            "17",
            "18",
            "10",
            "17"
        ]
    }
}

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "loginNumber": [
            "1",
            "2",
            "8",
            "9",
            "10",
            "11",
            "12"
        ],
        "potSum": [
            "1",
            "2",
            "8",
            "9",
            "1",
            "11",
            "12"
        ],
        "newUser": [
            "1",
            "2",
            "8",
            "9",
            "10",
            "11",
            "12"
        ],
        "createdTime": [
            "11-06",
            "11-07",
            "11-08",
            "11-09",
            "11-10",
            "11-11",
            "12-12"
        ],
        "drinkSum": [
            "1",
            "2",
            "8",
            "9",
            "10",
            "11",
            "12"
        ]
    }
}

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "loginNumber": [
            "0",
            "0",
            "0",
            "0",
            "53",
            "0"
        ],
        "createdTime": [
            "2022-07",
            "2022-08",
            "2022-09",
            "2022-10",
            "2022-11",
            "2022-12"
        ]
    }
}