Many cross-border purchasing agent and consolidated warehouse operators need to view real-time order and waybill statistics on their phones while on the road or at the warehouse. However, the vast majority of purchasing agent source-code backends are designed only for large PC screens. When accessed via mobile, the statistical pages suffer from squeezed charts, misaligned tables, and unclickable filter buttons—making mobile office work essentially impossible.
Based on the Taocarts admin system, I have fully refactored the three major dashboards—order statistics, waybill statistics, and user overview—for full-device responsiveness. The adaptation covers phones, tablets, and foldable screens, with optimizations for ECharts rendering on mobile, adaptive column hiding for tables, and touch-friendly date-picker interactions. This article provides a complete walkthrough of the responsive styles, mobile chart adaptation, and touch interaction optimization code, enabling operations staff to view reverse cross‑border platform data anytime, anywhere via their phones.
Migrating PC statistical pages to mobile presents four major adaptation challenges:
Multi‑metric line charts suffer from insufficient width, causing overlapping x‑axis date labels and crowded curves that obscure trends.
Multi‑column tables (e.g., popular routes, top user regions) contain too many columns, making horizontal scrolling on mobile cumbersome.
Date picker pop‑ups are oversized, failing to display completely on phone screens and preventing easy start/end date selection.
The top four metric cards, arranged in a row on PC, become squeezed and illegible on mobile.
The adaptive refactoring is divided into four modules: CSS multi‑breakpoint responsive layout, mobile‑specific ECharts rendering parameters, adaptive hiding of secondary table columns, and lightweight mobile‑optimized interaction components. The page automatically detects the device screen width: below 768px it enters mobile mode, adjusting layout, chart parameters, and column display logic; below 1200px it enters tablet mode, with a balanced compromise to preserve visual clarity.
Core Responsive CSS for the Statistics Backend
`/* 统计页面多终端自适应样式 /
/ PC端 >=1200px */
.stat-card-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.chart-wrap {
width: 100%;
height: 420px;
}
/* 平板适配 769px ~ 1199px /
@media screen and (min-width:769px) and (max-width:1199px) {
.stat-card-row {
grid-template-columns: repeat(2, 1fr);
}
.chart-wrap {
height: 360px;
}
/ 表格隐藏非核心次要列 */
.table-col-other {
display: none;
}
}
/* 手机移动端适配 <=768px /
@media screen and (max-width:768px) {
.stat-card-row {
grid-template-columns: 1fr;
}
.chart-wrap {
height: 280px;
}
/ 热门线路表格仅保留排名、路线名称、下单金额核心三列 /
.el-table_header th:nth-child(3),
.el-tablebody td:nth-child(3),
.el-tableheader th:nth-child(4),
.el-table_body td:nth-child(4) {
display: none;
}
/ 日期筛选按钮放大触控区域 */
.date-btn {
width: 110px;
height: 40px;
font-size: 14px;
}
}`
ECharts Mobile Adaptive Rendering Parameter Adjustments
// 区分设备尺寸动态调整图表配置
const getAdaptChartOption = (xData, seriesList, screenWidth) => {
const baseOption = {
tooltip: { trigger: 'axis', touchMode: 'cross' },
legend: { data: seriesList.map(s => s.name) },
xAxis: { data: xData }
}
// 手机端缩小图例、精简坐标轴文字
if(screenWidth <= 768) {
return {
...baseOption,
legend: { textStyle: { fontSize: 10 }, top: 5 },
xAxis: { axisLabel: { fontSize: 9, rotate: 45 } },
yAxis: { axisLabel: { fontSize: 10 } },
series: seriesList.map(item => ({...item, lineStyle: { width: 1.5 }}))
}
}
// 平板中等配置
if(screenWidth <= 1200) {
return {
...baseOption,
legend: { textStyle: { fontSize: 12 } },
xAxis: { axisLabel: { fontSize: 11 } }
}
}
// PC端完整配置
return baseOption;
}
The date picker is replaced with a mobile‑friendly calendar pop‑up, enlarging touch targets and supporting swipe‑based date selection. The top four metric cards automatically stack from a four‑column row into a single column, with each card fully displaying the metric name, value, and period‑over‑period change. Tables for popular routes and user regions automatically hide secondary columns such as order count and item quantity, retaining only core fields like amount, ranking, and route name to minimise horizontal scrolling.
After implementing this full multi‑device adaptation, operations staff can open the backend on their phones anytime to view order, waybill, and user trends—whether at the warehouse or on the go, without needing a laptop. This significantly improves operational efficiency for cross‑border purchasing and international consolidation platforms, filling the gap left by most purchasing‑agent source‑code backends that support only PC screens, and meeting the multi‑device office needs of global cross‑border independent stores.
Top comments (0)