wordpress网站重新安装插件,网站建设费属于研发费用吗,阜阳哪里做网站,虚拟主机购买网站目录
编辑 一、今日目标
二、新增the-welcome组件
2.1 template
2.2 script
2.2.1 getStatistic
2.2.2 get30DayStatistic 一、今日目标 上篇文章链接#xff1a;【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客 今天就要实现最后的东西了#xff0c…
目录
编辑 一、今日目标
二、新增the-welcome组件
2.1 template
2.2 script
2.2.1 getStatistic
2.2.2 get30DayStatistic 一、今日目标 上篇文章链接【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客 今天就要实现最后的东西了就是欢迎页面的展示在这个页面我展示了总浏览量还有当日的浏览量以及过去三十日的浏览量信息但是我的数据都是自己模拟的所以没有那么多的信息并且我还改出来了不少的错误大家知道这个道理就可以。 这一部分要实现数据展览还有点赞功能。 二、新增the-welcome组件 2.1 template templatespan欢迎/spandiva-rowa-col :span12a-carda-rowa-col :span12a-statistic title总阅读量 :valuestatistic.viewCounttemplate #suffixUserOutlined //template/a-statistic/a-cola-col :span12a-statistic title总点赞量 :valuestatistic.voteCounttemplate #suffixlike-outlined //template/a-statistic/a-col/a-row/a-card/a-cola-col :span12a-carda-rowa-col :span12a-statistic title今日增长阅读 :valuestatistic.todayViewCount stylemargin-right: 50pxtemplate #suffixUserOutlined //template/a-statistic/a-cola-col :span12a-statistic title今日增长点赞 :valuestatistic.todayVoteCounttemplate #suffixlike-outlined //template/a-statistic/a-col/a-row/a-card/a-col/a-rowbrbra-rowa-col :span24 idmain-coldiv idmain stylewidth: 100%;height:300px;/div/a-col/a-row/div
/template2.2 script 这一部分有两个方法需要说一下。 2.2.1 getStatistic statistic是用来存储浏览量和点赞量数据的这里总共需要四个数据。 viewCount总浏览量voteCount总点赞量todayViewCount今日浏览量todayVoteCount今日点赞量 const getStatistic () {axios.get(/ebook-snapshot/get-statistic).then((response) {const data response.data;if (data.success) {const statisticResp data.content;statistic.value.viewCount statisticResp[0].viewCount;statistic.value.voteCount statisticResp[0].voteCount;statistic.value.todayViewCount statisticResp[0].viewIncrease;statistic.value.todayVoteCount statisticResp[0].voteIncrease;}});}; 2.2.2 get30DayStatistic 这个也很好理解我们从后端调出来每一天的总浏览量和总点赞数还有当日的浏览量和点赞数之后以日期为x轴当日阅读数为y轴构建echarts图标。 const get30DayStatistic () {axios.get(/ebook-snapshot/get-30-statistic).then((response) {const data response.data;if (data.success) {const statisticList data.content;init30DayEcharts(statisticList)}});};const init30DayEcharts (list: any) {const mainDom document.getElementById(main-col);if (mainDom) {mainDom.innerHTML div idmain stylewidth: 100%;height:300px;/div;}// 基于准备好的dom初始化echarts实例const myChart echarts.init(document.getElementById(main));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);}
。。。。。。 整体代码如下。 script langtsimport { defineComponent, ref, onMounted } from vueimport axios from axios;declare let echarts: any;export default defineComponent({name: the-welcome,setup () {const statistic ref();statistic.value {};const getStatistic () {axios.get(/ebook-snapshot/get-statistic).then((response) {const data response.data;if (data.success) {const statisticResp data.content;statistic.value.viewCount statisticResp[0].viewCount;statistic.value.voteCount statisticResp[0].voteCount;statistic.value.todayViewCount statisticResp[0].viewIncrease;statistic.value.todayVoteCount statisticResp[0].voteIncrease;}});};const init30DayEcharts (list: any) {const mainDom document.getElementById(main-col);if (mainDom) {mainDom.innerHTML div idmain stylewidth: 100%;height:300px;/div;}// 基于准备好的dom初始化echarts实例const myChart echarts.init(document.getElementById(main));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: 30天趋势图},tooltip: {trigger: axis},legend: {data: [总阅读量, 总点赞量]},grid: {left: 1%,right: 3%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: category,boundaryGap: false,data: xAxis},yAxis: {type: value},series: [{name: 总阅读量,type: line,data: seriesView,smooth: true},{name: 总点赞量,type: line,data: seriesVote,smooth: true}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);};const get30DayStatistic () {axios.get(/ebook-snapshot/get-30-statistic).then((response) {const data response.data;if (data.success) {const statisticList data.content;init30DayEcharts(statisticList)}});};onMounted(() {getStatistic();get30DayStatistic();});return {statistic}}});
/script 这一部分的代码不难我就不多说这一部分的代码了。
