feat: 解决编译问题，增加一键部署脚本。
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, onBeforeMount } from 'vue';
|
||||
import { useRoute, useRouter, LocationQueryRaw } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
onBeforeMount(() => {
|
||||
const { params, query } = route;
|
||||
const { path } = params;
|
||||
|
||||
router.replace({
|
||||
path: `/${Array.isArray(path) ? path.join('/') : path}`,
|
||||
query: query as LocationQueryRaw,
|
||||
});
|
||||
});
|
||||
|
||||
return () => null;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="error-container">
|
||||
<a-result
|
||||
status="error"
|
||||
title="操作失败"
|
||||
sub-title="很抱歉，您的操作未能完成，请检查并重试"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button key="retry" type="primary">重试</a-button>
|
||||
<a-button key="back" @click="back">返回上一页</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultError',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
const back = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
return {
|
||||
back,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.error-container {
|
||||
padding: 24px;
|
||||
background-color: var(--color-bg-2);
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="success-container">
|
||||
<a-result
|
||||
status="success"
|
||||
title="操作成功"
|
||||
sub-title="操作已成功完成，您可以继续其他操作或返回首页"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<a-button key="home" type="primary" @click="toHome"
|
||||
>返回首页</a-button
|
||||
>
|
||||
<a-button key="back" @click="back">返回上一页</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ResultSuccess',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
const toHome = () => {
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
return {
|
||||
toHome,
|
||||
back,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.success-container {
|
||||
padding: 24px;
|
||||
background-color: var(--color-bg-2);
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<a-card class="general-card" title="个人信息">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card class="user-card">
|
||||
<template #cover>
|
||||
<div class="avatar-wrapper">
|
||||
<a-avatar :size="84" :src="userInfo.avatar || '/avatar.jpg'" />
|
||||
</div>
|
||||
</template>
|
||||
<a-card-meta :title="userInfo.name">
|
||||
<template #description>
|
||||
<div class="user-info">
|
||||
<div>邮箱: {{ userInfo.email || '未设置' }}</div>
|
||||
<div>职位: {{ userInfo.jobName || '未设置' }}</div>
|
||||
<div>部门: {{ userInfo.organizationName || '未设置' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<a-descriptions :column="1" size="large" bordered>
|
||||
<a-descriptions-item label="用户名">{{
|
||||
userInfo.name || '未设置'
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="联系电话">{{
|
||||
userInfo.phone || '未设置'
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱地址">{{
|
||||
userInfo.email || '未设置'
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="所在地区">{{
|
||||
userInfo.locationName || '未设置'
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="注册时间">{{
|
||||
userInfo.registrationDate || '未设置'
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInfo',
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
|
||||
const userInfo = reactive({
|
||||
...userStore.$state,
|
||||
});
|
||||
|
||||
return {
|
||||
userInfo,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
.general-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
text-align: center;
|
||||
|
||||
.avatar-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
background-color: var(--color-bg-2);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-top: 12px;
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<a-card class="general-card" title="个人设置">
|
||||
<a-tabs default-active-key="1">
|
||||
<a-tab-pane key="1" title="基本信息">
|
||||
<a-form
|
||||
:model="userForm"
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
>
|
||||
<a-form-item field="avatar" label="头像">
|
||||
<div class="avatar-uploader">
|
||||
<a-avatar :size="64" :src="userForm.avatar || '/avatar.jpg'" />
|
||||
<div class="upload-actions">
|
||||
<a-button type="primary" size="small">更换头像</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item field="name" label="用户名">
|
||||
<a-input v-model="userForm.name" placeholder="请输入用户名" />
|
||||
</a-form-item>
|
||||
<a-form-item field="email" label="邮箱">
|
||||
<a-input v-model="userForm.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
<a-form-item field="phone" label="电话号码">
|
||||
<a-input v-model="userForm.phone" placeholder="请输入电话号码" />
|
||||
</a-form-item>
|
||||
<a-form-item field="introduction" label="个人简介">
|
||||
<a-textarea
|
||||
v-model="userForm.introduction"
|
||||
placeholder="请输入个人简介"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col-props="{ offset: 6 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="saveSettings">保存</a-button>
|
||||
<a-button @click="resetForm">重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="安全设置">
|
||||
<a-space direction="vertical" fill style="width: 100%">
|
||||
<a-card>
|
||||
<template #title>修改密码</template>
|
||||
<div class="password-item">
|
||||
<div class="password-item-title">账户密码</div>
|
||||
<div class="password-item-action">
|
||||
<a-button>修改</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<template #title>安全认证</template>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item-title">
|
||||
<div>两步验证</div>
|
||||
<div class="setting-item-desc"
|
||||
>使用两步验证提高账户安全性</div
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item-action">
|
||||
<a-switch />
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { useUserStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserSetting',
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
|
||||
const userForm = reactive({
|
||||
...userStore.$state,
|
||||
});
|
||||
|
||||
const originalData = { ...userForm };
|
||||
|
||||
const saveSettings = () => {
|
||||
userStore.setInfo({
|
||||
name: userForm.name,
|
||||
email: userForm.email,
|
||||
phone: userForm.phone,
|
||||
introduction: userForm.introduction,
|
||||
});
|
||||
Message.success('设置已保存');
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(userForm, originalData);
|
||||
Message.info('设置已重置');
|
||||
};
|
||||
|
||||
return {
|
||||
userForm,
|
||||
saveSettings,
|
||||
resetForm,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
.general-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.password-item,
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
|
||||
.password-item-title,
|
||||
.setting-item-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.setting-item-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<a-card class="general-card" title="数据分析">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24" :lg="16">
|
||||
<!-- 主要图表区域 -->
|
||||
<a-card class="content-card">
|
||||
<template #title>销售趋势分析</template>
|
||||
<div class="chart-wrapper">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24" :lg="8">
|
||||
<!-- 数据统计卡片 -->
|
||||
<a-space direction="vertical" fill style="width: 100%">
|
||||
<a-card class="content-card">
|
||||
<a-statistic
|
||||
title="总销售额"
|
||||
:value="12345678"
|
||||
:precision="2"
|
||||
show-group-separator
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-thumb-up />
|
||||
</template>
|
||||
</a-statistic>
|
||||
<div class="statistic-footer">
|
||||
<div class="footer-item">
|
||||
<span>日环比</span>
|
||||
<span class="green">
|
||||
<icon-arrow-rise />
|
||||
10.5%
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer-item">
|
||||
<span>周环比</span>
|
||||
<span class="green">
|
||||
<icon-arrow-rise />
|
||||
12.8%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card class="content-card">
|
||||
<a-statistic
|
||||
title="访问量"
|
||||
:value="8846"
|
||||
:precision="0"
|
||||
show-group-separator
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-user />
|
||||
</template>
|
||||
</a-statistic>
|
||||
<div class="statistic-footer">
|
||||
<div class="footer-item">
|
||||
<span>日环比</span>
|
||||
<span class="red">
|
||||
<icon-arrow-fall />
|
||||
2.5%
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer-item">
|
||||
<span>周环比</span>
|
||||
<span class="green">
|
||||
<icon-arrow-rise />
|
||||
15.2%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-card class="content-card">
|
||||
<template #title>销售数据详情</template>
|
||||
<a-table :data="tableData" :pagination="{ pageSize: 5 }">
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" />
|
||||
<a-table-column title="商品名称" data-index="name" />
|
||||
<a-table-column title="销售额" data-index="sales">
|
||||
<template #cell="{ record }">{{
|
||||
record.sales.toLocaleString()
|
||||
}}</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="销售量" data-index="count" />
|
||||
<a-table-column title="日期" data-index="date" />
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DataAnalysis',
|
||||
setup() {
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
const chart = ref<echarts.ECharts | null>(null);
|
||||
|
||||
const tableData = [
|
||||
{ id: 1, name: '商品A', sales: 12345, count: 123, date: '2023-01-01' },
|
||||
{ id: 2, name: '商品B', sales: 23456, count: 234, date: '2023-01-02' },
|
||||
{ id: 3, name: '商品C', sales: 34567, count: 345, date: '2023-01-03' },
|
||||
{ id: 4, name: '商品D', sales: 45678, count: 456, date: '2023-01-04' },
|
||||
{ id: 5, name: '商品E', sales: 56789, count: 567, date: '2023-01-05' },
|
||||
{ id: 6, name: '商品F', sales: 67890, count: 678, date: '2023-01-06' },
|
||||
{ id: 7, name: '商品G', sales: 78901, count: 789, date: '2023-01-07' },
|
||||
];
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
chart.value = echarts.init(chartRef.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['销售额', '访问量'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#1890ff',
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(24,144,255,0.3)' },
|
||||
{ offset: 1, color: 'rgba(24,144,255,0.1)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '访问量',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#52c41a',
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(82,196,26,0.3)' },
|
||||
{ offset: 1, color: 'rgba(82,196,26,0.1)' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
chart.value.setOption(option);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
chart.value?.resize();
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
tableData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
.general-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
height: 360px;
|
||||
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.statistic-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
|
||||
.footer-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
span:first-child {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #f5222d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<a-card class="general-card" title="多维数据分析">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="24">
|
||||
<!-- 图表切换控制 -->
|
||||
<div class="chart-control">
|
||||
<a-radio-group v-model="chartType" type="button">
|
||||
<a-radio value="bar">柱状图</a-radio>
|
||||
<a-radio value="line">折线图</a-radio>
|
||||
<a-radio value="pie">饼图</a-radio>
|
||||
</a-radio-group>
|
||||
<a-select v-model="timeRange" style="width: 120px">
|
||||
<a-option value="week">本周</a-option>
|
||||
<a-option value="month">本月</a-option>
|
||||
<a-option value="year">本年</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="chart-wrapper">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- 数据维度选择 -->
|
||||
<a-card class="content-card">
|
||||
<template #title>数据维度配置</template>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form :model="formData" layout="vertical">
|
||||
<a-form-item field="dimension1" label="维度1">
|
||||
<a-select v-model="formData.dimension1">
|
||||
<a-option value="sales">销售额</a-option>
|
||||
<a-option value="traffic">流量</a-option>
|
||||
<a-option value="users">用户数</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item field="dimension2" label="维度2">
|
||||
<a-select v-model="formData.dimension2">
|
||||
<a-option value="region">地区</a-option>
|
||||
<a-option value="age">年龄段</a-option>
|
||||
<a-option value="gender">性别</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form :model="formData" layout="vertical">
|
||||
<a-form-item field="dimension3" label="维度3">
|
||||
<a-select v-model="formData.dimension3">
|
||||
<a-option value="channel">渠道</a-option>
|
||||
<a-option value="product">商品</a-option>
|
||||
<a-option value="time">时间</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" @click="updateChart"
|
||||
>更新图表</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<a-card class="content-card">
|
||||
<template #title>多维数据详情</template>
|
||||
<a-table :data="tableData" :pagination="{ pageSize: 5 }">
|
||||
<template #columns>
|
||||
<a-table-column title="ID" data-index="id" />
|
||||
<a-table-column title="维度1" data-index="dim1" />
|
||||
<a-table-column title="维度2" data-index="dim2" />
|
||||
<a-table-column title="维度3" data-index="dim3" />
|
||||
<a-table-column title="数值" data-index="value">
|
||||
<template #cell="{ record }">{{
|
||||
record.value.toLocaleString()
|
||||
}}</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, reactive, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MultiDimensionDataAnalysis',
|
||||
setup() {
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
const chart = ref<echarts.ECharts | null>(null);
|
||||
|
||||
const chartType = ref('bar');
|
||||
const timeRange = ref('month');
|
||||
|
||||
const formData = reactive({
|
||||
dimension1: 'sales',
|
||||
dimension2: 'region',
|
||||
dimension3: 'channel',
|
||||
});
|
||||
|
||||
// 模拟数据
|
||||
const tableData = ref([
|
||||
{ id: 1, dim1: '销售额', dim2: '华东', dim3: '线上', value: 4332 },
|
||||
{ id: 2, dim1: '销售额', dim2: '华南', dim3: '线上', value: 2986 },
|
||||
{ id: 3, dim1: '销售额', dim2: '华北', dim3: '线上', value: 3219 },
|
||||
{ id: 4, dim1: '销售额', dim2: '华东', dim3: '线下', value: 3721 },
|
||||
{ id: 5, dim1: '销售额', dim2: '华南', dim3: '线下', value: 2413 },
|
||||
{ id: 6, dim1: '销售额', dim2: '华北', dim3: '线下', value: 1893 },
|
||||
{ id: 7, dim1: '流量', dim2: '华东', dim3: '线上', value: 10243 },
|
||||
{ id: 8, dim1: '流量', dim2: '华南', dim3: '线上', value: 8752 },
|
||||
]);
|
||||
|
||||
const getChartData = () => {
|
||||
// 模拟根据维度和时间范围获取不同的数据
|
||||
// 实际应用中可以通过API获取
|
||||
return {
|
||||
xAxis: ['华东', '华南', '华北', '西南', '西北', '东北'],
|
||||
series: [
|
||||
{
|
||||
name: '线上',
|
||||
data: [4332, 2986, 3219, 2851, 1845, 2016],
|
||||
},
|
||||
{
|
||||
name: '线下',
|
||||
data: [3721, 2413, 1893, 2173, 1634, 1723],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const updateChart = () => {
|
||||
if (!chart.value) return;
|
||||
|
||||
const chartData = getChartData();
|
||||
|
||||
let option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['线上', '线下'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
};
|
||||
|
||||
if (chartType.value === 'bar') {
|
||||
option = {
|
||||
...option,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chartData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: chartData.series.map((item) => ({
|
||||
name: item.name,
|
||||
type: 'bar',
|
||||
data: item.data,
|
||||
})),
|
||||
};
|
||||
} else if (chartType.value === 'line') {
|
||||
option = {
|
||||
...option,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chartData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: chartData.series.map((item) => ({
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: item.data,
|
||||
})),
|
||||
};
|
||||
} else if (chartType.value === 'pie') {
|
||||
// 将数据转换为饼图格式
|
||||
const pieData = chartData.xAxis.map((region, index) => ({
|
||||
name: region,
|
||||
value:
|
||||
chartData.series[0].data[index] + chartData.series[1].data[index],
|
||||
}));
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: chartData.xAxis,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: formData.dimension1,
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: pieData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
chart.value.setOption(option, true);
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
chart.value = echarts.init(chartRef.value);
|
||||
updateChart();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
chart.value?.resize();
|
||||
});
|
||||
};
|
||||
|
||||
watch([chartType, timeRange], () => {
|
||||
updateChart();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
chartType,
|
||||
timeRange,
|
||||
formData,
|
||||
tableData,
|
||||
updateChart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
.general-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-control {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
height: 400px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user