cloud
/
cloud_admin
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11.13 条形图 周月年假数据，原码在同名文件加个Yuan的文件上

Browse Source
master
zz 2 weeks ago
parent eb69219cab
commit 6da0a26b35
4 changed files with 727 additions and 61 deletions
Show Stats Download Patch File Download Diff File

69
src/views/mall/home/components/MemberStatisticsCard.vue
Unescape View File

@ -6,7 +6,7 @@
<!-- 查询条件 --> <!-- 查询条件 -->
<div class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType"> <el-radio-group v-model="timeRangeType">
<!-- <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange"> --> <!-- <el-radio-group v-model="timeRangeType"> -->
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key"> <el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }} {{ value.name }}
</el-radio-button> </el-radio-button>
@ -38,6 +38,10 @@ enum TimeRangeTypeEnum {
} // 日期类型 } // 日期类型
const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天 const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天
const loading = ref(true) // 加载中 const loading = ref(true) // 加载中
const xAxisData=ref([])
const seriesData=ref([])
// 时间范围 Map // 时间范围 Map
const timeRange = new Map() const timeRange = new Map()
// .set(TimeRangeTypeEnum.DAY30, { // .set(TimeRangeTypeEnum.DAY30, {
@ -75,8 +79,9 @@ const timeRange = new Map()
] ]
}) })
/** 图表配置 */ /** 图表配置 */
const eChartOptions = reactive<EChartsOption>({ const eChartOptions = computed(()=>{
grid: { return{
grid: {
left: 20, left: 20,
right: 20, right: 20,
bottom: 20, bottom: 20,
@ -91,7 +96,7 @@ const eChartOptions = reactive<EChartsOption>({
{ {
type: 'category', type: 'category',
// prettier-ignore // prettier-ignore
data: ['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站',] data: xAxisData.value
} }
], ],
yAxis: [ yAxis: [
@ -105,35 +110,19 @@ const eChartOptions = reactive<EChartsOption>({
label:{show:true,position:'top',textStyle:{color:'#000000'}, formatter:function(data){ label:{show:true,position:'top',textStyle:{color:'#000000'}, formatter:function(data){
return data.value+'辆'}}, return data.value+'辆'}},
type: 'bar', type: 'bar',
data: [70,266,210,35,112,98,91] data: seriesData.value
} }
] ]
}) as EChartsOption }
})
const queryparams = ref({ const queryparams = ref({
// startTime: '', // startTime: '',
// endTime: '' // endTime: ''
}) })
/** 时间范围类型单选按钮选中 */ /** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
switch (timeRangeType.value) {
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
}
getlist()
// 发送时间范围选中事件
}
const getlist = async () => { const getlist = async () => {
loading.value = true loading.value = true
@ -282,4 +271,34 @@ onMounted(() => {
// queryparams.value.endTime = getCurrentDateTime() // queryparams.value.endTime = getCurrentDateTime()
// getlist() // getlist()
}) })
watch(()=>timeRangeType.value,(newVal)=>{
switch(newVal){
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=["平泽仓储站","长沙站",'合肥站',"前兴石材厂站","南京站","海口站","石家庄站"];
seriesData.value= [70,266,210,35,112,98,91];
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站'];
seriesData.value= [310,1178,930,155,496,434,403];
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站'];
seriesData.value= [310,11691,9084,263,4960,2170,2418];
break
}
},{
deep:true,
immediate:true
}
)
</script> </script>

285
src/views/mall/home/components/MemberStatisticsCardYuan.vue
Unescape View File

@ -0,0 +1,285 @@
<template>
<el-card shadow="never">
<template #header>
<div class="flex flex-row items-center justify-between">
<CardTitle title="换电车辆统计" />
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }}
</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<!-- 折线图 -->
<Echart :height="300" :options="eChartOptions" />
</el-card>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { EChartsOption } from 'echarts'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
/** 交易量趋势 */
defineOptions({ name: 'TradeTrendCard' })
enum TimeRangeTypeEnum {
DAY30 = 1,
WEEK = 7,
MONTH = 30,
YEAR = 365
} // 日期类型
const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天
const loading = ref(true) // 加载中
// 时间范围 Map
const timeRange = new Map()
// .set(TimeRangeTypeEnum.DAY30, {
// name: '30天',
// series: [
// { name: '订单金额', type: 'bar', smooth: true, data: [] },
// { name: '订单数量', type: 'line', smooth: true, data: [] }
// ]
// })
.set(TimeRangeTypeEnum.WEEK, {
name: '周',
series: [
{ name: '上周', type: 'bar', smooth: true, data: [] },
{ name: '本周', type: 'bar', smooth: true, data: [] },
{ name: '上周', type: 'line', smooth: true, data: [] },
{ name: '本周', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.MONTH, {
name: '月',
series: [
{ name: '上月', type: 'bar', smooth: true, data: [] },
{ name: '本月', type: 'bar', smooth: true, data: [] },
{ name: '上月', type: 'line', smooth: true, data: [] },
{ name: '本月', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.YEAR, {
name: '年',
series: [
{ name: '去年', type: 'bar', smooth: true, data: [] },
{ name: '今年', type: 'bar', smooth: true, data: [] },
{ name: '去年', type: 'line', smooth: true, data: [] },
{ name: '今年', type: 'line', smooth: true, data: [] }
]
})
/** 图表配置 */
const eChartOptions = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true
},
tooltip: {
trigger: 'axis'
},
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '换电车辆',
label:{show:true,position:'top',textStyle:{color:'#000000'}, formatter:function(data){
return data.value+'辆'}},
type: 'bar',
data: []
}
]
}) as EChartsOption
const queryparams = ref({
// startTime: '',
// endTime: ''
})
/** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
switch (timeRangeType.value) {
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
}
getlist()
// 发送时间范围选中事件
}
const getlist = async () => {
loading.value = true
queryparams.value.startTime = convertToTimestamp(queryparams.value.startTime)
queryparams.value.endTime = convertToTimestamp(queryparams.value.endTime)
// 查询数据
const response = await MemberStatisticsApi.getHomeSwapInfo(queryparams.value)
// console.log(response, 'data')
let x_data = []
// 换电营收
let y_data_1 = []
if (response.length === 0) {
return
}
for (let item of response) {
x_data.push(item.stationName)
y_data_1.push(item.swapVehicleCount)
}
eChartOptions.xAxis[0].data = x_data
eChartOptions.series[0].data = y_data_1
loading.value = false
}
/** */
// 获取本周
const getDatesFromStartOfWeekToToday = (todayDate) => {
// 解析传入的日期字符串
const today = new Date(todayDate)
// 确保传入的日期是有效的
if (isNaN(today.getTime())) {
throw new Error('Invalid date')
}
// 获取今天是星期几（0表示星期日，6表示星期六）
const todayIndex = today.getDay()
// 计算本周的开始日期（假设本周从星期一开始）
const startOfWeek = new Date(today)
const offset = todayIndex === 0 ? -6 : 1 - todayIndex // 处理周日和其他星期几
startOfWeek.setDate(today.getDate() + offset)
// 创建一个数组来存储日期
const dates = []
// 遍历从本周开始到今天的所有日期
for (let date = startOfWeek; date <= today; date.setDate(date.getDate() + 1)) {
dates.push(new Date(date).toISOString().split('T')[0]) // 格式化为 YYYY-MM-DD
}
return dates[0] + ' 00:00:00'
}
// 获取本月
const getDatesFromStartOfMonthToToday = (todayDate) => {
// 解析传入的日期字符串
const today = new Date(todayDate)
// 确保传入的日期是有效的
if (isNaN(today.getTime())) {
throw new Error('Invalid date')
}
// 获取当前月份和年份
const year = today.getFullYear()
const month = today.getMonth() // 0表示一月，11表示十二月
// 计算本月的第一天
const startOfMonth = new Date(year, month, 1)
// 创建一个数组来存储日期
const dates = []
// 遍历从本月开始到今天的所有日期
for (let date = startOfMonth; date <= today; date.setDate(date.getDate() + 1)) {
dates.push(new Date(date).toISOString().split('T')[0]) // 格式化为 YYYY-MM-DD
}
return dates[0] + ' 00:00:00'
}
// 获取今年第一天
const getFirstDayOfYear = (dateString) => {
// 解析传入的日期字符串
const date = new Date(dateString)
// 确保传入的日期是有效的
if (isNaN(date.getTime())) {
throw new Error('Invalid date')
}
// 获取当前年份
const year = date.getFullYear()
// 计算今年的第一天
const firstDayOfYear = new Date(year, 0, 1) // 0表示1月
// 格式化为 YYYY-MM-DD hh:mm:ss
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以+1
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
return formatDate(firstDayOfYear)
}
const getCurrentDateTime = () => {
const now = new Date()
// 格式化为 YYYY-MM-DD hh:mm:ss
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
return formatDate(now)
}
const convertToTimestamp = (timeString) => {
// 创建一个 Date 对象
const date = new Date(timeString)
// 检查日期是否有效
if (isNaN(date.getTime())) {
throw new Error('无效的时间字符串')
}
// 返回时间戳
return date.getTime()
}
/** 初始化 **/
onMounted(() => {
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
getlist()
})
</script>

85
src/views/mall/home/components/TradeTrendCard.vue
Unescape View File

@ -5,8 +5,7 @@
<CardTitle title="充换电站信息统计" /> <CardTitle title="充换电站信息统计" />
<!-- 查询条件 --> <!-- 查询条件 -->
<div class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType"> <el-radio-group v-model="timeRangeType" >
<!-- <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange"> -->
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key"> <el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }} {{ value.name }}
</el-radio-button> </el-radio-button>
@ -38,6 +37,11 @@ enum TimeRangeTypeEnum {
} // 日期类型 } // 日期类型
const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天 const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天
const loading = ref(true) // 加载中 const loading = ref(true) // 加载中
const xAxisData=ref([])
const seriesData1=ref([])
const seriesData2=ref([])
// const
// 时间范围 Map // 时间范围 Map
const timeRange = new Map() const timeRange = new Map()
// .set(TimeRangeTypeEnum.DAY30, { // .set(TimeRangeTypeEnum.DAY30, {
@ -50,9 +54,6 @@ const timeRange = new Map()
.set(TimeRangeTypeEnum.WEEK, { .set(TimeRangeTypeEnum.WEEK, {
name: '周', name: '周',
series: [ series: [
// { name: '充换电营收', type: 'bar', smooth: true, data: [ 29792.40,18646.14,15153.60,14488.05,7735.55,6667.58,7035.60] },
// { name: '充换电量', type: 'line', smooth: true, data: [ 35636.84,18949.33,18126.32,16062.14,9609.38,7620.10,7680.79] }
// ]
{ name: '上周', type: 'bar', smooth: true, data: [] }, { name: '上周', type: 'bar', smooth: true, data: [] },
{ name: '本周', type: 'bar', smooth: true, data: [] }, { name: '本周', type: 'bar', smooth: true, data: [] },
{ name: '上周', type: 'line', smooth: true, data: [] }, { name: '上周', type: 'line', smooth: true, data: [] },
@ -78,7 +79,8 @@ const timeRange = new Map()
] ]
}) })
/** 图表配置 */ /** 图表配置 */
const eChartOptions = reactive<EChartsOption>({ const eChartOptions =computed(()=>{
return {
grid: { grid: {
left: 20, left: 20,
right: 20, right: 20,
@ -98,7 +100,7 @@ const eChartOptions = reactive<EChartsOption>({
{ {
type: 'category', type: 'category',
// prettier-ignore // prettier-ignore
data: ['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站' ] data: xAxisData.value
} }
], ],
yAxis: [ yAxis: [
@ -114,7 +116,7 @@ const eChartOptions = reactive<EChartsOption>({
label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){ label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){
return data.value+'元' return data.value+'元'
}}, }},
data: [ 29792.40, 18646.14, 15153.60,14488.05,7735.55,6667.58,7035.60], data: seriesData1.value,
markPoint: { markPoint: {
data: [ data: [
// { type: 'max', name: 'Max' }, // { type: 'max', name: 'Max' },
@ -130,7 +132,7 @@ const eChartOptions = reactive<EChartsOption>({
type: 'bar', type: 'bar',
label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){ label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){
return data.value+'kwh'}}, return data.value+'kwh'}},
data: [ 35636.84,18949.33,18126.32,16062.14,9609.38,7620.10,7680.79], data:seriesData2.value,
markPoint: { markPoint: {
data: [ data: [
// { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, // { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
@ -156,32 +158,14 @@ const eChartOptions = reactive<EChartsOption>({
} }
} }
] ]
}) as EChartsOption }
})
const queryparams = ref({ const queryparams = ref({
startTime: '', startTime: '',
endTime: '' endTime: ''
}) })
/** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
switch (timeRangeType.value) {
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
}
getlist()
// 发送时间范围选中事件
}
const convertToTimestamp = (timeString) => { const convertToTimestamp = (timeString) => {
// 创建一个 Date 对象 // 创建一个 Date 对象
@ -337,8 +321,43 @@ const getCurrentDateTime = () => {
/** 初始化 **/ /** 初始化 **/
onMounted(() => { onMounted(() => {
// queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date()) // queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
// queryparams.value.endTime = getCurrentDateTime() // queryparams.value.endTime = getCurrentDateTime()
// getlist() // getlist()
})
watch(()=>timeRangeType.value,(newVal)=>{
switch (newVal) {
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站'];
seriesData1.value= [ 29792.40,18646.14,15153.60,14488.05,7735.55,6667.58,7035.60];
seriesData2.value=[ 35636.84,18949.33,18126.32,16062.14,9609.38,7620.10,7680.79];
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站'];
seriesData1.value=[124066.96,83359.23,65376.96,59176.53,34983.17,29397.98,29080.48];
seriesData2.value=[ 145447.78,100797.14,72160.00,66490.48,35843.41,34144.00,33046.00];
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
xAxisData.value=['平泽仓储站','长沙站','合肥站','前兴石材厂站','南京站','海口站','石家庄站']
seriesData1.value=[124066.96,827285.54,638616.00,100600.10,349831.68,146989.92,174482.88];
seriesData2.value=[149839.32,932678.17,762071.60,119762.03,434573.52,158736.41,179140.53];
break
}
},{
deep:true,
immediate:true
}) })
</script> </script>

343
src/views/mall/home/components/TradeTrendCardYuan.vue
Unescape View File

@ -0,0 +1,343 @@
<template>
<el-card shadow="never">
<template #header>
<div class="flex flex-row items-center justify-between">
<CardTitle title="充换电站信息统计" />
<!-- 查询条件 -->
<div class="flex flex-row items-center gap-2">
<el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
<el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
{{ value.name }}
</el-radio-button>
</el-radio-group>
</div>
</div>
</template>
<!-- 折线图 -->
<Echart :height="300" :options="eChartOptions" />
</el-card>
</template>
<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { color, EChartsOption } from 'echarts'
import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { CardTitle } from '@/components/Card'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
/** 交易量趋势 */
defineOptions({ name: 'TradeTrendCard' })
enum TimeRangeTypeEnum {
DAY30 = 1,
WEEK = 7,
MONTH = 30,
YEAR = 365
} // 日期类型
const timeRangeType = ref(TimeRangeTypeEnum.MONTH) // 日期快捷选择按钮, 默认30天
const loading = ref(true) // 加载中
// 时间范围 Map
const timeRange = new Map()
// .set(TimeRangeTypeEnum.DAY30, {
// name: '30天',
// series: [
// { name: '订单金额', type: 'bar', smooth: true, data: [] },
// { name: '订单数量', type: 'line', smooth: true, data: [] }
// ]
// })
.set(TimeRangeTypeEnum.WEEK, {
name: '周',
series: [
// ]
{ name: '上周', type: 'bar', smooth: true, data: [] },
{ name: '本周', type: 'bar', smooth: true, data: [] },
{ name: '上周', type: 'line', smooth: true, data: [] },
{ name: '本周', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.MONTH, {
name: '月',
series: [
{ name: '上月', type: 'bar', smooth: true, data: [] },
{ name: '本月', type: 'bar', smooth: true, data: [] },
{ name: '上月', type: 'line', smooth: true, data: [] },
{ name: '本月', type: 'line', smooth: true, data: [] }
]
})
.set(TimeRangeTypeEnum.YEAR, {
name: '年',
series: [
{ name: '去年', type: 'bar', smooth: true, data: [] },
{ name: '今年', type: 'bar', smooth: true, data: [] },
{ name: '去年', type: 'line', smooth: true, data: [] },
{ name: '今年', type: 'line', smooth: true, data: [] }
]
})
/** 图表配置 */
const eChartOptions = reactive<EChartsOption>({
grid: {
left: 20,
right: 20,
bottom: 20,
top: 80,
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
// data: ['充换电营收', '充换电量', '换电次数']
data: ['充换电营收', '充换电量']
},
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: [ ]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '充换电营收',
type: 'bar',
label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){
return data.value+'元'
}},
data: [ 29792.40, 18646.14, 15153.60,14488.05,7735.55,6667.58,7035.60],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: '充换电量',
type: 'bar',
label:{show:true,position:'top',textStyle:{color:'#000000'},formatter:function(data){
return data.value+'kwh'}},
data: [],
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' }]
}
},
{
name: '换电次数',
type: 'bar',
data: [],
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' }]
}
}
]
}) as EChartsOption
const queryparams = ref({
startTime: '',
endTime: ''
})
/** 时间范围类型单选按钮选中 */
const handleTimeRangeTypeChange = async () => {
// 设置时间范围
switch (timeRangeType.value) {
case TimeRangeTypeEnum.WEEK:
queryparams.value.startTime = getDatesFromStartOfWeekToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.MONTH:
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
case TimeRangeTypeEnum.YEAR:
queryparams.value.startTime = getFirstDayOfYear(new Date())
queryparams.value.endTime = getCurrentDateTime()
break
}
getlist()
// 发送时间范围选中事件
}
const convertToTimestamp = (timeString) => {
// 创建一个 Date 对象
const date = new Date(timeString)
// 检查日期是否有效
if (isNaN(date.getTime())) {
throw new Error('无效的时间字符串')
}
// 返回时间戳
return date.getTime()
}
const getlist = async () => {
loading.value = true
queryparams.value.startTime = convertToTimestamp(queryparams.value.startTime)
queryparams.value.endTime = convertToTimestamp(queryparams.value.endTime)
// 查询数据
const response = await MemberStatisticsApi.getHomeSwapInfo(queryparams.value)
console.log(response,"shuju")
let x_data = []
// 充换电营收
let y_data_1 = []
// 充换电量
let y_data_2 = []
// 换电次数
// let y_data_3 = []
if (response.length == 0) {
return
}
for (let item of response) {
// console.log(item,'item');
x_data.push(item.stationName)
y_data_1.push(item.swapRevenue / 100)
y_data_2.push(item.swapElec)
// y_data_3.push(item.swapCount)
}
eChartOptions.xAxis[0].data = x_data
eChartOptions.series[0].data = y_data_1
eChartOptions.series[1].data = y_data_2
// eChartOptions.series[2].data = y_data_3
// console.log(x_data, 'x_data')
// console.log(y_data_1, 'y_data_1')
// console.log(y_data_2, 'y_data_2')
loading.value = false
}
// 获取本周
const getDatesFromStartOfWeekToToday = (todayDate) => {
// 解析传入的日期字符串
const today = new Date(todayDate)
// 确保传入的日期是有效的
if (isNaN(today.getTime())) {
throw new Error('Invalid date')
}
// 获取今天是星期几（0表示星期日，6表示星期六）
const todayIndex = today.getDay()
// 计算本周的开始日期（假设本周从星期一开始）
const startOfWeek = new Date(today)
const offset = todayIndex === 0 ? -6 : 1 - todayIndex // 处理周日和其他星期几
startOfWeek.setDate(today.getDate() + offset)
// 创建一个数组来存储日期
const dates = []
// 遍历从本周开始到今天的所有日期
for (let date = startOfWeek; date <= today; date.setDate(date.getDate() + 1)) {
dates.push(new Date(date).toISOString().split('T')[0]) // 格式化为 YYYY-MM-DD
}
return dates[0] + ' 00:00:00'
}
// 获取本月
const getDatesFromStartOfMonthToToday = (todayDate) => {
// 解析传入的日期字符串
const today = new Date(todayDate)
// 确保传入的日期是有效的
if (isNaN(today.getTime())) {
throw new Error('Invalid date')
}
// 获取当前月份和年份
const year = today.getFullYear()
const month = today.getMonth() // 0表示一月，11表示十二月
// 计算本月的第一天
const startOfMonth = new Date(year, month, 1)
// 创建一个数组来存储日期
const dates = []
// 遍历从本月开始到今天的所有日期
for (let date = startOfMonth; date <= today; date.setDate(date.getDate() + 1)) {
dates.push(new Date(date).toISOString().split('T')[0]) // 格式化为 YYYY-MM-DD
}
return dates[0] + ' 00:00:00'
}
// 获取今年第一天
const getFirstDayOfYear = (dateString) => {
// 解析传入的日期字符串
const date = new Date(dateString)
// 确保传入的日期是有效的
if (isNaN(date.getTime())) {
throw new Error('Invalid date')
}
// 获取当前年份
const year = date.getFullYear()
// 计算今年的第一天
const firstDayOfYear = new Date(year, 0, 1) // 0表示1月
// 格式化为 YYYY-MM-DD hh:mm:ss
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以+1
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
return formatDate(firstDayOfYear)
}
const getCurrentDateTime = () => {
const now = new Date()
// 格式化为 YYYY-MM-DD hh:mm:ss
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
return formatDate(now)
}
/** 初始化 **/
onMounted(() => {
queryparams.value.startTime = getDatesFromStartOfMonthToToday(new Date())
queryparams.value.endTime = getCurrentDateTime()
getlist()
})
</script>
Write Preview
Loading…
Cancel
Save