稳定提交
This commit is contained in:
Guwan
parent
d16e99c63c
commit
6719fe8600
|
|
@ -60,44 +60,16 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="charts-container">
|
||||
<!– 销量对比图表 –>
|
||||
<div class="chart-demo">
|
||||
<ECharts
|
||||
:data="salesData"
|
||||
:config="salesConfig"
|
||||
title="销量对比"
|
||||
height="300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!– 用户增长趋势图 –>
|
||||
<div class="chart-demo">
|
||||
<ECharts
|
||||
:data="userGrowthData"
|
||||
:config="userGrowthConfig"
|
||||
title="近12个月用户增长趋势"
|
||||
height="300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!– 市场份额饼图 –>
|
||||
<div class="chart-demo">
|
||||
<ECharts
|
||||
:data="marketShareData"
|
||||
:config="marketShareConfig"
|
||||
title="各品类市场份额"
|
||||
height="300px"
|
||||
/>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<ECharts
|
||||
<!-- 图表区域 -->
|
||||
<div class="chart-section">
|
||||
<ECharts
|
||||
:data="salesData"
|
||||
:config="salesConfig"
|
||||
:config="chartConfig"
|
||||
title="销量对比"
|
||||
height="300px"
|
||||
/>
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -105,6 +77,7 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import ECharts from '@/components/ECharts/index.vue'
|
||||
import { useSalesChart } from './composables/useSalesChart'
|
||||
|
||||
const value = ref('')
|
||||
const options = [
|
||||
|
|
@ -260,91 +233,8 @@ const getLeafIds = (node, visited) => {
|
|||
return ids;
|
||||
};
|
||||
|
||||
// 1. 销量对比数据
|
||||
const salesData = ref([
|
||||
{
|
||||
productName: '手机',
|
||||
lastMonthSales: 120,
|
||||
currentMonthSales: 140,
|
||||
growthRate: 16.7
|
||||
},
|
||||
{
|
||||
productName: '电脑',
|
||||
lastMonthSales: 200,
|
||||
currentMonthSales: 180,
|
||||
growthRate: -10
|
||||
},
|
||||
{
|
||||
productName: '平板',
|
||||
lastMonthSales: 150,
|
||||
currentMonthSales: 180,
|
||||
growthRate: 20
|
||||
},
|
||||
{
|
||||
productName: '耳机',
|
||||
lastMonthSales: 80,
|
||||
currentMonthSales: 120,
|
||||
growthRate: 50
|
||||
},
|
||||
{
|
||||
productName: '手表',
|
||||
lastMonthSales: 70,
|
||||
currentMonthSales: 90,
|
||||
growthRate: 28.6
|
||||
}
|
||||
])
|
||||
|
||||
// 销量对比配置
|
||||
const salesConfig = {
|
||||
xField: 'productName',
|
||||
series: [
|
||||
{
|
||||
name: '上月销量',
|
||||
field: 'lastMonthSales',
|
||||
type: 'bar',
|
||||
color: '#409EFF',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}台',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '本月销量',
|
||||
field: 'currentMonthSales',
|
||||
type: 'bar',
|
||||
color: '#67C23A',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}台',
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '环比增长',
|
||||
field: 'growthRate',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
color: '#E6A23C',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}%',
|
||||
tooltip: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '销量',
|
||||
min: 0
|
||||
},
|
||||
{
|
||||
name: '增长率',
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: '{value}%'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 图表相关
|
||||
const { salesData, chartConfig, loading } = useSalesChart()
|
||||
|
||||
// 2. 用户增长趋势数据
|
||||
const userGrowthData = ref([
|
||||
|
|
@ -443,77 +333,70 @@ const marketShareConfig = {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-center {
|
||||
padding: 16px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
|
||||
.search-section {
|
||||
background-color: #fff;
|
||||
.test-center {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
|
||||
.operation-section {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.search-section {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.left-area {
|
||||
.operation-section {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-area {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-area {
|
||||
.table-section {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
|
||||
:deep(.el-table) {
|
||||
// 移除表格的外边框
|
||||
--el-table-border: none;
|
||||
// 减小表格行的上下padding
|
||||
--el-table-row-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.table-section {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 12px;
|
||||
|
||||
:deep(.el-table) {
|
||||
// 移除表格的外边框
|
||||
--el-table-border: none;
|
||||
// 减小表格行的上下padding
|
||||
--el-table-row-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-section {
|
||||
background-color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.charts-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.chart-demo {
|
||||
background-color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
import { ref, onMounted } from 'vue'
|
||||
|
||||
export function useSalesChart() {
|
||||
// 销量对比数据
|
||||
const salesData = ref([])
|
||||
const loading = ref(true) // 添加 loading 状态
|
||||
|
||||
// 模拟异步数据加载
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 模拟 API 延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
|
||||
salesData.value = [
|
||||
{
|
||||
productName: '手机',
|
||||
lastMonthSales: 120,
|
||||
currentMonthSales: 140,
|
||||
growthRate: 16.7
|
||||
},
|
||||
{
|
||||
productName: '耳机',
|
||||
lastMonthSales: 120,
|
||||
currentMonthSales: 140,
|
||||
growthRate: 16.7
|
||||
},
|
||||
{
|
||||
productName: '手机',
|
||||
lastMonthSales: 120,
|
||||
currentMonthSales: 140,
|
||||
growthRate: 16.7
|
||||
},
|
||||
{
|
||||
productName: '手机',
|
||||
lastMonthSales: 120,
|
||||
currentMonthSales: 140,
|
||||
growthRate: 16.7
|
||||
},
|
||||
// ... 其他数据
|
||||
]
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
// 图表配置
|
||||
const chartConfig = {
|
||||
xField: 'productName',
|
||||
series: [
|
||||
{
|
||||
name: '上月销量',
|
||||
field: 'lastMonthSales',
|
||||
type: 'bar',
|
||||
color: '#409EFF',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}台',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '本月销量',
|
||||
field: 'currentMonthSales',
|
||||
type: 'bar',
|
||||
color: '#67C23A',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}台',
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '环比增长',
|
||||
field: 'growthRate',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
color: '#E6A23C',
|
||||
showLabel: true,
|
||||
labelFormatter: '{c}%',
|
||||
tooltip: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '销量',
|
||||
min: 0
|
||||
},
|
||||
{
|
||||
name: '增长率',
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: '{value}%'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
return {
|
||||
salesData,
|
||||
chartConfig,
|
||||
loading
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue