图表数据切换

仅个人参考

<template>
  <div>
    <el-row style="display: flex;justify-content: space-around;">
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="  background: linear-gradient(140deg, #F7CB6B, #FBA980); ">
        <el-row class="oneText"> <span>{{SummarizationData.totalConsume}}</span></el-row>
        <el-row class="oneTextTwo"> <span>消费总数</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #6BD4F7, #80FBC0);">
        <el-row class="oneText"> <span>{{SummarizationData.totalConsume}}</span></el-row>
        <el-row class="oneTextTwo"> <span>收入总数</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #FFCE9F, #FF849C);">
        <el-row class="oneText"> <span>{{SummarizationData.equipConsume}}</span></el-row>
        <el-row class="oneTextTwo"> <span>设备销售</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #D1C3FC, #9BC4FC);">
        <el-row class="oneText"> <span>{{SummarizationData.storeCousume}}</span></el-row>
        <el-row class="oneTextTwo"> <span>商城消费</span></el-row>
      </el-col>
      <!-- 第二列 -->
    </el-row>
    <el-row style="display: flex;justify-content: space-around;">
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #A4E8D7, #63B5C7);">
        <el-row class="oneText"> <span>{{SummarizationData.nowMoney}}</span></el-row>
        <el-row class="oneTextTwo"> <span>留存金额</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #FBC5BC, #FEA4A4);">
        <el-row class="oneText"> <span>{{SummarizationData.totalUser}}</span></el-row>
        <el-row class="oneTextTwo"> <span>用户总数</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #D1C3FC, #9BC4FC);">
        <el-row class="oneText"> <span>{{SummarizationData.userByMoon}}</span></el-row>
        <el-row class="oneTextTwo"> <span>月活跃用户</span></el-row>
      </el-col>
      <el-col :xl="5" :lg="5" :md="24" :xs="24" class="boxone"
        style="background: linear-gradient(140deg, #F7CB6B, #FBA980);">
        <el-row class="oneText"> <span>{{SummarizationData.userByDay}}</span></el-row>
        <el-row class="oneTextTwo"> <span>日活跃用户</span></el-row>
      </el-col>
    </el-row>
    <!-- 收入统计   消费统计 -->
    <div class="divBox">
      <el-row>
        <!-- 收入统计图 -->
        <el-col :xl="12" :lg="12" :md="24" :xs="24" class="ivu-mb">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <el-avatar icon="el-icon-s-data" size="small"
                    style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">收入统计</span>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="visitDate" class="ivu-mr-8">
                    <el-radio label="last30" @change="getIncomeData(0,'day')">30天</el-radio>
                    <!-- <el-radio label="week" @change="handleChangeWeek">周</el-radio> -->
                    <el-radio label="month" @change="getIncomeData(0,'month')">月</el-radio>
                    <el-radio label="year" @change="getIncomeData(0,'year')">年</el-radio>
                    <el-select v-model="income" placeholder="请选择渠道" @change="cahangeiIncome">
                      <el-option v-for="item in incomeData" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-radio-group>

                </div>
              </div>
            </div>
            <!-- <h4>订单量趋势</h4> -->
            <echarts-from ref="visitChart" :yAxisData="yAxisData" :seriesData="series3" :xAxis="xAxis3" v-if="info"
              :legendData="legendData"></echarts-from>
          </el-card>
        </el-col>
        <!-- 消费统计图 -->
        <el-col :xl="12" :lg="12" :md="24" :xs="24" class="ivu-mb" <el-card :bordered="false"
          class="dashboard-console-visit">
          <div slot="header">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row row-middle">
                <el-avatar icon="el-icon-s-data" size="small"
                  style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                <span class="ivu-pl-8">消费统计</span>
              </div>
              <div class="checkTime">
                <el-radio-group v-model="visitData" class="ivu-mr-8">
                  <el-radio label="last30" @change="getConsumptionDate(0,'day')">30天</el-radio>
                  <!-- <el-radio label="week" @change="handleChangeWeek">周</el-radio> -->
                  <el-radio label="month" @change="getConsumptionDate(0,'month')">月</el-radio>
                  <el-radio label="year" @change="getConsumptionDate(0,'year')">年</el-radio>
                  <el-select v-model="value" placeholder="请选择渠道" @change="cahngeChannel">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-radio-group>
              </div>
            </div>
          </div>
          <!-- <h4>订单量趋势</h4> -->
          <echarts-from ref="visitChart" :yAxisData="yAxisData" :seriesData="series1" :xAxis="xAxis1" v-if="info"
            :legendData="legendData"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 客流量 -->
    <div class="divBox">
      <el-row>
        <el-col :span="24" class="ivu-mb">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <el-avatar icon="el-icon-s-data" size="small"
                    style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">客流量</span>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="visitDateLisy" class="ivu-mr-8">
                    <el-radio label="last30" @change="getTrafficApi(0,'day')">30天</el-radio>
                    <!-- <el-radio label="week" @change="handleChangeWeek">周</el-radio> -->
                    <el-radio label="month" @change="getTrafficApi(0,'month')">月</el-radio>
                    <el-radio label="year" @change="getTrafficApi(0,'year')">年</el-radio>
                    <el-select v-model="qudao" placeholder="请选择渠道" @change="changetrafficApi">
                      <el-option v-for="item in keOptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <!-- <h4>订单量趋势</h4> -->
            <echarts-from ref="visitChart" :yAxisData="yAxisData" :seriesData="series2" :xAxis="xAxis2" v-if="info"
              :legendData="legendData1"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
  import {
    getDataSummarization,
    getConsumption,
    getTraffic,
    getCardTopup,
    getBalanceTopup
  } from '@/api/stats.js'
  import echartsFrom from '@/components/echarts/index';

  export default {
    components: {
      echartsFrom
    },
    data() {
      return {
        infoList: null,
        visitDate: 'last30',
        visitData: 'last30',
        visitDateLisy: 'last30',
        // series: [],
        series: [],
        yAxisData: [],
        info: {},
        legendData: [],
        legendData1: [],
        SummarizationData: [],
        xAxis1: [], //消费统计的
        series1: [], //消费统计的
        consumptionYdata: [], //消费统计y纵坐标
        consumptionXdata: [], //消费统计X横坐标
        xAxis2: [], //客流量
        series2: [], //客流量
        trafficYdata: [],
        trafficXdata: [],
        options: [{
            value: '0',
            label: '全部'
          }, {
            value: '3',
            label: '积分订单'
          }, {
            value: '4',
            label: '设备订单(线下支付)'
          }, {
            value: '5',
            label: '团长订单'
          }, {
            value: '6',
            label: '地推订单'
          },
          {
            value: '7',
            label: '分享裂变订单'
          },
          {
            value: '11',
            label: '大客户订单'
          },
          {
            value: '12',
            label: '企业福利订单'
          },
        ],
        keOptions: [{
            value: '0',
            label: '全部'
          }, {
            value: '3',
            label: '积分订单'
          }, {
            value: '4',
            label: '设备订单(线下支付)'
          }, {
            value: '5',
            label: '团长订单'
          }, {
            value: '6',
            label: '地推订单'
          },
          {
            value: '7',
            label: '分享裂变订单'
          },
          {
            value: '11',
            label: '大客户订单'
          },
          {
            value: '12',
            label: '企业福利订单'
          },
        ],
        value: "0",
        qudao: "0",
        income: "0",
        incomeData: [{
          value: '0',
          label: '袋卡充值统计'
        }, {
          value: "1",
          label: "余额充值统计"
        }],
        xAxis3: [], //袋卡充值
        series3: [], //袋卡充值
        cardXdata: [],
        cardYdata: []
      }
    },
    mounted() {
      this.getDataSummarizationApi()
      this.getConsumptionDate(0, 'day')
      this.getIncomeData(0, 'day')
      this.getTrafficApi(0, 'day')
      // this.getTrafficApi()
      this.yAxisData = [{
          type: 'value',
          // name: '金额',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          // name: '数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
          // axisLabel: {
          //     formatter: '{value} °C'
          // }
        }
      ]
    },
    methods: {
      //收入统计
      getIncomeData(type, date) {
        console.log(type)
        getCardTopup(type).then(res => {
          this.xAxis3 = []
          this.yAxisData3 = []
          if (date == 'month') {
            this.cardXdata = res.moonDate
            this.cardYdata = res.moonData
          } else if (date == 'year') {
            this.cardXdata = res.yearDate
            this.cardYdata = res.yearData
          } else {
            this.cardXdata = res.dayDate
            this.cardYdata = res.dayData
          }
          this.xAxis3 = this.cardXdata
          this.legendData = ['金额']
          this.yAxisData1 = this.cardYdata
          this.series3 = [{
            name: "金额",
            type: "line",
            itemStyle: {
              "normal": {
                "color": {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "colorStops": [{
                      "offset": 0,
                      "color": "#6fdeab"
                    },
                    {
                      "offset": 0.5,
                      "color": "#44d693"
                    },
                    {
                      "offset": 1,
                      "color": "#2cc981"
                    }
                  ]
                }
              }
            },
            yAxisIndex: 1,
            data: this.cardYdata
          }]
        })
      },
      //改变余额充值统计/袋卡充值统计
      cahangeiIncome(e) {
        this.getIncomeData(e)
      },
      //获取数据概括
      getDataSummarizationApi() {
        getDataSummarization().then(res => {
          this.SummarizationData = res
        })
      },
      //获取消费数据统计         年月日
      getConsumptionDate(type, date) {
        console.log(type)
        getConsumption(type).then(res => {
          this.xAxis1 = []
          this.yAxisData1 = []
          if (date == 'month') {
            this.consumptionXdata = res.moonDate
            this.consumptionYdata = res.moonData
          } else if (date == 'year') {
            this.consumptionXdata = res.yearDate
            this.consumptionYdata = res.yearData
          } else {
            this.consumptionXdata = res.dayDate
            this.consumptionYdata = res.dayData
          }
          this.xAxis1 = this.consumptionXdata
          this.legendData = ['金额']
          this.yAxisData1 = this.consumptionYdata
          this.series1 = [{
            name: "金额",
            type: "line",
            itemStyle: {
              "normal": {
                "color": {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "colorStops": [{
                      "offset": 0,
                      "color": "#6fdeab"
                    },
                    {
                      "offset": 0.5,
                      "color": "#44d693"
                    },
                    {
                      "offset": 1,
                      "color": "#2cc981"
                    }
                  ]
                }
              }
            },
            yAxisIndex: 1,
            data: this.consumptionYdata
          }]
        })
      },
      //选择器发生变化 渠道改变
      cahngeChannel(e) {
        this.getConsumptionDate(e)
      },
      //获取客流量数据统计
      getTrafficApi(type, date) {
        getTraffic(type).then(res => {
          console.log(res,555)
          this.xAxis2 = []
          this.yAxisData1 = []
          if (date == 'month') {
            this.trafficXdata = res.moonDate
            this.trafficYdata = res.moonData
          } else if (date == 'year') {
            this.trafficXdata = res.yearDate
            this.trafficYdata = res.yearData
          } else {
            this.trafficXdata = res.dayDate
            this.trafficYdata = res.dayData
          }
          this.xAxis2 = this.trafficXdata
          this.legendData = ['金额']
          this.yAxisData1 = this.trafficYdata
          this.series2 = [{
            name: "人次",
            type: "line",
            itemStyle: {
              "normal": {
                "color": {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "colorStops": [{
                      "offset": 0,
                      "color": "#6fdeab"
                    },
                    {
                      "offset": 0.5,
                      "color": "#44d693"
                    },
                    {
                      "offset": 1,
                      "color": "#2cc981"
                    }
                  ]
                }
              }
            },
            yAxisIndex: 1,
            data: this.trafficYdata
          }]
        })
      },
      //年月日发生改变  客流量
      changetrafficApi(e) {
        this.getTrafficApi(e)
      },
      //客流表渠道改变
      changetraffic(e) {
        this.getTrafficApi(e)
      },
      // 监听页面宽度变化，刷新表格
      //   handleResize() {
      //     if (this.infoList) this.$refs.visitChart.handleResize();
      //   }
    },
    // created() {
    //   this.handleChangeVisitType();
    // }
  }
</script>
<style scoped lang="scss">
  .boxone {
    border: 0px solid #030000;
    border-radius: 21px;
    margin: 23px 19px;
    overflow: hidden;

    .oneText {
      margin: 20px 0 0 0;
      text-align: center;
      font-size: 40px;
      font-weight: 400;
      color: #FEFDFD;
    }

    .oneTextTwo {
      text-align: center;
      font-size: 28px;
      font-weight: 400;
      color: #FEFEFE;
      line-height: 57px;
    }

    .oneTextThree {
      border-top: 1px solid #CCCCCC;
      background: rgba($color: #FFFFFF, $alpha: 0.4);
      color: #FFFFFF;
      text-align: center;

      .oneTextSpan {
        margin: 10px 40px;
        font-size: 21px;
        color: white;
      }
    }
  }

  .acea-row {
    /deep/.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }

  .checkTime {
    /deep/.el-radio__input {
      display: none;
    }
  }

  .ivu-pl-8 {
    margin-left: 8px;
    font-size: 14px;
  }

  .divBox {
    padding: 0 20px !important;
  }

  .dashboard-console-visit {
    /deep/.el-card__header {
      padding: 14px 20px !important;
    }

    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }

  .ivu-mb {
    margin-bottom: 10px;
  }
</style>