182 lines
4.8 KiB
Vue
182 lines
4.8 KiB
Vue
<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>
|