更新页面

src/components/Monthly/MonthlyByTags.vue

@@ -29,7 +29,7 @@
                         </el-col>
                     </el-row>
                     <div class="ItemsContent" >
-                        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+                        <el-backtop ></el-backtop>
                         <el-scrollbar class="scrollbar-wrapper" style="margin-left:-10px;width:fit-content" >
                             <div class="infinite-list-wrapper" >
                                 <ul class="list"

src/components/Ranking/Ranking.vue

@@ -16,7 +16,7 @@
                         <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 placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
+                        <el-select @change="FreshPage(selectedValue)" placeholder="选择年份" v-model="selectedValueByYear" style="width: 7vw">
                             <el-option
                                 v-for="(n,index) in 12"
                                 :key="index"
@@ -35,25 +35,25 @@
                         inactive-text="年度统计">
                     </el-switch>
                     <el-table
-                        :data="tableData"
+                        border
-                        style="width: 100%">
+                        class="DataForm"
-                        <el-table-column
+                        :data="showData"
-                            prop="date"
+                        style="margin-top:50px;width:500px;margin-left:20%"
-                            label="日期"
+                        :header-row-style="{height:'15px'}"  :cell-style="{padding:'1px'}">
-                            width="180">
-                        </el-table-column>
                         <el-table-column
                             prop="name"
-                            label="姓名"
+                            :label=formName[0]
-                            width="180">
+                            >
                         </el-table-column>
                         <el-table-column
-                            prop="address"
+                            prop="count"
-                            label="地址">
+                            :label=formName[1]
+                            >
                         </el-table-column>
                     </el-table>
                     <el-button @click="test()"></el-button>
-                    <div id="EChart" style="width: 600px; height: 300px;"></div>
+
+                    <div id="EChart" style="width: 700px; height: 700px;"></div>
                 </el-card>
             </div>
         </div>
@@ -75,6 +75,10 @@ export default {
     components: {RightTools},
     data(){
         return{
+            // 最后展示数据:
+            showData:[],
+            // 数据表格表头：
+            formName:[],
             // 星数数据：
             starNum:[],
             // 星数数据按年份：
@@ -120,29 +124,15 @@ export default {
                 label:'协议种类'
             }
             ],
-            value1: true,
+            value1: false,
             // 默认用户选择的分类
             selectedValue:['1','2'],
-            selectedValueByYear:'2023',
+            selectedValueByYear:2023,
-            tableData: [{
-                date: '2016-05-02',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1518 弄'
-            }, {
-                date: '2016-05-04',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1517 弄'
-            }, {
-                date: '2016-05-01',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-                date: '2016-05-03',
-                name: '王小虎',
-                address: '上海市普陀区金沙江路 1516 弄'
-            }]
         }
     },
+    updated(){
+        // history.go(0);
+    },
     created() {
         // 使用getjson读取数据
         var that = this;
@@ -150,28 +140,87 @@ export default {
             that.starNum = res.data;
         })
     },
+    computed:{
+    },
     mounted() {
-        const that = this;
+            this.initPage();
-        this.getRenderer();
+            this.FreshPage(this.selectedValue);
+
+
     },
     methods: {
         goBack() {
             window.history.go(-1);
         },
         test(){
-            // console.log(this.selectedValue);
+            // console.log(this.value1);
-            // console.log(this.starNum);
         },
         // 用户改变分类榜单时，刷新页面：
-        FreshPage(type){
+        initPage(){
             var that = this;
-            type = type[type.length-2];
+
-            that.selectedValueByYear='2023';
+            this.getRenderer();
-            console.log(type);
+            that.formName=['语言种类','获得星数']
+        },
+        FreshPage(type){
+            // history.go(0);
+            var that = this;
+            // console.log(that.selectedValueByYear);
+            type = type[type.length-1] - 1;
+            let year = that.selectedValueByYear + 2012;
+            if(type == 1){
+            //  按星数统计：
+                this.getNumData(year,that.value1);
+                this.getRenderer();
+                that.formName=['语言种类','获得星数']
+            }else if(type == 2){
+
+            }else if(type == 3){
+
+            }else if(type == 4){
+
+            }
+            // console.log(type);
+        },
+        // 星数分类的数据：
+        getNumData(year,index){
+            function compare(property) {
+                return function (a, b) {
+                    var value1 = a[property];
+                    var value2 = b[property];
+                    return value2 - value1;
+                }
+            }
+            var that = this;
+            that.showData = [];
+            let starNum2 = that.starNum.filter(item => item['year'] == year);
+            let tmp = [];
+            if(index == false){
+                for(let i=0;i<starNum2.length;i++){
+                    let tmpObj = {name:starNum2[i].name,count:starNum2[i].count};
+                    let findSignal = tmp.findIndex(item=>item['name'] == tmpObj['name']);
+                    if (findSignal != -1){
+                        tmp[findSignal]['count'] = parseInt(tmp[findSignal]['count']) + parseInt(tmpObj['count']);
+                    }else{
+                        tmp.push(tmpObj);
+                    }
+                }
+                that.showData = tmp.slice(0,20);
+                that.showData = that.showData.sort(compare('count'));
+                // console.log(that.showData);
+            }else{
+            }
+
         },
         getRenderer() {
-            window.onload = () => {
+                var that = this;
-                const manuChart = this.$echarts.init(document.getElementById("EChart"));
+                var manuChart = that.$echarts.init(document.getElementById("EChart"));
+                let name = [];
+                let value = [];
+                for(let i=0;i < that.showData.length;i++){
+                    name.push(that.showData[i]['name']);
+                    value.push(that.showData[i]['count']);
+                }
                 const option = {
                     tooltip: {
                         trigger: "axis"
@@ -179,7 +228,6 @@ export default {
                     xAxis: {
                         type: 'value',
                         min: 0,
-                        max:100,
                         axisLabel : {
                             show : false
                         },
@@ -196,17 +244,15 @@ export default {
                         axisLine:{
                             show : false
                         },
-                        data: ["四川中烟","云南中烟","湖北中烟","海外","上海中烟","江苏中烟","重庆中烟","安徽中烟","贵州中烟",
+                        data: name,
-                            "湖南中烟","浙江中烟","河北中烟","广西中烟","中烟实业","河南中烟","广东中烟","未知",]
                     },
                     series: [{
-                        name: '销量',
+                        name: '获取星数',
                         type: 'bar',
-                        barWidth:40,
+                        barWidth:13,
-                        data: [17,14,12,10,8,5,5,5,3,3,3,2,2,2,1,1,1,1],
+                        data: value,
                         label: {
                             show: true,
-                            formatter: '{c}%', //显示数据带上百分比
                             position: 'right'
                         }
                     }],
@@ -220,14 +266,14 @@ export default {
                         yAxisIndex: [0],
                         type:'inside',
                         start: 0,
-                        end: 30,
+                        end: 100,
                         zoomLock:true,
                     }
                 };
                 manuChart.setOption(option);
             }
+
         },
-    }
 }
 </script>