✨ 开放数据
This commit is contained in:
ronger
parent
c7c227af81
commit
ec20b7391e
@ -24,6 +24,7 @@
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="open-data">开放数据</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -250,6 +251,11 @@ export default {
|
||||
case 'taobao':
|
||||
window.open("https://rymcu.taobao.com?utm_source=rymcu.com");
|
||||
break;
|
||||
case 'open-data':
|
||||
_ts.$router.push({
|
||||
path: '/open-data'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
_ts.$router.push(
|
||||
{
|
||||
|
||||
181
pages/open-data.vue
Normal file
181
pages/open-data.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<el-row class="article__wrapper">
|
||||
<el-col>
|
||||
<el-card>
|
||||
<div class="card-body d-flex flex-column article">
|
||||
<h1>📊 开放数据 Open Data</h1>
|
||||
<el-col>
|
||||
<p>
|
||||
RYMCU 致力于建造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。现在，他也是一个开放创业项目了，就是说关于 RYMCU 的数据都是开放透明的，包括流量等等信息。
|
||||
</p>
|
||||
<p>
|
||||
如果你对 RYMCU 有任何兴趣或想法，都可以扫右侧二维码加我微信交流（请备注：RYMCU）
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-row :gutter="8" class="text-center">
|
||||
<el-col :span="6">
|
||||
<el-card style="max-height: 210px;">
|
||||
<el-col class="mt-2rem dashboard-number">{{ dashboard.countUserNum }}</el-col>
|
||||
<el-col class="mt-2rem">总用户数</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card style="max-height: 210px;">
|
||||
<el-col class="mt-2rem dashboard-number">{{ dashboard.countArticleNum }}</el-col>
|
||||
<el-col class="mt-2rem">总文章数</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card style="max-height: 210px;">
|
||||
<el-image :src="gzh"></el-image>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col class="mt-2rem">
|
||||
<div id="lastThirtyDays" style="width: 100%;height: 500px;"></div>
|
||||
</el-col>
|
||||
<el-col class="mt-2rem">
|
||||
<div id="lastThirtyDays2" style="width: 100%;height: 500px;"></div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {mapState} from 'vuex';
|
||||
import echarts from 'echarts';
|
||||
import gzh from "assets/rymcugzh.jpg";
|
||||
|
||||
Vue.prototype.$echarts = echarts;
|
||||
export default {
|
||||
name: "openData",
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('open-data/fetchLastThirtyDays', params)
|
||||
.catch(err => error({statusCode: 404})),
|
||||
store.dispatch('open-data/fetchDashboard', params)
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
dashboard: state => state['open-data'].data,
|
||||
lastThirtyDays: state => state['open-data'].lastThirtyDays
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gzh: gzh
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initLastThirtyDaysCharts(data) {
|
||||
let myChart = this.$echarts.init(document.getElementById('lastThirtyDays'));
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
text: '浏览量（根据页面访问次数统计）'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["浏览量"]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.dates
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '浏览量',
|
||||
data: data.visits,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {}
|
||||
}]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
let myChart2 = this.$echarts.init(document.getElementById('lastThirtyDays2'));
|
||||
// 指定图表的配置项和数据
|
||||
let option2 = {
|
||||
title: {
|
||||
text: '访客数（根据访问 IP 统计）'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ["访客数"]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.dates
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访客数',
|
||||
data: data.visitIps,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {}
|
||||
}]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart2.setOption(option2);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("setActiveMenu", "open-data");
|
||||
this.initLastThirtyDaysCharts(this.lastThirtyDays)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.article__wrapper {
|
||||
max-width: 980px;
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
box-sizing: border-box;;
|
||||
}
|
||||
|
||||
.mt-2rem {
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.dashboard-number {
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
79
store/open-data.js
Normal file
79
store/open-data.js
Normal file
@ -0,0 +1,79 @@
|
||||
import {DASHBOARD_API_PATH} from "@/store/dashboard";
|
||||
|
||||
/**
|
||||
* Created on 2022/3/14 13:54.
|
||||
* @author ronger
|
||||
* @email ronger-x@outlook.com
|
||||
*/
|
||||
export const OPEN_DATA_API_PATH = '/api/open-data'
|
||||
|
||||
|
||||
const getDefaultDashboardData = () => {
|
||||
return {
|
||||
dashboard: {}
|
||||
}
|
||||
}
|
||||
|
||||
const getDefaultLastThirtyDaysData = () => {
|
||||
return {
|
||||
dates: [],
|
||||
visits: [],
|
||||
visitIps: []
|
||||
}
|
||||
}
|
||||
|
||||
export const state = () => {
|
||||
return {
|
||||
fetching: false,
|
||||
data: getDefaultDashboardData(),
|
||||
lastThirtyDays: getDefaultLastThirtyDaysData(),
|
||||
history: getDefaultLastThirtyDaysData()
|
||||
}
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
updateDashboardFetching(state, action) {
|
||||
state.fetching = action
|
||||
},
|
||||
updateDashboardData(state, action) {
|
||||
state.data = action
|
||||
},
|
||||
updateLastThirtyDaysData(state, action) {
|
||||
state.lastThirtyDays = action
|
||||
}
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
fetchDashboard({commit}, params = {}) {
|
||||
// 清空已有数据
|
||||
commit('updateDashboardData', getDefaultDashboardData())
|
||||
commit('updateDashboardFetching', true)
|
||||
|
||||
return this.$axios
|
||||
.$get(`${OPEN_DATA_API_PATH}/dashboard`)
|
||||
.then(response => {
|
||||
commit('updateDashboardFetching', false);
|
||||
commit('updateDashboardData', response);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
commit('updateDashboardFetching', false);
|
||||
});
|
||||
},
|
||||
fetchLastThirtyDays({commit}, params = {}) {
|
||||
// 清空已有数据
|
||||
commit('updateLastThirtyDaysData', getDefaultLastThirtyDaysData())
|
||||
commit('updateDashboardFetching', true)
|
||||
|
||||
return this.$axios
|
||||
.$get(`${OPEN_DATA_API_PATH}/last-thirty-days`)
|
||||
.then(response => {
|
||||
commit('updateDashboardFetching', false);
|
||||
commit('updateLastThirtyDaysData', response);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
commit('updateDashboardFetching', false);
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user