201 lines
5.9 KiB
Vue
201 lines
5.9 KiB
Vue
<template>
|
|
<ProjectTitle title="近三月经营情况" />
|
|
<div class="bar" ref="chartRef"></div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import { onMounted, ref } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import ProjectTitle from '@/components/ProjectTitle.vue';
|
|
|
|
const chartRef = ref<HTMLElement>();
|
|
|
|
onMounted(() => {
|
|
if (!chartRef.value) return;
|
|
const chart = echarts.init(chartRef.value);
|
|
const weeks = [ '五月','六月', '七月'];
|
|
|
|
// Mock data
|
|
const orderCount = [125, 210, 180]; // 销售订单数
|
|
const playerCount = [80, 120, 95]; // 陪玩人数
|
|
const orderAmount = [3560, 4820, 4150]; // 订单金额
|
|
const agentCount = [15, 22, 18]; // 代理人数
|
|
|
|
const option = {
|
|
color: ['#3D8EFF', '#00C4DF', '#FF9843', '#897DD7'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function(params: any[]) {
|
|
let result = params[0].axisValue + '<br/>';
|
|
params.forEach((item: any) => {
|
|
const value = item.seriesIndex === 2 ?
|
|
'¥' + item.value.toLocaleString() :
|
|
item.value + '个';
|
|
result += `${item.marker} ${item.seriesName}: <strong>${value}</strong><br/>`;
|
|
});
|
|
return result;
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['销售订单数', '陪玩人数', '订单金额', '代理人数'],
|
|
bottom: 10,
|
|
itemGap: 20,
|
|
textStyle: {
|
|
color: '#666'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '15%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: weeks,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E5E5E5'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#666'
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量（个）',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#E5E5E5'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#666',
|
|
formatter: '{value}'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#F5F5F5'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '金额（元）',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#E5E5E5'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#666',
|
|
formatter: '¥{value}'
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '销售订单数',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
barGap: '10%',
|
|
barCategoryGap: '30%',
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#3D8EFF' },
|
|
{ offset: 1, color: '#8BB8FF' }
|
|
])
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}个'
|
|
},
|
|
data: orderCount
|
|
},
|
|
{
|
|
name: '陪玩人数',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#00C4DF' },
|
|
{ offset: 1, color: '#5BD9E9' }
|
|
])
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}个'
|
|
},
|
|
data: playerCount
|
|
},
|
|
{
|
|
name: '订单金额',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#FF9843' },
|
|
{ offset: 1, color: '#FFBB78' }
|
|
])
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '¥{c}'
|
|
},
|
|
data: orderAmount
|
|
},
|
|
{
|
|
name: '代理人数',
|
|
type: 'bar',
|
|
barWidth: 16,
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#897DD7' },
|
|
{ offset: 1, color: '#B4ACEA' }
|
|
])
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}个'
|
|
},
|
|
data: agentCount
|
|
}
|
|
]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
.bar {
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
padding: 16px;
|
|
}
|
|
</style> |