feat: 柱形图优化

This commit is contained in:
ZhuRui
2026-07-28 16:53:20 +08:00
parent 3d6aa6026c
commit 202f4bbd44
3 changed files with 59 additions and 17 deletions
+2 -2
View File
@@ -101,10 +101,10 @@
font-size: 14px; font-size: 14px;
} }
// ===== 柱状图(echarts ===== // ===== 组合图(echarts =====
.chartEcharts { .chartEcharts {
width: 100%; width: 100%;
height: 300px; height: 320px;
} }
// ===== 明细表卡(按内容自适应高度,不被压缩) ===== // ===== 明细表卡(按内容自适应高度,不被压缩) =====
+56 -14
View File
@@ -10,7 +10,7 @@ import styles from './index.module.less';
* 页面结构: * 页面结构:
* 1. 顶部标题 + 时间范围选择 * 1. 顶部标题 + 时间范围选择
* 2. 三张统计卡(总收入 / 总提现 / 平台余额) * 2. 三张统计卡(总收入 / 总提现 / 平台余额)
* 3. 月度收支趋势(近 6 个月,echarts 柱状图) * 3. 月度收支趋势(近 6 个月,echarts 柱状 + 折线组合图)
* 4. 月度收支明细(表格) * 4. 月度收支明细(表格)
*/ */
export default defineComponent({ export default defineComponent({
@@ -27,7 +27,7 @@ export default defineComponent({
RANGE_OPTIONS, RANGE_OPTIONS,
} = useReportsModel(); } = useReportsModel();
// ===== 柱状图(echarts ===== // ===== 组合图(柱状 + 折线,echarts =====
const chartRef = ref<HTMLElement>(); const chartRef = ref<HTMLElement>();
let chartInstance: any = null; let chartInstance: any = null;
@@ -39,48 +39,90 @@ export default defineComponent({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'cross',
crossStyle: { color: 'rgba(0, 0, 0, 0.15)' },
label: { backgroundColor: '#6a7985' },
}, },
valueFormatter: (v: number) => `¥${formatMoney(v)}`, valueFormatter: (v: number) => `¥${formatMoney(v)}`,
}, },
legend: { legend: {
data: ['订单金额', '净收入'], data: [
{ name: '订单金额', icon: 'roundRect' },
{ name: '净收入', icon: 'circle' },
],
bottom: 8, bottom: 8,
icon: 'roundRect',
itemWidth: 14, itemWidth: 14,
itemHeight: 10, itemHeight: 10,
textStyle: { color: 'rgba(0, 0, 0, 0.65)' }, textStyle: { color: 'rgba(0, 0, 0, 0.65)' },
}, },
grid: { left: 8, right: 16, top: 24, bottom: 48, containLabel: true }, grid: { left: 8, right: 16, top: 32, bottom: 48, containLabel: true },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: months, data: months,
axisTick: { show: false }, axisTick: { show: false },
axisLine: { lineStyle: { color: '#e8e8e8' } }, axisLine: { lineStyle: { color: '#e8e8e8' } },
axisLabel: { color: 'rgba(0, 0, 0, 0.55)' }, axisLabel: { color: 'rgba(0, 0, 0, 0.55)' },
axisPointer: { type: 'shadow' },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
color: 'rgba(0, 0, 0, 0.45)', color: 'rgba(0, 0, 0, 0.45)',
formatter: (v: number) => (v >= 1000 ? `${v / 1000}k` : `${v}`), formatter: (v: number) => (v >= 1000 ? `¥${v / 1000}k` : `¥${v}`),
}, },
splitLine: { lineStyle: { color: '#f5f5f5' } }, splitLine: { lineStyle: { color: '#f5f5f5', type: 'dashed' } },
}, },
series: [ series: [
{ {
name: '订单金额', name: '订单金额',
type: 'bar', type: 'bar',
data: order, data: order,
barWidth: 30, barMaxWidth: 48,
itemStyle: { color: '#1677ff', borderRadius: [3, 3, 0, 0] }, barCategoryGap: '35%',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#4096ff' },
{ offset: 1, color: '#1677ff' },
],
},
borderRadius: [4, 4, 0, 0],
},
emphasis: { focus: 'series' },
}, },
{ {
name: '净收入', name: '净收入',
type: 'bar', type: 'line',
data: netIncome, data: netIncome,
barWidth: 30, smooth: true,
itemStyle: { color: '#52c41a', borderRadius: [3, 3, 0, 0] }, symbol: 'circle',
symbolSize: 8,
lineStyle: { width: 3, color: '#52c41a' },
itemStyle: {
color: '#52c41a',
borderWidth: 2,
borderColor: '#fff',
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(82, 196, 26, 0.22)' },
{ offset: 1, color: 'rgba(82, 196, 26, 0.02)' },
],
},
},
emphasis: { focus: 'series' },
z: 10,
}, },
], ],
}; };
@@ -189,7 +231,7 @@ export default defineComponent({
))} ))}
</div> </div>
{/* ===== 柱状图卡(echarts ===== */} {/* ===== 组合图卡(echarts ===== */}
<div class={styles.chartCard}> <div class={styles.chartCard}>
<div class={styles.cardTitle}> <div class={styles.cardTitle}>
<span class={styles.cardTitleIcon}>📊</span> <span class={styles.cardTitleIcon}>📊</span>
@@ -17,7 +17,7 @@ export const RANGE_OPTIONS = [
// 假数据(数值自洽:总收入 - 总提现 = 平台余额) // 假数据(数值自洽:总收入 - 总提现 = 平台余额)
// ============================================================ // ============================================================
/** 6 个月柱状图数据(月份标签 + 订单金额 + 净收入) */ /** 6 个月图数据(月份标签 + 订单金额 + 净收入) */
const CHART_DATA = [ const CHART_DATA = [
{ month: '01月', order: 22500, netIncome: 19000, withdraw: 300 }, { month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
{ month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 }, { month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },