Compare commits
No commits in common. "e49ac4fd7be2d2c354c0c60a1aea399eff90f2a5" and "9ede2cb6d977650f84d0915a72fa9f39384f7bcb" have entirely different histories.
e49ac4fd7b
...
9ede2cb6d9
@ -311,18 +311,6 @@ export const constantRoutes = [
|
|||||||
title: "电商交易",
|
title: "电商交易",
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
|
||||||
path: 'trade/dataBoard',
|
|
||||||
component: () => import('@/views/trade/dataBoard'),
|
|
||||||
name: 'dataBoard',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "电商数据看板",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'trade/agriculturalinputstrading',
|
path: 'trade/agriculturalinputstrading',
|
||||||
component: () => import('@/views/trade/agriculturalinputstrading'),
|
component: () => import('@/views/trade/agriculturalinputstrading'),
|
||||||
|
|||||||
@ -1,416 +0,0 @@
|
|||||||
<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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user