80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { Echart } from '@/components/Echart';
|
|
import { getReqChartBy30 } from '@/api/new-ai/statictic';
|
|
import {dayjs} from 'element-plus'
|
|
const options = ref({});
|
|
|
|
onMounted(async () => {
|
|
const data = await getReqChartBy30();
|
|
const xData: any = [];
|
|
const yData: any = [];
|
|
data.forEach((i: any) => {
|
|
xData.push(dayjs(i.date).format('YYYY-MM-DD'));
|
|
yData.push(i.tokens);
|
|
});
|
|
|
|
options.value = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#019680',
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: xData,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid',
|
|
color: 'rgba(226,226,226,0.5)',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: true,
|
|
areaStyle: {
|
|
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
grid: { left: '1%', right: '1%', top: '2%', bottom: 0, containLabel: true },
|
|
series: [
|
|
{
|
|
smooth: true,
|
|
data: yData,
|
|
type: 'line',
|
|
areaStyle: {},
|
|
itemStyle: {
|
|
color: '#5ab1ef',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3 class="my-2 mb-6 text-lg">近30天请求汇总</h3>
|
|
<Echart :options="options" height="240px" />
|
|
</div>
|
|
</template>
|