Skip to content

S
SuperMan
Commit 8dc7fd9c authored by 罗超's avatar 罗超
Browse files
Options

交易

parent 9a21b6a6
Hide whitespace changes
Inline Side-by-side
Showing with 240 additions and 3 deletions
src/components/rank/components/pagecount.vue
View file @ 8dc7fd9c
......@@ -105,9 +105,9 @@ export default {
{
name: this.barData.name,
type: 'bar',
barWidth: 20,
barWidth: 10,
itemStyle: {
color: '#6184fa',
color: '#04cf89',
barBorderRadius: [0, 4, 4, 0]
},
data: this.barData.data,
......
src/components/rank/components/tradecount.vue 0 → 100644
View file @ 8dc7fd9c
<template>
<div id="tradecount" style="width: 100%; height: 100%;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'CustomChart',
data() {
return {
chart: null,
barData: {
name: '新增同业数',
data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
},
lineData: {
name: '新增激活数',
data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
},
xAxisData: [
'11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人',
};
},
props: {
chartData: {
type: Object,
default: null
}
},
mounted() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
},
methods: {
initChart() {
const chartDom = document.getElementById('tradecount');
this.chart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis', // 鼠标悬浮时触发
axisPointer: {
type: 'shadow', // 使用阴影指示
},
},
legend: {
bottom: 10,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12,
},
data: [this.barData.name, this.lineData.name],
},
grid: {
left: 0,
right: 0,
top: 30,
bottom: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: this.xAxisData,
axisLine: {
lineStyle: {
color: '#eee',
},
},
axisLabel: {
color: '#121212',
interval: this.calculateInterval(this.xAxisData.length),
},
axisTick: {
show: false,
},
},
yAxis: {
type: 'value',
name: '',
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#eee',
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} ' + this.unit,
},
},
series: [
{
name: this.barData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#6184fa',
arBorderRadius: [2, 2, 0, 0]
},
data: this.barData.data,
},
{
name: this.lineData.name,
type: 'bar',
stack: 'total', // 设置堆叠
barWidth: 10,
itemStyle: {
color: '#04cf89',
barBorderRadius: [2, 2, 0, 0]
},
data: this.lineData.data,
},
],
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
calculateInterval(length) {
if (length <= 10) {
return 0; // 数据较少时全部显示
} else if (length <= 20) {
return 1; // 每两个显示一个
} else if (length <= 30) {
return 2; // 每三个显示一个
} else {
return Math.floor(length / 10); // 根据数据数量动态计算间隔
}
},
},
destroyed() {
if (this.chart) {
this.chart.dispose();
}
},
};
</script>
<style scoped>
#tradecount {
width: 100%;
height: 100%;
}
</style>
src/components/rank/dataCount.vue
View file @ 8dc7fd9c
......@@ -92,6 +92,69 @@
<Customer></Customer>
</div>
</div>
<div class="sub-title q-my-md green">交易核心数据</div>
<div class="card rounded big">
<div class="row items-center">
<div style="margin: 0 12px;" class="col">
<div class="sub-title">今日客户数据</div>
<div class="">
<span class="dot"></span>
<span class="text-info">2025/01/24 - 2025/01/25</span>
</div>
</div>
<el-select v-model="platformId" style="width: 140px;">
<el-option v-for="(x,i) in platforms" :key="i" :label="x.Name" :value="x.Id"></el-option>
</el-select>
</div>
<div class="q-mt-md row items-center">
<div class="data-items col">
<div>交易金额</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">5000000.00</span>
<span>元</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;height: 80%;"></el-divider>
<div class="data-items col">
<div>收客人数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">89</span>
<span>人</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>订单数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">455</span>
<span>个</span>
</div>
</div>
<el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
<div class="data-items col">
<div>用卷订单数</div>
<div class="num" style="margin: 6px 0;">
<span class="datanum">26052</span>
<span>个</span>
</div>
</div>
</div>
</div>
<div class="card rounded big q-mt-md">
<div style="margin: 0 12px;">
<div class="sub-title">交易趋势图</div>
<div class="">
<span class="dot"></span>
<span class="text-info">2024/11/30 - 2025/01/23</span>
</div>
</div>
<div style="height: 320px;">
<Tradecount></Tradecount>
</div>
</div>
<div class="sub-title q-my-md green">访问核心数据</div>
<div class="card rounded big">
<div style="margin: 0 12px;">
......@@ -301,12 +364,14 @@ import Customer from './components/customer.vue'
import Coreview from './components/coreview.vue';
import Pagecount from './components/pagecount.vue';
import Citiescount from './components/citiescount.vue'
import Tradecount from './components/tradecount.vue'
export default {
components:{
Customer,
Coreview,
Pagecount,
Citiescount
Citiescount,
Tradecount
},
data(){
return {
......@@ -374,6 +439,8 @@ export default {
],
metricsId: 1,
areas:[{Id:1,Name:'省份'},{Id:2,Name:'城市'}],
platforms:[{Id:1,Name:'全部'},{Id:2,Name:'旅小友'}],
platformId:1,
areaId:1,
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment