|
|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="flex flex-row items-center justify-between">
|
|
|
|
|
<CardTitle title="交易量趋势" />
|
|
|
|
|
<CardTitle title="换电站信息统计" />
|
|
|
|
|
<!-- 查询条件 -->
|
|
|
|
|
<div class="flex flex-row items-center gap-2">
|
|
|
|
|
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
|
|
|
|
|
@ -81,62 +81,69 @@ const eChartOptions = reactive<EChartsOption>({
|
|
|
|
|
top: 80,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: 50,
|
|
|
|
|
data: []
|
|
|
|
|
data: ['换电营收', '换电量', '换电次数']
|
|
|
|
|
},
|
|
|
|
|
series: [],
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
// 数据区域缩放
|
|
|
|
|
dataZoom: {
|
|
|
|
|
yAxisIndex: false // Y轴不缩放
|
|
|
|
|
},
|
|
|
|
|
brush: {
|
|
|
|
|
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
|
|
|
|
|
},
|
|
|
|
|
saveAsImage: { show: true, name: '订单量趋势' } // 保存为图片
|
|
|
|
|
calculable: true,
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
// prettier-ignore
|
|
|
|
|
data: ['内乡站', '奇瑞智能换电站', '广化站', '长治站', '常熟站', '工博站', '阳泉站', '银滩站', '鹿山站', '新世纪站']
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross'
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '换电营收',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0],
|
|
|
|
|
markPoint: {
|
|
|
|
|
data: [
|
|
|
|
|
{ type: 'max', name: 'Max' },
|
|
|
|
|
{ type: 'min', name: 'Min' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markLine: {
|
|
|
|
|
data: [{ type: 'average', name: 'Avg' }]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
padding: [5, 10]
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
inverse: true,
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
{
|
|
|
|
|
name: '换电量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
|
|
|
|
|
markPoint: {
|
|
|
|
|
data: [
|
|
|
|
|
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
|
|
|
|
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markLine: {
|
|
|
|
|
data: [{ type: 'average', name: 'Avg' }]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [],
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: (date: string) => {
|
|
|
|
|
switch (timeRangeType.value) {
|
|
|
|
|
case TimeRangeTypeEnum.DAY30:
|
|
|
|
|
return formatDate(date, 'MM-DD')
|
|
|
|
|
case TimeRangeTypeEnum.WEEK:
|
|
|
|
|
let weekDay = formatDate(date, 'ddd')
|
|
|
|
|
if (weekDay == '0') weekDay = '日'
|
|
|
|
|
return '周' + weekDay
|
|
|
|
|
case TimeRangeTypeEnum.MONTH:
|
|
|
|
|
return formatDate(date, 'D')
|
|
|
|
|
case TimeRangeTypeEnum.YEAR:
|
|
|
|
|
return formatDate(date, 'M') + '月'
|
|
|
|
|
default:
|
|
|
|
|
return date
|
|
|
|
|
}
|
|
|
|
|
{
|
|
|
|
|
name: '换电次数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
|
|
|
|
|
markPoint: {
|
|
|
|
|
data: [
|
|
|
|
|
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
|
|
|
|
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markLine: {
|
|
|
|
|
data: [{ type: 'average', name: 'Avg' }]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}) as EChartsOption
|
|
|
|
|
|
|
|
|
|
/** 时间范围类型单选按钮选中 */
|
|
|
|
|
|
