535 lines
13 KiB
Vue
535 lines
13 KiB
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>
|