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;
}
// ===== 柱状图(echarts =====
// ===== 组合图(echarts =====
.chartEcharts {
width: 100%;
height: 300px;
height: 320px;
}
// ===== 明细表卡(按内容自适应高度,不被压缩) =====
+56 -14
View File
@@ -10,7 +10,7 @@ import styles from './index.module.less';
* 页面结构:
* 1. 顶部标题 + 时间范围选择
* 2. 三张统计卡(总收入 / 总提现 / 平台余额)
* 3. 月度收支趋势(近 6 个月,echarts 柱状图)
* 3. 月度收支趋势(近 6 个月,echarts 柱状 + 折线组合图)
* 4. 月度收支明细(表格)
*/
export default defineComponent({
@@ -27,7 +27,7 @@ export default defineComponent({
RANGE_OPTIONS,
} = useReportsModel();
// ===== 柱状图(echarts =====
// ===== 组合图(柱状 + 折线,echarts =====
const chartRef = ref<HTMLElement>();
let chartInstance: any = null;
@@ -39,48 +39,90 @@ export default defineComponent({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
type: 'cross',
crossStyle: { color: 'rgba(0, 0, 0, 0.15)' },
label: { backgroundColor: '#6a7985' },
},
valueFormatter: (v: number) => `¥${formatMoney(v)}`,
},
legend: {
data: ['订单金额', '净收入'],
data: [
{ name: '订单金额', icon: 'roundRect' },
{ name: '净收入', icon: 'circle' },
],
bottom: 8,
icon: 'roundRect',
itemWidth: 14,
itemHeight: 10,
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: {
type: 'category',
data: months,
axisTick: { show: false },
axisLine: { lineStyle: { color: '#e8e8e8' } },
axisLabel: { color: 'rgba(0, 0, 0, 0.55)' },
axisPointer: { type: 'shadow' },
},
yAxis: {
type: 'value',
axisLabel: {
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: [
{
name: '订单金额',
type: 'bar',
data: order,
barWidth: 30,
itemStyle: { color: '#1677ff', borderRadius: [3, 3, 0, 0] },
barMaxWidth: 48,
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: '净收入',
type: 'bar',
type: 'line',
data: netIncome,
barWidth: 30,
itemStyle: { color: '#52c41a', borderRadius: [3, 3, 0, 0] },
smooth: true,
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>
{/* ===== 柱状图卡(echarts ===== */}
{/* ===== 组合图卡(echarts ===== */}
<div class={styles.chartCard}>
<div class={styles.cardTitle}>
<span class={styles.cardTitleIcon}>📊</span>
@@ -17,7 +17,7 @@ export const RANGE_OPTIONS = [
// 假数据(数值自洽:总收入 - 总提现 = 平台余额)
// ============================================================
/** 6 个月柱状图数据(月份标签 + 订单金额 + 净收入) */
/** 6 个月图数据(月份标签 + 订单金额 + 净收入) */
const CHART_DATA = [
{ month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
{ month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },