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/money.png"
                  alt=""
                />
                <div>销售总额(元)</div>
              </div>
              <div class="number">4,541.00</div>
            </div>
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/order.png"
                  alt=""
                />
                <div>订单总数(单)</div>
              </div>
              <div class="number">45</div>
            </div>
          </div>
          <div class="app-container-data-left-bottom">
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/views.png"
                  alt=""
                />
                <div>浏览量(次)</div>
              </div>
              <div class="number">61,151</div>
            </div>
            <div>
              <div class="title">
                <img
                  class="title-image"
                  src="../../assets/images/money1.png"
                  alt=""
                />
                <div>成功退款金额(元)</div>
              </div>
              <div class="number">541.00</div>
            </div>
          </div>
        </div>
        <div class="app-container-data-right">
          <div ref="chartRef" style="width: 100%; height: 200px"></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";
// 图表 DOM 引用
const chartRef = ref(null);
// ECharts 实例
let chartInstance = null;
// 颜色列表
const colorList = ['#3685FE', '#FFD500', '#25BF82'];
// x轴数据
const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];

// 图表配置
const option = {
  backgroundColor: '#fff',
  title: {
    text: '',
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
    },
    left: 'center',
    top: '5%',
  },
  legend: {
    icon: 'circle',
    top: '0',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
        backgroundColor: '#fff',
        color: '#556677',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0,
      },
      lineStyle: {
        width: 0,
      },
    },
    backgroundColor: '#fff',
    textStyle: {
      color: '#5c6c7c',
    },
    padding: [10, 10],
    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
    formatter: function (params) {
      let result = params[0].name + '<br>'; // x轴值（如"1月"）
      params.forEach((param) => {
        // 获取系列颜色（param.color）
        const colorDot = `<span style="
          display:inline-block;
          margin-right:5px;
          border-radius:50%;
          width:10px;
          height:10px;
          background-color:${param.color}">
        </span>`;
        result += `${colorDot} ${param.seriesName}: ${param.value}${param.seriesName === '茎秆高度' ? 'cm' : param.seriesName === '叶片温度' ? '℃' : 'mm'} <br>`;
      });
      return result;
    },
  },
  grid: {
    top: '20%',
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#999',
        },
        margin: 15,
      },
      axisPointer: {
        label: {
          padding: [11, 5, 7],
          backgroundColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#fff',
              },
              {
                offset: 0.9,
                color: '#fff',
              },
              {
                offset: 0.9,
                color: '#33c0cd',
              },
              {
                offset: 1,
                color: '#33c0cd',
              },
            ],
            global: false,
          },
        },
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: 'value',
      show: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'value',
      show: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'value',
      show: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: 'value',
      show: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(107,107,107,0.37)',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#999',
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '销售总额',
      type: 'line',
      data: [514.14, 468.18, 988.35, 1204.84, 954.16, 651.24, ],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 3,
        color: '#25BF82',
        shadowColor: 'rgba(158,135,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[0],
        borderColor: colorList[0],
      },
    },
    {
      name: '订单总数',
      type: 'line',
      data: [4, 18, 29, 33, 18, 10, 28],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 1,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#FFD500',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[2],
        borderColor: colorList[2],
      },
    },
    {
      name: '浏览量',
      type: 'line',
      data: [1589, 2648, 5289, 4289, 9654, 6487, 5968],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 2,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#3685FE',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[2],
        borderColor: colorList[2],
      },
    },
    {
      name: '成功退款金额',
      type: 'line',
      data: [62.44, 14.15, 17.48, 25.18, 21.91, 10.02, 2.25],
      symbolSize: 1,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 3,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: '#3685FE',
        shadowColor: 'rgba(115,221,255, 0.3)',
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        color: colorList[2],
        borderColor: colorList[2],
      },
    },
  ],
};

const initChart = () => {
  if (chartRef.value) {
    // 基于准备好的dom，初始化echarts实例
    chartInstance = echarts.init(chartRef.value);
    // 绘制图表
    chartInstance.setOption(option);
    // 自动显示最大值点的tooltip
    // showMaxValueTooltip();
    // 响应式调整
    window.addEventListener('resize', resizeChart);
  }
};
// 组件卸载前销毁图表
onBeforeUnmount(() => {
  if (chartInstance) {
    window.removeEventListener('resize', resizeChart);
    chartInstance.dispose();
    chartInstance = null;
  }
});
// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
onMounted(() => {
  initChart();
});
</script>
<style lang="scss" scoped>
.title {
  width: 200px;
  display: flex;
  align-items: center;
  margin-right: 50px;
  font-size: 18px;
  color: #999999;
}
.title-image {
  margin-right: 10px;
  width: 38px;
  height: 38px;
}
.number {
  margin-right: 100px;
  margin-top: 20px;
  font-size: 18px;
  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>