This commit is contained in:
ylj20011123 2025-10-23 18:59:34 +08:00
parent c78652a8d1
commit ab67579eec
3 changed files with 21 additions and 33 deletions

View File

@ -179,8 +179,13 @@ export default {
{ type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 }, { type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 },
{ type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 }, { type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 },
{ type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 } { type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 }
], ]
pageScrollTop: 0 }
},
props: {
pageScrollTop: {
type: Number,
default: 0
} }
}, },
@ -224,7 +229,7 @@ export default {
barChartData() { barChartData() {
return { return {
categories: this.salesRankingData.map(item => categories: this.salesRankingData.map(item =>
this.formatXAxisLabel(item.name) item.name
), ),
series: [{ series: [{
name: '销量', name: '销量',
@ -375,23 +380,7 @@ export default {
this.salesRankingData = res this.salesRankingData = res
}, },
// X
formatXAxisLabel(name) {
if (!name) return '';
//
const screenWidth = this.getScreenWidth();
let maxLength = 4; //
if (screenWidth > 750) {
maxLength = 6; //
} else if (screenWidth < 375) {
maxLength = 3; //
}
//
return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
},
// //
getScreenWidth() { getScreenWidth() {

View File

@ -96,8 +96,11 @@ const cfu = {
//下面是自定义format配置因除H5端外的其他端无法通过props传递函数只能通过此属性对应下标的方式来替换 //下面是自定义format配置因除H5端外的其他端无法通过props传递函数只能通过此属性对应下标的方式来替换
"formatter": { "formatter": {
'SalesRankingOfProducts': function (item, category, index, opts) { 'SalesRankingOfProducts': function (item, category, index, opts) {
console.log('2222', item, category, index, opts); console.log('', item);
console.log('', category);
console.log('', index);
console.log('', opts);
return `${category}${item.data.toLocaleString()}`
}, },
"yAxisDemo1": function (val, index, opts) { return val + '元' }, "yAxisDemo1": function (val, index, opts) { return val + '元' },
"yAxisDemo2": function (val, index, opts) { return val.toFixed(2) }, "yAxisDemo2": function (val, index, opts) { return val.toFixed(2) },

View File

@ -1,6 +1,6 @@
<template> <template>
<page-meta :page-style="'overflow-x:hidden'"></page-meta> <page-meta :page-style="'overflow-x:hidden'"></page-meta>
<view class="digital-dashboard"> <scroll-view scroll-y @scroll="handleScroll" class="digital-dashboard">
<!-- Tab切换区域 --> <!-- Tab切换区域 -->
<view class="tab-container"> <view class="tab-container">
<view class="tab-list"> <view class="tab-list">
@ -38,7 +38,7 @@
<view v-if="activeTab === 0" class="tab-content"> <view v-if="activeTab === 0" class="tab-content">
<!-- 商品报表及分析 --> <!-- 商品报表及分析 -->
<view id="product-report"> </view> <view id="product-report"> </view>
<ProductReport /> <ProductReport :pageScrollTop="pageScrollTop" />
<!-- 交易报表及分析 --> <!-- 交易报表及分析 -->
<view id="transaction-report"></view> <view id="transaction-report"></view>
@ -136,7 +136,7 @@
</view> </view>
</view> </view>
</view> </scroll-view>
</template> </template>
<script> <script>
@ -226,7 +226,8 @@ export default {
// //
isNavCollapsed: true, isNavCollapsed: true,
// //
sessionData: {} sessionData: {},
pageScrollTop: 0
} }
}, },
computed: { computed: {
@ -246,10 +247,6 @@ export default {
uni.hideTabBar(); uni.hideTabBar();
}, },
onPageScroll() {
//
this.handleScroll();
},
onReady() { onReady() {
// //
const currentTabKey = this.tabList[this.activeTab].key; const currentTabKey = this.tabList[this.activeTab].key;
@ -298,9 +295,8 @@ export default {
this.isNavCollapsed = !this.isNavCollapsed; this.isNavCollapsed = !this.isNavCollapsed;
}, },
// handleScroll(e) {
handleScroll() { this.pageScrollTop = e.detail.scrollTop
// DOM
}, },
// tab // tab
@ -332,7 +328,7 @@ export default {
@shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06); @shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06);
.digital-dashboard { .digital-dashboard {
min-height: 100vh; height: 100vh;
background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%); background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%);
.tab-container { .tab-container {