积分统计

packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue

@@ -37,7 +37,7 @@
           <ai-empty v-if="false" style="height: 300px;"></ai-empty>
         </div>
         <div class="right_Box">
-          <div id="chart1" style="height: 300px; width: 100%;"></div>
+          <div id="chart2" style="height: 300px; width: 100%;"></div>
           <ai-empty v-if="false" style="height: 300px;"></ai-empty>
         </div>
       </div>
@@ -108,7 +108,8 @@ export default {
   data() {
     return {
       name: "积分统计", 
-      myChart: null,
+      myChart1: null,
+      myChart2: null,
       tableData: [],
       search: {
         current: 1,
@@ -140,11 +141,11 @@ export default {
     this.$dict.load('epidemicDangerousAreaLevel')
   },
   methods: {
-    getColEcherts() {
-      let chartDom = document.getElementById('chart1');
-      chartDom.style.width = (window.innerWidth - 344) / 2 + "px";
-      this.myChart = echarts.init(chartDom);
-      this.myChart.setOption({
+    getColEcherts1() {
+      let chartDom1 = document.getElementById('chart1');
+      chartDom1.style.width = (window.innerWidth - 344) / 2 + "px";
+      this.myChart1 = echarts.init(chartDom1);
+      this.myChart1.setOption({
         
         title: {
           text: '个人积分排行'
@@ -181,10 +182,6 @@ export default {
           {
             data: [120, 200, 150, 80, 70,],
             type: 'bar',
-            showBackground: true,
-            // backgroundStyle: {
-            //   color: 'rgba(180, 180, 180, 0.2)'
-            // },
             itemStyle: {
               normal: {
                 color: "#5087ec",
@@ -205,8 +202,70 @@ export default {
       }, true);
       window.addEventListener("resize", this.onResize)
     },
-    onResize() {
-      this.myChart.resize()
+    getColEcherts2() {
+      let chartDom2 = document.getElementById('chart2');
+      chartDom2.style.width = (window.innerWidth - 344) / 2 + "px";
+      this.myChart2 = echarts.init(chartDom2);
+      this.myChart2.setOption({
+        title: {
+          text: '网格积分排行'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '16px',
+          right: '28px',
+          bottom: '14px',
+          top: '50px',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'India', 'China', 'World'],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70,],
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: "#5087ec",
+                label: {
+                  show: true,  //开启显示
+                  position: 'right',    //在上方显示
+                  textStyle: {
+                    fontSize: 13,
+                    color: '#666'
+                  }
+                },
+              },
+            },
+            barWidth: 10,
+            barGap: '20%',
+          }
+        ]
+      }, true);
+      window.addEventListener("resize", this.onResize2)
+    },
+    onResize1() {
+      this.myChart1.resize()
+    },
+    onResize2() {
+      this.myChart2.resize()
     },
     getListInit() {},
     getTableData() {},
@@ -215,10 +274,12 @@ export default {
     },
   },
   mounted() {
-    this.getColEcherts()
+    this.getColEcherts1()
+    this.getColEcherts2()
   },
   destroyed () {
-    window.removeEventListener('resize', this.onResize)
+    window.removeEventListener('resize', this.onResize1)
+    window.removeEventListener('resize', this.onResize2)
   },
 }
 </script>
@@ -310,7 +371,9 @@ export default {
       .left_Box {
         margin-right: 16px;
       }
-      .right_Box {}
+      .right_Box {
+        width: 100%;
+      }
 
       .left_Box,
       .right_Box {
@@ -319,7 +382,8 @@ export default {
         border-radius: 4px;
         padding: 16px;
         box-sizing: border-box;
-        #chartDom {
+        #chart1,
+        #chart2 {
           width: 100%;
           height: 260px;
         }