operation-system/src/views/trade/dataBoard.vue

<template>
  <div class="app-container">
    <div class="app-container-data">
      <div class="app-container-title">运营看板</div>
      <div style="display: flex">
        <div class="app-container-data-left">
          <div class="app-container-data-left-top">
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/profile.jpg"
                  alt=""
                />
                <div>销售总额</div>
              </div>
              <div class="number">12313</div>
            </div>
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/profile.jpg"
                  alt=""
                />
                <div>订单总数</div>
              </div>
              <div class="number">55</div>
            </div>
          </div>
          <div class="app-container-data-left-bottom">
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/profile.jpg"
                  alt=""
                />
                <div>浏览量</div>
              </div>
              <div class="number">13415</div>
            </div>
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/profile.jpg"
                  alt=""
                />
                <div>成功退款金额</div>
              </div>
              <div class="number">1565465</div>
            </div>
          </div>
        </div>
        <div class="app-container-data-right">
          <div ref="chartRef" style="width: 600px; height: 400px"></div>
        </div>
      </div>
    </div>
    <div class="app-container-list">
      <div class="app-container-block">
        <div class="app-container-block-title">销售总额</div>
        <div class="app-container-block-price">
          15698<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >元</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
      <div class="app-container-block">
        <div class="app-container-block-title">订单总数</div>
        <div class="app-container-block-price">
          52<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >单</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
      <div class="app-container-block">
        <div class="app-container-block-title">支付转化率</div>
        <div class="app-container-block-price">
          16.56<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >%</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
      <div class="app-container-block">
        <div class="app-container-block-title">客单价</div>
        <div class="app-container-block-price">
          12.33<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >元</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
      <div class="app-container-block">
        <div class="app-container-block-title">成功退款金额</div>
        <div class="app-container-block-price">
          152.5<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >元</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
      <div class="app-container-block">
        <div class="app-container-block-title">浏览量</div>
        <div class="app-container-block-price">
          156988<text style="font-size: 10px; color: #999999; margin-left: 10px"
            >次</text
          >
        </div>
        <div class="app-container-block-proportion">
          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const chartRef = ref(null);

onMounted(() => {
  if (chartRef.value) {
    const myChart = echarts.init(chartRef.value);
    const option = {
      backgroundColor: "#fff",
      title: {
        text: "渐变折线图",
        left: "12%",
        top: "13%",
        textStyle: {
          color: "#999",
          fontSize: 14,
        },
      },
      legend: {
        show: true,
        icon: "circle",
        top: "13%",
        itemWidth: 6,
        itemHeight: 6,
        itemGap: 25,
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: [
        {
          type: "category",
          data: ["A", "B", "C", "D", "E", "F", "G"],
          axisLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#c56790",
            },
            margin: 15,
          },
          boundaryGap: false,
        },
      ],
      yAxis: [
        {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#c56790",
            },
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "S",
          type: "line",
          data: [13, 10, 3, 12, 15, 30, 7],
          symbolSize: 6,
          symbol: "circle",
          smooth: true,
          lineStyle: {
            color: "#fe9a8b",
          },
          itemStyle: {
            normal: {
              color: "#fe9a8b",
              borderColor: "#fe9a8b",
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#fe9a8bb3",
              },
              {
                offset: 1,
                color: "#fe9a8b03",
              },
            ]),
          },
          emphasis: {
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "#fe9a8b",
                  },
                  {
                    offset: 0.4,
                    color: "#fe9a8b",
                  },
                  {
                    offset: 0.5,
                    color: "#fff",
                  },
                  {
                    offset: 0.7,
                    color: "#fff",
                  },
                  {
                    offset: 0.8,
                    color: "#fff",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ],
              },
              borderColor: "#fe9a8b",
              borderWidth: 2,
            },
          },
        },
        {
          name: "M",
          type: "line",
          data: [5, 12, 11, 4, 25, 16, 1],
          symbolSize: 6,
          symbol: "circle",
          smooth: true,
          lineStyle: {
            color: "#9E87FF",
          },
          itemStyle: {
            normal: {
              color: "#9E87FF",
              borderColor: "#9E87FF",
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#9E87FFb3",
              },
              {
                offset: 1,
                color: "#9E87FF03",
              },
            ]),
          },
          emphasis: {
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "#9E87FF",
                  },
                  {
                    offset: 0.4,
                    color: "#9E87FF",
                  },
                  {
                    offset: 0.5,
                    color: "#fff",
                  },
                  {
                    offset: 0.7,
                    color: "#fff",
                  },
                  {
                    offset: 0.8,
                    color: "#fff",
                  },
                  {
                    offset: 1,
                    color: "#fff",
                  },
                ],
              },
              borderColor: "#9E87FF",
              borderWidth: 2,
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  }
});
</script>
<style lang="scss" scoped>
.title {
  width: 200px;
  display: flex;
  align-items: center;
  margin-right: 50px;
  font-size: 20px;
  color: #999999;
}
.title-image {
  margin-right: 10px;
  width: 38px;
  height: 38px;
}
.number {
  margin-right: 100px;
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
  color: #000000;
}
.app-container-list {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.app-container-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
.app-container-data {
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  background-color: #fff;
  .app-container-data-left {
    width: 40%;
    .app-container-data-left-top {
      display: flex;
    }
    .app-container-data-left-bottom {
      margin-top: 50px;
      display: flex;
    }
  }
  .app-container-data-right {
    width: 60%;
  }
}
.app-container-block {
  width: 250px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-left: 26px;
  .app-container-block-title {
    font-size: 18px;
    font-weight: bold;
  }
  .app-container-block-price {
    font-size: 18px;
    color: #42b983;
    font-weight: bold;
    margin: 10px 0;
  }
  .app-container-block-proportion {
    font-size: 12px;
  }
}
</style>