merchant-web/src/views/modules/datacenter/customer-analysis/index.vue

<template>
  <div>
    <div>
      <el-select
        style="margin-right: 20px"
        v-model="value1"
        placeholder="请选择统计类型"
      >
        <el-option
          v-for="item in [
            { value: '1', label: '1' },
            { value: '2', label: '2' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-right: 20px"
        v-model="value"
        placeholder="请选择"
      >
        <el-option
          v-for="item in [
            { value: '1', label: '日' },
            { value: '2', label: '周' },
            { value: '3', label: '月' },
            { value: '4', label: '年' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button type="success">导出</el-button>
    </div>
    <div class="stat-list">
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-camera-solid"></i>
        <div class="stat-right">
          <div class="stat-title">展现量 （次）</div>
          <div class="stat-value">
            <span style="font-size: 20px">562</span>
            <span style="font-size: 16px; margin: 0 5px; color: green">↓</span>
            <span
              style="font-size: 16px; margin: 0 5px; color: red"
              v-if="false"
              >↑</span
            >
            <span style="font-size: 16px">56%</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">浏览人数 （人）</div>
          <div class="stat-value">
            <span style="font-size: 20px">62</span>
            <span
              style="font-size: 16px; margin: 0 5px; color: green"
              v-if="false"
              >↓</span
            >
            <span style="font-size: 16px; margin: 0 5px; color: red">↑</span>
            <span style="font-size: 16px">56%</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">新客数量 （人）</div>
          <div class="stat-value">
            <span style="font-size: 20px">62</span>
            <span
              style="font-size: 16px; margin: 0 5px; color: green"
              v-if="false"
              >↓</span
            >
            <span style="font-size: 16px; margin: 0 5px; color: red">↑</span>
            <span style="font-size: 16px">56%</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">支付订单人数 （人）</div>
          <div style="font-size: 20px" class="stat-value">199</div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-s-order"></i>
        <div class="stat-right">
          <div class="stat-title">支付订单转化率 （%）</div>
          <div style="font-size: 20px" class="stat-value">1256</div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-s-order"></i>
        <div class="stat-right">
          <div class="stat-title">客户复购率 （%）</div>
          <div style="font-size: 20px" class="stat-value">1256</div>
        </div>
      </div>
    </div>
    <el-row class="echarts-line">
      <div
        id="echarts-LineChart"
        style="
          width: 100%;
          height: calc(100vh - 500px);
          margin-top: 20px;
          border: 1px solid #ccc;
        "
      />
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      value1: "",
      value: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // 折线图
        const myChat = echarts.init(
          document.getElementById("echarts-LineChart")
        );
        myChat.setOption(this.LineChart());
        window.addEventListener("resize", () => {
          myChat.resize();
        });
      });
    },
    LineChart() {
      return {
        title: {
          text: "交易趋势分析",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单金额", "订单数", "订单商品数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单金额",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "订单数",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "订单商品数",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.stat-list {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
.stat-item {
  width: 25%;
  margin: 30px 30px;
  display: flex;
  align-items: center;
}
.stat-icon {
  background: rgb(99 152 252);
  width: 60px;
  height: 60px;
  border-radius: 3px;
}
.stat-right {
  margin-left: 12px;
  font-size: 18px;
}
.stat-title {
  color: #969696;
  margin-bottom: 10px;
}
</style>