首页
This commit is contained in:
BabyBoy
parent
6d4c4c8260
commit
36b39f8466
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="LineChartnew" :style="{ width: width, height: height }"></div>
|
||||
<div :id="id" :style="{ width: width, height: height }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -7,6 +7,9 @@ import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
@ -17,7 +20,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
default: '300px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
@ -40,9 +43,7 @@ export default {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: []
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
@ -66,9 +67,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
console.log(this.chartData);
|
||||
this.defaultOption = { ...this.defaultOption, ...this.chartData };
|
||||
const chartDom = document.getElementById('LineChartnew');
|
||||
console.log(this.defaultOption);
|
||||
const chartDom = document.getElementById(this.id);
|
||||
const myChart = echarts.init(chartDom);
|
||||
myChart.setOption(this.defaultOption);
|
||||
}
|
||||
|
||||
@ -52,39 +52,76 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card header="收入支出（万）"></el-card>
|
||||
<el-card header="收入支出（万）">
|
||||
<LineChartnew v-if="isbar" :chartData="barchartData" id="barchart" />
|
||||
<!-- <LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" /> -->
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-card header="用户量">
|
||||
<LineChartnew v-if="lineChartsShow" :chartData="LinechartData" />
|
||||
<LineChartnew v-if="lineChartsShow" :chartData="LinechartData" id="lineChartsShow" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card header="短视频"></el-card>
|
||||
<el-card header="短视频">
|
||||
<LineChartnew v-if="monthlyVlogShow" :chartData="monthlyVlogList" id="monthlyVlogShow" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-card header="店铺TOP20"></el-card>
|
||||
<el-card header="店铺TOP20">
|
||||
<div class="table-head" v-if="istopstores">
|
||||
<div>排名</div>
|
||||
<div>店铺名称</div>
|
||||
<div>销量量</div>
|
||||
<div>总交易额</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="table-body" v-for="(item, index) in topStoresList" :key="index">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.company_name }}</div>
|
||||
<div>{{ item.sales }}</div>
|
||||
<div>{{ item.total_amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card header="商品TOP20"></el-card>
|
||||
<el-card header="商品TOP20">
|
||||
<div class="table-head" v-if="istopproduct">
|
||||
<div>排名</div>
|
||||
<div>店铺名称</div>
|
||||
<div>销量量</div>
|
||||
<div>总交易额</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="table-body" v-for="(item, index) in topProductList" :key="index">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.sales }}</div>
|
||||
<div>{{ item.total_amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { getIndex } from '@/api/login';
|
||||
import { indexObjOV } from '@/api/types';
|
||||
import { indexObjOV, top20Stores, top20Product } from '@/api/types';
|
||||
import LineChartnew from '@/views/dashboard/LineChartnew.vue'; //引入折线图
|
||||
const goTarget = (url: string) => {
|
||||
window.open(url, '__blank');
|
||||
};
|
||||
const indexObj = ref<indexObjOV>();
|
||||
const lineChartsShow = ref(false);
|
||||
|
||||
const LinechartData = ref({
|
||||
// color: 'red',
|
||||
xAxis: {
|
||||
@ -93,25 +130,138 @@ const LinechartData = ref({
|
||||
data: []
|
||||
},
|
||||
series: [
|
||||
{ name: '用户量', data: [] },
|
||||
{ name: '在线用户', data: [] },
|
||||
{ name: '活跃', data: [] },
|
||||
{ name: '下单用户', data: [] }
|
||||
{ name: '用户量', type: 'line', data: [] },
|
||||
{ name: '在线用户', type: 'line', data: [] },
|
||||
{ name: '活跃', type: 'line', data: [] },
|
||||
{ name: '下单用户', type: 'line', data: [] }
|
||||
]
|
||||
});
|
||||
const monthlyVlogShow = ref(false);
|
||||
const monthlyVlogList = ref({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '视频',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
data: [],
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(58,77,233,0.8)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(58,77,233,0.3)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
//店铺
|
||||
const topStoresList = ref<top20Stores[]>([]);
|
||||
const istopstores = ref(false);
|
||||
//商品
|
||||
const topProductList = ref<top20Product[]>([]);
|
||||
const istopproduct = ref(false);
|
||||
//饼形
|
||||
|
||||
const barchartData = ref({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: [0, 0],
|
||||
data: []
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barCategoryGap: '20%',
|
||||
// 方案2：直接设柱子宽度（如像素值或百分比）
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
// 线性渐变填充：从上到下透明度递减
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(255, 99, 132, 1)' }, // 顶部：完全不透明
|
||||
{ offset: 1, color: 'rgba(255, 99, 132, 0.3)' } // 底部：30% 透明度
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barCategoryGap: '20%',
|
||||
// 方案2：直接设柱子宽度（如像素值或百分比）
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
// 线性渐变填充：从上到下透明度递减
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0, // 渐变起点（左上角）
|
||||
x2: 0,
|
||||
y2: 1, // 渐变终点（左下角）
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(54, 162, 235, 1)' }, // 顶部：完全不透明
|
||||
{ offset: 1, color: 'rgba(54, 162, 235, 0.3)' } // 底部：30% 透明度
|
||||
],
|
||||
global: false // 只在当前图形内生效
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
const isbar = ref(false);
|
||||
const getList = async () => {
|
||||
const res = await getIndex();
|
||||
indexObj.value = res.data;
|
||||
const a = [];
|
||||
res.data?.monthlyUserVolume.forEach((item) => {
|
||||
res.data?.monthlyUserVolume.forEach((item: any) => {
|
||||
LinechartData.value.xAxis.data.push(item.month);
|
||||
LinechartData.value.series[0].data.push(item.registerMemberCount);
|
||||
LinechartData.value.series[1].data.push(item.loginMemberCount);
|
||||
LinechartData.value.series[2].data.push(item.addCartMemberCount);
|
||||
LinechartData.value.series[3].data.push(item.dealMemberCount);
|
||||
LinechartData.value.series[0].data.push(Number(item.registerMemberCount));
|
||||
LinechartData.value.series[1].data.push(Number(item.loginMemberCount));
|
||||
LinechartData.value.series[2].data.push(Number(item.addCartMemberCount));
|
||||
LinechartData.value.series[3].data.push(Number(item.dealMemberCount));
|
||||
});
|
||||
|
||||
lineChartsShow.value = true;
|
||||
res.data?.monthlyVlog.forEach((item: any) => {
|
||||
monthlyVlogList.value.xAxis.data.push(item.month);
|
||||
monthlyVlogList.value.series[0].data.push(Number(item.vlog_count));
|
||||
});
|
||||
console.log(monthlyVlogList.value);
|
||||
monthlyVlogShow.value = true;
|
||||
topStoresList.value = res.data?.top20Stores;
|
||||
istopstores.value = true;
|
||||
topProductList.value = res.data?.top20Product;
|
||||
istopproduct.value = true;
|
||||
res.data?.monthlyIncomeExpense.forEach((item: any) => {
|
||||
barchartData.value.xAxis.data.push(item.month);
|
||||
barchartData.value.series[0].data.push(Number(item.income_amount));
|
||||
barchartData.value.series[1].data.push(Number(item.expense_amount));
|
||||
});
|
||||
isbar.value = true;
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
@ -180,4 +330,41 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
div {
|
||||
width: 25%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
.table-body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
div {
|
||||
width: 25%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep {
|
||||
// .el-card__body {
|
||||
// height: 300px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user