积分统计

project/fengdu/app/AppIntegralStatistics/AppIntegralStatistics.vue

@@ -52,6 +52,14 @@
                         id="empty"/>
             </div>
           </div>
+          <div class="chartBox fill" v-if="isRuleChart">
+            <b>积分申请事件排行</b>
+            <div>
+              <div id="chart3" style="height: 300px; width: 100%;" v-show="ruleSortListX.length && ruleSortListY.length"/>
+              <ai-empty v-show="!ruleSortListX.length && !ruleSortListY.length" style="height: 200px; width: 100%;"
+                        id="empty"/>
+            </div>
+          </div>
         </el-row>
         <el-row type="flex" class="mar-t20 gap-20">
           <div class="chartBox fill" v-for="item in sta" :key="item.id">
@@ -160,6 +168,7 @@ export default {
     return {
       myChart1: null,
       myChart2: null,
+      myChart3: null,
       tableData: [],
       search: {
         current: 1,
@@ -198,10 +207,13 @@ export default {
       userSortListY: [],
       girdSortListX: [],
       girdSortListY: [],
+      ruleSortListX: [],
+      ruleSortListY: [],
       sta: [],
       firstGirdId: '',
       typeList: [],
-      searchTypeList: ''
+      searchTypeList: [],
+      isRuleChart: false
     }
   },
   computed: {
@@ -268,7 +280,7 @@ export default {
         }).then(() => this.sta.map(this.renderChart))
       ])
     },
-    // 人员、网格排行
+    // 人员、网格、积分排行
     getRanking() {
       return this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet', null, {
         params: {
@@ -280,15 +292,28 @@ export default {
         }
       }).then((res) => {
         if (res?.data) {
+          this.isRuleChart = res.data.village
           this.userSortListX = res.data.userSortList.map(e => e.userName).reverse()
           this.userSortListY = res.data.userSortList.map(e => e.changeIntegral).reverse()
           this.girdSortListX = res.data.girdSortList.map(e => e.girdName).reverse()
           this.girdSortListY = res.data.girdSortList.map(e => e.changeIntegral).reverse()
+          
+          if(this.isRuleChart) {
+            var ruleSortList = res.data.ruleSortList
+            if(res.data.ruleSortList && res.data.ruleSortList.length > 10) {
+              ruleSortList = res.data.ruleSortList.slice(0, 10);
+            }
+            this.ruleSortListX = ruleSortList.map(e => e.integral_rule_name).reverse()
+            this.ruleSortListY = ruleSortList.map(e => e.c).reverse()
+          }
           return 1;
         }
       }).then(() => {
         this.getColEcherts1(this.userSortListX, this.userSortListY)
         this.getColEcherts2(this.girdSortListX, this.girdSortListY)
+        if(this.isRuleChart) {
+          this.getColEcherts3(this.ruleSortListX, this.ruleSortListY)
+        }
       })
     },
     // 积分明细
@@ -317,7 +342,8 @@ export default {
 
     getColEcherts1(xData, yData) {
       let chartDom1 = document.getElementById('chart1');
-      chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
+      var num = this.isRuleChart ? 3 : 2
+      chartDom1.style.width = (window.innerWidth - 435) / num + "px";
       this.myChart1 = echarts.init(chartDom1);
       this.myChart1.setOption({
         tooltip: {
@@ -372,7 +398,8 @@ export default {
     },
     getColEcherts2(xData, yData) {
       let chartDom2 = document.getElementById('chart2');
-      chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
+      var num = this.isRuleChart ? 3 : 2
+      chartDom2.style.width = (window.innerWidth - 435) / num + "px";
       this.myChart2 = echarts.init(chartDom2);
       this.myChart2.setOption({
         tooltip: {
@@ -439,6 +466,75 @@ export default {
         ]
       }, true);
     },
+    getColEcherts3(xData, yData) {
+      let chartDom3 = document.getElementById('chart3');
+      chartDom3.style.width = (window.innerWidth - 435) / 3 + "px";
+      this.myChart3 = echarts.init(chartDom3);
+      this.myChart3.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '16px',
+          right: '28px',
+          bottom: '14px',
+          top: '16px',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: xData,
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          triggerEvent: true,
+          //设置文本过长超出隐藏...表示
+          axisLabel: {
+            margin: 8,
+            formatter: function (params) {
+              var val = ""
+              if (params.length > 8) {
+                val = params.substr(0, 8) + '...'
+                return val
+              } else {
+                return params;
+              }
+            }
+          },
+        },
+        series: [
+          {
+            data: yData,
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: "#5087ec",
+                label: {
+                  show: true,  //开启显示
+                  position: 'right',    //在右方显示
+                  textStyle: {
+                    fontSize: 13,
+                    color: '#666'
+                  }
+                },
+              },
+            },
+            barWidth: 10,
+            barGap: '20%',
+          }
+        ]
+      }, true);
+    },
     onResize() {
       this.myChart1?.resize()
       this.myChart2?.resize()