Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yubinCloud
fairy-wiki
提交
1cbd090a
F
fairy-wiki
项目概览
yubinCloud
/
fairy-wiki
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
F
fairy-wiki
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
1cbd090a
编写于
4月 30, 2021
作者:
yubinCloud
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
11-9 展示 30 天趋势图
上级
fcd08cc4
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
83 addition
and
16 deletion
+83
-16
src/main/java/io/github/yubincloud/fairywiki/dto/resp/StatisticRespDto.java
...ithub/yubincloud/fairywiki/dto/resp/StatisticRespDto.java
+3
-0
web/src/components/the-welcome.vue
web/src/components/the-welcome.vue
+80
-16
未找到文件。
src/main/java/io/github/yubincloud/fairywiki/dto/resp/StatisticRespDto.java
浏览文件 @
1cbd090a
package
io.github.yubincloud.fairywiki.dto.resp
;
import
com.fasterxml.jackson.annotation.JsonFormat
;
import
lombok.Data
;
import
java.util.Date
;
@Data
public
class
StatisticRespDto
{
@JsonFormat
(
pattern
=
"MM-dd"
,
timezone
=
"GMT+8"
)
private
Date
date
;
private
int
viewCount
;
...
...
web/src/components/the-welcome.vue
浏览文件 @
1cbd090a
...
...
@@ -136,7 +136,10 @@ export default defineComponent({
const
statistic
=
ref
();
statistic
.
value
=
{};
const
getStatistic
=
()
=>
{
/**
* 生成昨天和今天的数据统计表格
*/
const
genTwoDayStatisticTable
=
()
=>
{
axios
.
get
(
'
/ebook-snapshot/get-statistic
'
).
then
((
response
)
=>
{
const
respData
=
response
.
data
;
if
(
respData
.
code
===
0
)
{
...
...
@@ -158,28 +161,89 @@ export default defineComponent({
});
};
const
testEcharts
=
()
=>
{
const
chart
=
echarts
.
init
(
document
.
getElementById
(
'
chart
'
)
as
HTMLCanvasElement
);
chart
.
setOption
({
const
init30DayEcharts
=
(
list
:
any
)
=>
{
// 基于准备好的dom,初始化echarts实例
const
statisticChart
=
echarts
.
init
(
document
.
getElementById
(
'
chart
'
)
as
HTMLCanvasElement
);
const
xAxis
=
[];
const
seriesView
=
[];
const
seriesVote
=
[];
for
(
let
i
=
0
;
i
<
list
.
length
;
i
++
)
{
const
record
=
list
[
i
];
xAxis
.
push
(
record
.
date
);
seriesView
.
push
(
record
.
viewIncrease
);
seriesVote
.
push
(
record
.
voteIncrease
);
}
// 指定图表的配置项和数据
const
option
=
{
title
:
{
text
:
'
ECharts 入门示例
'
text
:
'
30天趋势图
'
},
tooltip
:
{
trigger
:
'
axis
'
},
legend
:
{
data
:
[
'
总阅读量
'
,
'
总点赞量
'
]
},
grid
:
{
left
:
'
1%
'
,
right
:
'
3%
'
,
bottom
:
'
3%
'
,
containLabel
:
true
},
toolbox
:
{
feature
:
{
saveAsImage
:
{}
}
},
tooltip
:
{},
xAxis
:
{
data
:
[
'
衬衫
'
,
'
羊毛衫
'
,
'
雪纺衫
'
,
'
裤子
'
,
'
高跟鞋
'
,
'
袜子
'
]
type
:
'
category
'
,
boundaryGap
:
false
,
data
:
xAxis
},
yAxis
:
{},
series
:
[{
name
:
'
销量
'
,
type
:
'
bar
'
,
data
:
[
5
,
20
,
36
,
10
,
10
,
20
]
}]
yAxis
:
{
type
:
'
value
'
},
series
:
[
{
name
:
'
总阅读量
'
,
type
:
'
line
'
,
// stack: '总量', 不堆叠
data
:
seriesView
,
smooth
:
true
},
{
name
:
'
总点赞量
'
,
type
:
'
line
'
,
// stack: '总量', 不堆叠
data
:
seriesVote
,
smooth
:
true
}
]
};
// 使用刚指定的配置项和数据显示图表。
statisticChart
.
setOption
(
option
);
};
/**
* 生成近30天的数据统计图
*/
const
gen30DayStatisticChart
=
()
=>
{
axios
.
get
(
'
/ebook-snapshot/get-30-statistic
'
).
then
((
response
)
=>
{
const
respData
=
response
.
data
;
if
(
respData
.
code
===
0
)
{
const
statisticList
=
respData
.
data
;
init30DayEcharts
(
statisticList
);
}
});
}
};
onMounted
(()
=>
{
ge
tStatistic
();
testEcharts
();
ge
nTwoDayStatisticTable
();
gen30DayStatisticChart
();
});
return
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录