更新页面
This commit is contained in:
4443
package-lock.json
generated
4443
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,8 +11,10 @@
|
||||
"axios": "^1.4.0",
|
||||
"codemirror": "^6.0.1",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.2",
|
||||
"element-tiptap": "^1.27.1",
|
||||
"element-ui": "^2.15.13",
|
||||
"json-server": "^0.17.3",
|
||||
"vue": "^2.6.14",
|
||||
"vue-cookie": "^1.1.4",
|
||||
"vue-router": "^3.5.1",
|
||||
|
||||
@@ -6,26 +6,34 @@
|
||||
<el-page-header @back="goBack" style="justify-content:left;display: flex;">
|
||||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||||
<div slot="content" class="test" style="font-size:23px;font-weight: 600;">
|
||||
<div>(2023)年(1)季度语言排行榜</div>
|
||||
<div>(2023)年度语言GitHub星数排行榜</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
<div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
|
||||
<el-card class="box-card">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between">
|
||||
<el-select v-model="selectedValue" style="width: 7vw">
|
||||
<el-option label="编程语言" value="1"></el-option>
|
||||
<el-option label="服务器" value="2"></el-option>
|
||||
<el-option label="数据库" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-cascader @change="FreshPage(selectedValue)" v-model="selectedValue" :options="options" placeholder="选择分类"
|
||||
:show-all-levels="false" style="width: 10vw"></el-cascader>
|
||||
<el-image fit="fill" :src="require('@/assets/svg/logo-tiobe.svg')" style="width:8vw;height: 4vh;display: flex;flex-direction: row;justify-content: flex-end"></el-image>
|
||||
<el-select v-model="selectedValueByYear" style="width: 7vw">
|
||||
<el-option label="2023" value="2023"></el-option>
|
||||
<el-option label="2022" value="2022"></el-option>
|
||||
<el-select placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
|
||||
<el-option
|
||||
v-for="(n,index) in 12"
|
||||
:key="index"
|
||||
:label="index + 2012"
|
||||
:value="index"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card" style="margin-top: 20px">
|
||||
<el-switch
|
||||
style="margin-left:75%"
|
||||
v-model="value1"
|
||||
active-text="月度趋势"
|
||||
inactive-text="年度统计">
|
||||
</el-switch>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
@@ -44,6 +52,8 @@
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button @click="test()"></el-button>
|
||||
<div id="EChart" style="width: 600px; height: 300px;"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,15 +62,69 @@
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
import axios from 'axios'; // 安装axios后引入
|
||||
import Vue from "vue";
|
||||
Vue.prototype.$axios = axios; // 将axios挂载到原型上方便使用
|
||||
import echarts from 'echarts';
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
export default {
|
||||
name: "RankingComponent",
|
||||
components: {RightTools},
|
||||
data(){
|
||||
return{
|
||||
selectedValue:'1',
|
||||
// 星数数据：
|
||||
starNum:[],
|
||||
// 星数数据按年份：
|
||||
starNumByYear:[],
|
||||
// 星数数据按季度趋势：
|
||||
starNumByMon:[],
|
||||
// 项目拉取数：
|
||||
pullNum:[],
|
||||
// 星数数据按年份：
|
||||
pullNumByYear:[],
|
||||
// 星数数据按季度趋势：
|
||||
pullNumByMon:[],
|
||||
// 推送项目数：
|
||||
pushNum:[],
|
||||
// 星数数据按年份：
|
||||
pushNumByYear:[],
|
||||
// 星数数据按季度趋势：
|
||||
pushNumByMon:[],
|
||||
// 协议数：
|
||||
licensesNum:[],
|
||||
// 星数数据按年份：
|
||||
licensesNumByYear:[],
|
||||
// 星数数据按季度趋势：
|
||||
licensesNumByMon:[],
|
||||
// 榜单分类目录：
|
||||
options:[{
|
||||
value: '1',
|
||||
label: '编程语言',
|
||||
children:[{
|
||||
value:'2',
|
||||
label:'星数',
|
||||
}, {
|
||||
value:'3',
|
||||
label:'推送项目数'
|
||||
},
|
||||
{
|
||||
value:'4',
|
||||
label:'拉取项目数',
|
||||
}
|
||||
]
|
||||
},{
|
||||
value:'5',
|
||||
label:'协议种类'
|
||||
}
|
||||
],
|
||||
value1: true,
|
||||
// 默认用户选择的分类
|
||||
selectedValue:['1','2'],
|
||||
selectedValueByYear:'2023',
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
@@ -81,10 +145,90 @@ export default {
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 使用getjson读取数据
|
||||
var that = this;
|
||||
this.$axios.get("/gh-star-event.json").then(res => {
|
||||
that.starNum = res.data;
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
const that = this;
|
||||
this.getRenderer();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
}
|
||||
},
|
||||
test(){
|
||||
// console.log(this.selectedValue);
|
||||
// console.log(this.starNum);
|
||||
},
|
||||
// 用户改变分类榜单时，刷新页面：
|
||||
FreshPage(type){
|
||||
var that = this;
|
||||
type = type[type.length-2];
|
||||
that.selectedValueByYear='2023';
|
||||
console.log(type);
|
||||
},
|
||||
getRenderer() {
|
||||
window.onload = () => {
|
||||
const manuChart = this.$echarts.init(document.getElementById("EChart"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max:100,
|
||||
axisLabel : {
|
||||
show : false
|
||||
},
|
||||
splitLine : {
|
||||
show : false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick : {
|
||||
show : false
|
||||
},
|
||||
axisLine:{
|
||||
show : false
|
||||
},
|
||||
data: ["四川中烟","云南中烟","湖北中烟","海外","上海中烟","江苏中烟","重庆中烟","安徽中烟","贵州中烟",
|
||||
"湖南中烟","浙江中烟","河北中烟","广西中烟","中烟实业","河南中烟","广东中烟","未知",]
|
||||
},
|
||||
series: [{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barWidth:40,
|
||||
data: [17,14,12,10,8,5,5,5,3,3,3,2,2,2,1,1,1,1],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{c}%', //显示数据带上百分比
|
||||
position: 'right'
|
||||
}
|
||||
}],
|
||||
grid: {
|
||||
x: '10%',
|
||||
y: 0,
|
||||
x2: '10%',
|
||||
y2: 0
|
||||
},
|
||||
dataZoom: {
|
||||
yAxisIndex: [0],
|
||||
type:'inside',
|
||||
start: 0,
|
||||
end: 30,
|
||||
zoomLock:true,
|
||||
}
|
||||
};
|
||||
manuChart.setOption(option);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,6 +6,9 @@ import './assets/styles/element-variables.scss'
|
||||
import axios from "axios";
|
||||
import './assets/icon/iconfont.css'
|
||||
import store from './store'
|
||||
import * as echarts from 'echarts';//引入echarts
|
||||
Vue.prototype.$echarts = echarts //引入组件
|
||||
|
||||
|
||||
import { ElementTiptapPlugin } from 'element-tiptap';
|
||||
// 引入 ElementUI 样式
|
||||
|
||||
Reference in New Issue
Block a user