更新页面

package.json

@@ -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",

src/components/Ranking/Ranking.vue

@@ -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-cascader @change="FreshPage(selectedValue)" v-model="selectedValue" :options="options" placeholder="选择分类"
-                            <el-option label="编程语言" value="1"></el-option>
+                                     :show-all-levels="false" style="width: 10vw"></el-cascader>
-                            <el-option label="服务器" value="2"></el-option>
-                            <el-option label="数据库" value="3"></el-option>
-                        </el-select>
                         <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-select placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
-                            <el-option label="2023" value="2023"></el-option>
+                            <el-option
-                            <el-option label="2022" value="2022"></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>

src/main.js

@@ -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 样式