feat: 柱形图优化
This commit is contained in:
@@ -101,10 +101,10 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===== 柱状图(echarts) =====
|
// ===== 组合图(echarts) =====
|
||||||
.chartEcharts {
|
.chartEcharts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 300px;
|
height: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ===== 明细表卡(按内容自适应高度,不被压缩) =====
|
// ===== 明细表卡(按内容自适应高度,不被压缩) =====
|
||||||
|
|||||||
@@ -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 },
|
||||||
|
|||||||
Reference in New Issue
Block a user