yyl update

src/api/index.js

@@ -85,6 +85,11 @@ export const oldPersonOldHealth = (params, requestMethod) => ajax(`${BASE_URL}/c
  */
 export const oldPersonOldType = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/oldType`, params, requestMethod);
 
+/**
+ * 老年人信息统计  ---->    老年人探访频次统计
+ */
+export const oldPersonVisitFrequency = (params, requestMethod) => ajax(`${BASE_URL}/chart/dept/visitFrequency`, params, requestMethod);
+
 /**
  * 老年人信息统计  ----->   老年人收入来源统计
  */

src/components/oldStatistics/7.vue

@@ -3,117 +3,129 @@
 </template>
 
 <script>
+    import { oldPersonVisitFrequency } from '../../api'
+
     export default {
         //老年人探访频次统计
         name: "OldPersonFrequencyCount",
         data() {
           return {
-            dataArr: [
-              { label: '每天', value: 32 },
-              { label: '每周', value: 198 },
-              { label: '每月', value: 52 },
-              { label: '每季', value: 19 },
-              { label: '其它', value: 33 }
-            ],
-            colorArr: [ 'rgba(0, 124, 255, 0.6)', 'rgba(129, 212, 255, 0.6)' ]
+            dataArr: [],
+            colorArr: [ 'rgba(0, 124, 255, 0.6)', 'rgba(129, 212, 255, 0.6)' ],
+            myChart: null
           }
         },
-        mounted() {
-          const arr = this.dataArr.reverse();
-          let maxValue = arr[0].value;
-          for(let i = 0; i < arr.length; i++) {
-            if(maxValue < arr[i].value) {
-              maxValue = arr[i].value;
-            }
-          }
+        methods: {
+          async draw() {
+              const result = await oldPersonVisitFrequency({}, 'POST');
+              this.dataArr = result;
 
-          const seriesArr = [];
-          for(let i = 0; i < arr.length; i++) {
-            const d = arr[i];
+              const arr = this.dataArr.reverse();
+              let maxValue = arr[0].value;
+              for(let i = 0; i < arr.length; i++) {
+                  if(maxValue < arr[i].value) {
+                      maxValue = arr[i].value;
+                  }
+              }
 
-            const bgArr = new Array(arr.length).fill({});
-            bgArr[i] = { value: maxValue, symbolPosition: 'start' };
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: `image://${require("../../assets/oldStatistics/x.png")}`,
-              symbolSize: ['100%', 15],
-              symbolOffset: [0, 0],
-              data: bgArr,
-              label: {
-                show: true,
-                position: 'right',
-                offset: [10, 2],
-                distance: 0,
-                color: 'rgba(0, 124, 255, 1)',
-                fontSize: 16,
-                formatter: `${d.value}`
-              },
-              z: 2
-            });
+              const seriesArr = [];
+              for(let i = 0; i < arr.length; i++) {
+                  const d = arr[i];
 
-            const imgArr = new Array(arr.length).fill({});
-            imgArr[i] = { value: d.value, symbolPosition: 'start' };
-            seriesArr.push({
-              type: 'pictorialBar',
-              symbol: 'rect',
-              symbolSize: ['100%', 15],
-              itemStyle: {
-                normal: {
-                  color: () => {
-                    return new this.$echarts.graphic.LinearGradient(
-                      0, 0, 1, 0,
-                      [
-                        {offset: 0, color: this.colorArr[0]},
-                        {offset: 1, color: this.colorArr[1]}
-                      ]
-                    )
-                  }
-                }
-              },
-              data: imgArr,
-              z: 3
-            });
-          }
+                  const bgArr = new Array(arr.length).fill({});
+                  bgArr[i] = { value: maxValue, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: `image://${require("../../assets/oldStatistics/x.png")}`,
+                      symbolSize: ['100%', 15],
+                      symbolOffset: [0, 0],
+                      data: bgArr,
+                      label: {
+                          show: true,
+                          position: 'right',
+                          offset: [10, 2],
+                          distance: 0,
+                          color: 'rgba(0, 124, 255, 1)',
+                          fontSize: 16,
+                          formatter: `${d.value}`
+                      },
+                      z: 2
+                  });
 
-          let myChart = this.$echarts.init(document.getElementById('myChartold7'));
-          myChart.setOption({
-            xAxis: {
-              type: 'value',
-              max: maxValue,
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              splitLine: {
-                show: false
-              }
-            },
-            yAxis: {
-              type: 'category',
-              data: arr.map((item) => item.label),
-              axisTick: {
-                show: false
-              },
-              axisLabel: {
-                show: true,
-                color: '#fff',
-                fontWeight: 'bold',
-                fontSize: 16
-              },
-              axisLine: {
-                show: true,
-                lineStyle: {
-                  color: '#fff'
-                }
+                  const imgArr = new Array(arr.length).fill({});
+                  imgArr[i] = { value: d.value, symbolPosition: 'start' };
+                  seriesArr.push({
+                      type: 'pictorialBar',
+                      symbol: 'rect',
+                      symbolSize: ['100%', 15],
+                      itemStyle: {
+                          normal: {
+                              color: () => {
+                                  return new this.$echarts.graphic.LinearGradient(
+                                      0, 0, 1, 0,
+                                      [
+                                          {offset: 0, color: this.colorArr[0]},
+                                          {offset: 1, color: this.colorArr[1]}
+                                      ]
+                                  )
+                              }
+                          }
+                      },
+                      data: imgArr,
+                      z: 3
+                  });
               }
-            },
-            series: seriesArr
-          });
+
+              this.myChart = this.$echarts.init(document.getElementById('myChartold7'));
+              this.myChart.setOption({
+                  grid: {
+                      top: '15%',
+                      bottom: '15%',
+                      right: '15%',
+                      left: '10%',
+                      containLabel: true
+                  },
+                  xAxis: {
+                      type: 'value',
+                      max: maxValue,
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: false
+                      },
+                      axisLine: {
+                          show: false
+                      },
+                      splitLine: {
+                          show: false
+                      }
+                  },
+                  yAxis: {
+                      type: 'category',
+                      data: arr.map((item) => item.label),
+                      axisTick: {
+                          show: false
+                      },
+                      axisLabel: {
+                          show: true,
+                          color: '#fff',
+                          fontWeight: 'bold',
+                          fontSize: 16
+                      },
+                      axisLine: {
+                          show: true,
+                          lineStyle: {
+                              color: '#fff'
+                          }
+                      }
+                  },
+                  series: seriesArr
+              });
+          }
+        },
+        mounted() {
+          this.draw();
         }
     }
 </script>

src/pages/oldStatistics.vue

@@ -88,7 +88,7 @@
         <div class="foot">
             <div class="tu-seven">
                 <p class="title1">老年人探访频次统计</p>
-                <com7></com7>
+                <com7 ref="c7"></com7>
             </div>
             <div class="tu-eight">
                 <p class="title1">老年人收入来源统计</p>
@@ -238,6 +238,7 @@
                 this.$refs.c4.draw();
                 this.$refs.c5.draw();
                 this.$refs.c6.draw();
+                this.$refs.c7.draw();
                 this.$refs.c8.draw();
                 this.$refs.c9.draw();
                 this.$refs.c10.draw();