00

src/components/PatrolmanStatistics/1.vue

@@ -34,7 +34,7 @@
                         top: `${i == 0 ? 13 : 55}%`,
                         textAlign: "center",
                         textStyle: {
-                            fontSize: "16",
+                            fontSize: this.fontSize(0.17),
                             fontWeight: 'normal',
                             color: "#fff"
                         }
@@ -46,7 +46,7 @@
                         top: `${i == 0 ? 13 : 55}%`,
                         textAlign: "center",
                         textStyle: {
-                            fontSize: "20",
+                            fontSize: this.fontSize(0.17),
                             fontWeight: 'normal',
                             color: this.colorArr[i]
                         }
@@ -58,7 +58,7 @@
                     seriesArr.push({
                         type: 'pictorialBar',
                         symbol: `image://${require('../../assets/PatrolmanStatistics/border.png')}`,
-                        symbolSize: [317, 47],
+                        symbolSize: ['70%', '50%'],
                         symbolOffset: [0, 0],
                         data: borderArr,
                         label: {
@@ -66,7 +66,7 @@
                             position: 'right',
                             offset: [-120, 0],
                             color: this.colorArr[this.colorArr.length - 1 - i],
-                            fontSize: 20,
+                            fontSize: this.fontSize(0.17),
                             fontWeight: 'bold',
                             formatter: () => {
                                 return `${this.dataArr[this.dataArr.length - 1 - i].value}人`;
@@ -92,7 +92,7 @@
                         seriesArr.push({
                             type: 'pictorialBar',
                             symbol: symbolImage,
-                            symbolSize: [19, 37],
+                            symbolSize: ['5%', '40%'],
                             symbolOffset: [10 + j * 31, 0],
                             data: blockArr,
                             z: 2
@@ -142,6 +142,13 @@
                     },
                     series: seriesArr
                 });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
             }
         },
         watch: {

src/components/PatrolmanStatistics/2.vue

@@ -118,11 +118,12 @@
                 color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
                 legend: {
                   data: ["党员", "群众"],
-                  left: 'right',
+                  right: '4%',
+                  top: '13%',
                   textStyle: {
                     color: "#fff"
                   },
-                  padding:[45, 30,0 ,0],
+
                 },
                 grid: {
                     left: '20%',

src/components/PatrolmanStatistics/3.vue

@@ -46,7 +46,7 @@
                           normal: {
                               position: ['50%', '50%'],
                               textStyle: {
-                                  fontSize: 20,
+                                  fontSize: this.fontSize(0.2),
                                   color: this.colorArr[i].color1
                               },
                               formatter: `${ d.value }`
@@ -71,7 +71,7 @@
                       top: `70%`,
                       textAlign: "center",
                       textStyle: {
-                          fontSize: "16",
+                          fontSize: this.fontSize(0.18),
                           fontWeight: 'normal',
                           color: '#fff'
                       }
@@ -114,6 +114,13 @@
                   },
                   series: seriesArr
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/PatrolmanStatistics/4.vue

@@ -1,5 +1,9 @@
 <template>
-  <div id="zz" style="width: 100%; height: 100%; "></div>
+  <div  class="box">
+    <div class="tupian"></div>
+    <div id="zz" style="width: 70%; height: 100%; "></div>
+  </div>
+
 </template>
 
 <script>
@@ -38,7 +42,7 @@
                           position: 'right',
                           offset: [-120, -40],
                           color: '#71dbff',
-                          fontSize: 18,
+                          fontSize: this.fontSize(0.2),
                           formatter: (params) => {
                               return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].value }%`;
                           }
@@ -60,7 +64,7 @@
                           position: 'right',
                           offset: [-280, -40],
                           color: '#fff',
-                          fontSize: 16,
+                          fontSize: this.fontSize(0.18),
                           formatter: (params) => {
                               return `${ this.dataArr[this.dataArr.length - 1 - params.dataIndex].label }`;
                           }
@@ -84,14 +88,14 @@
 
                   const kkArr = new Array(length).fill({});
                   kkArr[i] = { value: 300, symbolPosition: 'start' };
-                  seriesArr.push({
-                      type: 'pictorialBar',
-                      symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
-                      symbolSize: [157, 134],
-                      symbolOffset: [-180, -10],
-                      data: kkArr,
-                      z: 2
-                  });
+                  // seriesArr.push({
+                  //     type: 'pictorialBar',
+                  //     symbol: `image://${require('../../assets/PatrolmanStatistics/big-img-' + (this.dataArr.length - 1 - i) + '.png')}`,
+                  //     symbolSize: [157, 134],
+                  //     symbolOffset: [-140, -10],
+                  //     data: kkArr,
+                  //     z: 2
+                  // });
 
               }
 
@@ -102,7 +106,7 @@
               this.myChart = this.$echarts.init(document.getElementById('zz'));
               this.myChart.setOption({
                   grid:{
-                      left:"35%",
+                      left:"6%",
                       right:"2%",
                       top:"2%",
                       bottom:"2%",
@@ -139,7 +143,16 @@
                   },
                   series: seriesArr
               });
+
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
+
         },
         mounted() {
           this.draw();
@@ -148,5 +161,15 @@
 </script>
 
 <style scoped>
-
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+  .tupian {
+    width: 40%;
+    background: url("../../assets/PatrolmanStatistics/people.png") no-repeat ;
+    background-size: 100% 100%;
+    height: 100%;
+  }
 </style>

src/components/PatrolmanStatistics/6.vue

@@ -43,7 +43,7 @@
                           show: true,
                           position: 'top',
                           textStyle: {
-                              fontSize: 18
+                              fontSize: this.fontSize(0.19)
                           },
                           fontWeight: 'bold',
                           offset: [0, 0],
@@ -68,7 +68,7 @@
                           show: true,
                           color: '#fff',
                           fontWeight: 'bold',
-                          fontSize: 15
+                          fontSize: this.fontSize(0.16)
                       },
                       axisTick: {
                           show: false
@@ -91,6 +91,13 @@
                   },
                   series: seriesArr
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/PatrolmanStatistics/7.vue

@@ -42,7 +42,7 @@
                         position: 'top',
                         distance: -37,
                         textStyle: {
-                            fontSize: 12
+                            fontSize:this.fontSize(0.10)
                         },
                         color: this.colorArr[i].color2,
                         fontWeight: 'bold',
@@ -68,7 +68,7 @@
                         show: true,
                         color: '#fff',
                         fontWeight: 'bold',
-                        fontSize: 15
+                        fontSize: this.fontSize(0.16)
                     },
                 },
                 yAxis: {
@@ -88,7 +88,7 @@
                         formatter: '{value}%',
                         color: '#fff',
                         fontWeight: 'bold',
-                        fontSize: 15
+                        fontSize: this.fontSize(0.16)
                     }
                 },
                 series: [
@@ -122,6 +122,13 @@
                     }, ...tipArr
                 ]
             });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/PatrolmanStatistics/8.vue

@@ -36,7 +36,7 @@
                       top: `${ i == 0 ? 24 : 60 }%`,
                       textAlign: "center",
                       textStyle: {
-                          fontSize: "15",
+                          fontSize: this.fontSize(0.18),
                           fontWeight: 'normal',
                           color: "#fff"
                       }
@@ -48,7 +48,7 @@
                       top: `${ i == 0 ? 35 : 70 }%`,
                       textAlign: "center",
                       textStyle: {
-                          fontSize: "15",
+                          fontSize: this.fontSize(0.18),
                           fontWeight: 'normal',
                           color: this.colorArr[i].color1
                       }
@@ -146,6 +146,13 @@
                   title: titleArr,
                   series: seriesArr
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/PatrolmanStatistics/9.vue

@@ -43,7 +43,7 @@
                       },
                       axisLabel: {
                           show: true,
-                          fontSize: 12
+                          fontSize: this.fontSize(0.16)
                       },
                       axisTick: {
                           show: false
@@ -67,7 +67,7 @@
                       axisLabel: {
                           show: true,
                           formatter: '{value}%',
-                          fontSize: 16
+                          fontSize: this.fontSize(0.16)
                       }
                   },
                   series: [
@@ -115,6 +115,13 @@
                       }
                   ]
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/index/1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="myChartindex1" style="width: 100%; height: 100%; "></div>
+    <div id="myChartindex1" style="width: 100%; height: 100%;"></div>
 </template>
 
 <script>
@@ -31,10 +31,10 @@
                 this.myChart = this.$echarts.init(document.getElementById('myChartindex1'));
                 this.myChart.setOption({
                     grid: {
-                        left:'12%',
-                        right:'7%',
+                        left:'0%',
+                        right:'0%',
                         top:'22%',
-                        bottom:'15%'
+                        bottom:'20%'
                     },
                     xAxis: {
                         type: 'category',
@@ -46,7 +46,7 @@
                             show: true,
                             textStyle: {
                                 color: 'white',
-                                fontSize : 14
+                                fontSize : this.fontSize(0.16)
                             },
                         },
 
@@ -96,9 +96,13 @@
                             },
                             label: {
                               show: true,
-                              position: 'bottom',
-                              offset: [0, -210],
-                              color: '#fff'
+                              position: 'top',
+                              offset: [0, -10],
+                              color: '#fff',
+                                textStyle: {
+                                    color: 'white',
+                                    fontSize : this.fontSize(0.16)
+                                },
                             },
                             z: 1
                         },
@@ -118,6 +122,13 @@
                         }
                     ]
                 });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
             }
         },
         mounted() {

src/components/index/2.vue

@@ -1,24 +1,24 @@
 <template>
-  <div id="myChartindex2" style="width: 100%; height: 100%; "></div>
+    <div id="myChartindex2" style="width: 100%; height: 100%; "></div>
 </template>
 
 <script>
-    import { oldPersonSelectAuthAndLook, selectSexAndLook } from '../../api'
+    import {oldPersonSelectAuthAndLook, selectSexAndLook} from '../../api'
 
     export default {
         name: "Mz_tx_charts2",
         data() {
-          return {
-            dataArr: [
-              { label: '党员', arr: [ { label: '认证', value: 60 }, { label: '未认证', value: 80 } ] },
-              { label: '群众', arr: [ { label: '认证', value: 70 }, { label: '未认证', value: 50 } ] }
-            ],
-            colorArr: [
-              { color1: '#FFA625', color2: '#FFD09C' },
-              { color1: '#00FF0C', color2: '#B7FFE2' }
-            ],
-            myChart: null
-          }
+            return {
+                dataArr: [
+                    {label: '党员', arr: [{label: '认证', value: 60}, {label: '未认证', value: 80}]},
+                    {label: '群众', arr: [{label: '认证', value: 70}, {label: '未认证', value: 50}]}
+                ],
+                colorArr: [
+                    {color1: '#FFA625', color2: '#FFD09C'},
+                    {color1: '#00FF0C', color2: '#B7FFE2'}
+                ],
+                myChart: null
+            }
         },
         methods: {
             async draw1() {
@@ -28,11 +28,11 @@
                 const seriesArr = [];
 
                 let maxValue = 0;
-                for(let i = 0; i < this.dataArr.length; i++) {
+                for (let i = 0; i < this.dataArr.length; i++) {
                     const d = this.dataArr[i];
                     const arr = d.arr;
-                    for(let j = 0; j < arr.length; j++) {
-                        if(maxValue < arr[j].value) {
+                    for (let j = 0; j < arr.length; j++) {
+                        if (maxValue < arr[j].value) {
                             maxValue = arr[j].value;
                         }
                     }
@@ -40,7 +40,7 @@
 
                 const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();
 
-                for(let i = 0; i < this.dataArr.length; i++) {
+                for (let i = 0; i < this.dataArr.length; i++) {
                     const d = this.dataArr[i];
                     seriesArr.push({
                         name: d.label,
@@ -65,14 +65,14 @@
                                     show: true,
                                     position: 'right',
                                     color: this.colorArr[i].color1,
-                                    fontSize: 20
+                                    fontSize: this.fontSize(0.22)
                                 },
                             },
                             {
                                 value: d.arr[0].value,
                                 itemStyle: {
                                     normal: {
-                                        color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                             offset: 0,
                                             color: this.colorArr[i].color1
                                         }, {
@@ -86,14 +86,14 @@
                                     show: true,
                                     position: 'right',
                                     color: this.colorArr[i].color1,
-                                    fontSize: 20
+                                    fontSize: this.fontSize(0.22)
                                 },
                             }
                         ]
                     });
 
                     const kkArr = new Array(this.dataArr.length).fill({});
-                    kkArr[i] = { value: 100, symbolPosition: 'start' };
+                    kkArr[i] = {value: 100, symbolPosition: 'start'};
 
                     seriesArr.push({
                         type: 'pictorialBar',
@@ -104,17 +104,17 @@
                         label: {
                             show: true,
                             position: 'left',
-                            offset: [-30, 0],
+                            offset: [-35, 0],
                             distance: 0,
                             color: '#fff',
-                            fontSize: 16,
-                            formatter: `${ labelArr[i] }`
+                            fontSize: this.fontSize(0.18),
+                            formatter: `${labelArr[i]}`
                         },
                         z: 10
                     });
                 }
 
-                if(this.myChart != null) {
+                if (this.myChart != null) {
                     this.myChart.clear();
                 }
 
@@ -123,15 +123,16 @@
                     color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
                     legend: {
                         data: ["党员", "群众"],
-                        left: 'right',
+                        right: '4%',
+                        top: '2%',
                         textStyle: {
                             color: "#fff"
                         },
-                      padding:[10, 30,0 ,0],
                     },
                     grid: {
-                        left: '30%',
+                        left: '28.5%',
                         right: '15%',
+                        top:'15%',
                         bottom: '5%',
                         height: '90%',
                         containLabel: true
@@ -181,11 +182,11 @@
                 const seriesArr = [];
 
                 let maxValue = 0;
-                for(let i = 0; i < this.dataArr.length; i++) {
+                for (let i = 0; i < this.dataArr.length; i++) {
                     const d = this.dataArr[i];
                     const arr = d.arr;
-                    for(let j = 0; j < arr.length; j++) {
-                        if(maxValue < arr[j].value) {
+                    for (let j = 0; j < arr.length; j++) {
+                        if (maxValue < arr[j].value) {
                             maxValue = arr[j].value;
                         }
                     }
@@ -193,7 +194,7 @@
 
                 const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();
 
-                for(let i = 0; i < this.dataArr.length; i++) {
+                for (let i = 0; i < this.dataArr.length; i++) {
                     const d = this.dataArr[i];
                     seriesArr.push({
                         name: d.label,
@@ -218,14 +219,14 @@
                                     show: true,
                                     position: 'right',
                                     color: this.colorArr[i].color1,
-                                    fontSize: 20
+                                    fontSize: this.fontSize(0.22)
                                 },
                             },
                             {
                                 value: d.arr[0].value,
                                 itemStyle: {
                                     normal: {
-                                        color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                             offset: 0,
                                             color: this.colorArr[i].color1
                                         }, {
@@ -239,14 +240,14 @@
                                     show: true,
                                     position: 'right',
                                     color: this.colorArr[i].color1,
-                                    fontSize: 20
+                                    fontSize: this.fontSize(0.22)
                                 },
                             }
                         ]
                     });
 
                     const kkArr = new Array(this.dataArr.length).fill({});
-                    kkArr[i] = { value: 100, symbolPosition: 'start' };
+                    kkArr[i] = {value: 100, symbolPosition: 'start'};
 
                     seriesArr.push({
                         type: 'pictorialBar',
@@ -260,14 +261,14 @@
                             offset: [-30, 0],
                             distance: 0,
                             color: '#fff',
-                            fontSize: 16,
-                            formatter: `${ labelArr[i] }`
+                            fontSize: this.fontSize(0.18),
+                            formatter: `${labelArr[i]}`
                         },
                         z: 10
                     });
                 }
 
-                if(this.myChart != null) {
+                if (this.myChart != null) {
                     this.myChart.clear();
                 }
 
@@ -276,19 +277,20 @@
                     color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
                     legend: {
                         data: ["党员", "群众"],
-                        left: 'right',
+                        right: '4%',
+                        top: '2%',
                         textStyle: {
                             color: "#fff"
                         },
-                      padding:[10, 30,0 ,0],
                     },
-                  grid: {
-                    left: '28.5%',
-                    right: '15%',
-                    bottom: '5%',
-                    height: '90%',
-                    containLabel: true
-                  },
+                    grid: {
+                        left: '25%',
+                        right: '15%',
+                        top:'15%',
+                        bottom: '5%',
+                        height: '90%',
+                        containLabel: true
+                    },
                     xAxis: [
                         {
                             type: 'value',
@@ -326,6 +328,13 @@
                     ],
                     series: seriesArr
                 });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
             }
         },
         mounted() {

src/components/index/3.vue

@@ -1,205 +1,213 @@
 <template>
-  <div id="myChartindex3" style="width: 100%; height: 100%; "></div>
+    <div id="myChartindex3" style="width: 100%; height: 100%;"></div>
 </template>
 
 <script>
-    import { infomonth } from '../../api'
+    import {infomonth} from '../../api'
 
     export default {
         name: "CollectPatrolDataCount",
         data() {
-          return {
-            dataArr: [],
-            // dataArr: [
-            //   {
-            //     label: '采集数据',
-            //     data: [{ label: '01月', value: 369 }, { label: '02月', value: 518 }, { label: '03月', value: 169 }, { label: '04月', value: 258 }, { label: '05月', value: 365 }, { label: '06月', value: 242 }]
-            //   },
-            //   {
-            //     label: '巡访数据',
-            //     data: [{ label: '01月', value: 500 }, { label: '02月', value: 362 }, { label: '03月', value: 368 }, { label: '04月', value: 198 }, { label: '05月', value: 569 }, { label: '06月', value: 159 }]
-            //   }
-            // ],
-            colorArr: [ { lineColor: '#2796ff', areaColor: '#d7e6ff' }, { lineColor: '#ff8700', areaColor: '#fff3c6' } ],
-            myChart: null
-          }
+            return {
+                dataArr: [],
+                // dataArr: [
+                //   {
+                //     label: '采集数据',
+                //     data: [{ label: '01月', value: 369 }, { label: '02月', value: 518 }, { label: '03月', value: 169 }, { label: '04月', value: 258 }, { label: '05月', value: 365 }, { label: '06月', value: 242 }]
+                //   },
+                //   {
+                //     label: '巡访数据',
+                //     data: [{ label: '01月', value: 500 }, { label: '02月', value: 362 }, { label: '03月', value: 368 }, { label: '04月', value: 198 }, { label: '05月', value: 569 }, { label: '06月', value: 159 }]
+                //   }
+                // ],
+                colorArr: [{lineColor: '#2796ff', areaColor: '#d7e6ff'}, {lineColor: '#ff8700', areaColor: '#fff3c6'}],
+                myChart: null
+            }
         },
         methods: {
-          async draw() {
-              const result = await infomonth({}, 'POST');
-              this.dataArr = result;
+            async draw() {
+                const result = await infomonth({}, 'POST');
+                this.dataArr = result;
 
-              const valueArr1 = this.dataArr[0].data.map((item) => {
-                  return item.value;
-              });
+                const valueArr1 = this.dataArr[0].data.map((item) => {
+                    return item.value;
+                });
 
-              const valueArr2 = this.dataArr[1].data.map((item) => {
-                  return item.value;
-              });
+                const valueArr2 = this.dataArr[1].data.map((item) => {
+                    return item.value;
+                });
 
-              let maxValue = valueArr2[0];
-              let maxValueIndex = 0;
-              for(let i = 0; i < valueArr2.length; i++) {
-                  if(maxValue < valueArr2[i]) {
-                      maxValue = valueArr2[i];
-                      maxValueIndex = i;
-                  }
-              }
+                let maxValue = valueArr2[0];
+                let maxValueIndex = 0;
+                for (let i = 0; i < valueArr2.length; i++) {
+                    if (maxValue < valueArr2[i]) {
+                        maxValue = valueArr2[i];
+                        maxValueIndex = i;
+                    }
+                }
 
-              const yMaxValue = maxValue + Math.floor(maxValue / 5);
-              const barArr = new Array(valueArr2.length).fill(0);
-              barArr[maxValueIndex] = yMaxValue;
+                const yMaxValue = maxValue + Math.floor(maxValue / 5);
+                const barArr = new Array(valueArr2.length).fill(0);
+                barArr[maxValueIndex] = yMaxValue;
 
-              if(this.myChart != null) {
-                  this.myChart.clear();
-              }
+                if (this.myChart != null) {
+                    this.myChart.clear();
+                }
 
-              this.myChart = this.$echarts.init(document.getElementById('myChartindex3'));
-              this.myChart.setOption({
-                  grid:{
-                      left:"12%",
-                      right:"6%",
-                  },
-                  legend: {
-                      left: 'right',
-                      data: ['采集数据', '巡访数据'],
-                      textStyle:{//图例文字的样式
-                          color:'#ccc',
-                          fontSize:16
-                      },
-                    padding:[10, 30,0 ,0],
-                  },
-                  xAxis: {
-                      type: 'category',
-                      boundaryGap: false,
-                      data: this.dataArr[0].data.map((item) => {
-                          return item.label + '月';
-                      }),
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: true
-                      },
-                      axisLabel: {
-                          show: true,
-                          color: '#fff'
-                      },
-                      axisTick: {
-                          show: false
-                      }
-                  },
-                  yAxis: {
-                      type: 'value',
-                      max: yMaxValue,
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: false
-                      },
-                      axisTick: {
-                          show: false
-                      },
-                      axisLabel: {
-                          show: false
-                      }
-                  },
-                  series: [
-                      {
-                          type: 'line',
-                          smooth: true,
-                          name: this.dataArr[0].label,
-                          areaStyle: {
-                              color: {
-                                  type: 'linear',
-                                  x: 0,
-                                  y: 0,
-                                  x2: 0,
-                                  y2: 1,
-                                  colorStops: [{
-                                      offset: 0, color: this.colorArr[0].areaColor // 0% 处的颜色
-                                  }, {
-                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
-                                  }],
-                                  global: false // 缺省为 false
-                              }
-                          },
-                          symbol: `image://${require('../../assets/index/line-point-blue.png')}`,
-                          symbolSize: [17, 17],
-                          data: valueArr1,
-                          itemStyle: {
-                              color: this.colorArr[0].lineColor,
-                          },
-                          lineStyle: {
-                              width: 2
-                          }
-                      },
-                      {
-                          type: 'line',
-                          smooth: true,
-                          name: this.dataArr[1].label,
-                          areaStyle: {
-                              color: {
-                                  type: 'linear',
-                                  x: 0,
-                                  y: 0,
-                                  x2: 0,
-                                  y2: 1,
-                                  colorStops: [{
-                                      offset: 0, color: this.colorArr[1].areaColor // 0% 处的颜色
-                                  }, {
-                                      offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
-                                  }],
-                                  global: false // 缺省为 false
-                              }
-                          },
-                          symbol: `image://${require('../../assets/index/line-point-yellow.png')}`,
-                          symbolSize: [17, 17],
-                          data: valueArr2,
-                          markPoint: {
-                              data: [
-                                  {type: 'max', name: '最大值'}
-                              ],
-                              symbol: `image://${require('../../assets/index/line-tips.png')}`,
-                              symbolSize: [99, 40],
-                              symbolOffset: [50, -35],
-                              label: {
-                                  color: '#fff',
-                                  position: [16, 6],
-                                  formatter: ['采集：{a|' + valueArr1[maxValueIndex] + '}', '巡访：{b|' + maxValue + '}'].join('\n'),
-                                  rich:{
-                                      a: {
-                                          fontSize: 14,
-                                          color: this.colorArr[0].lineColor
-                                      },
-                                      b: {
-                                          fontSize: 14,
-                                          color: this.colorArr[1].lineColor,
-                                          padding: [3, 0]
-                                      }
-                                  }
-                              }
-                          },
-                          itemStyle: {
-                              color:this.colorArr[1].lineColor,
-                          },
-                          lineStyle: {
-                              width: 2
-                          }
-                      },
-                      {
-                          data: barArr,
-                          type: 'bar',
-                          barWidth: 2,
-                          color: '#c0e7ff'
-                      }
-                  ]
-              });
-          }
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex3'));
+                this.myChart.setOption({
+                    grid: {
+                        left: "6%",
+                        right: "6%",
+                        bottom: '20%'
+                    },
+                    legend: {
+                        data: ['采集数据', '巡访数据'],
+                        right: '4%',
+                        top: '2%',
+                        textStyle: {//图例文字的样式
+                            color: '#ccc',
+                            fontSize: this.fontSize(0.16)
+                        },
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: this.dataArr[0].data.map((item) => {
+                            return item.label + '月';
+                        }),
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        axisLabel: {
+                            show: true,
+                            color: '#fff'
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        max: yMaxValue,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        }
+                    },
+                    series: [
+                        {
+                            type: 'line',
+                            smooth: true,
+                            name: this.dataArr[0].label,
+                            areaStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 1,
+                                    colorStops: [{
+                                        offset: 0, color: this.colorArr[0].areaColor // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                    }],
+                                    global: false // 缺省为 false
+                                }
+                            },
+                            symbol: `image://${require('../../assets/index/line-point-blue.png')}`,
+                            symbolSize: [17, 17],
+                            data: valueArr1,
+                            itemStyle: {
+                                color: this.colorArr[0].lineColor,
+                            },
+                            lineStyle: {
+                                width: 2
+                            }
+                        },
+                        {
+                            type: 'line',
+                            smooth: true,
+                            name: this.dataArr[1].label,
+                            areaStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 1,
+                                    colorStops: [{
+                                        offset: 0, color: this.colorArr[1].areaColor // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
+                                    }],
+                                    global: false // 缺省为 false
+                                }
+                            },
+                            symbol: `image://${require('../../assets/index/line-point-yellow.png')}`,
+                            symbolSize: [17, 17],
+                            data: valueArr2,
+                            markPoint: {
+                                data: [
+                                    {type: 'max', name: '最大值'}
+                                ],
+                                symbol: `image://${require('../../assets/index/line-tips.png')}`,
+                                symbolSize: [99, 40],
+                                symbolOffset: [50, -35],
+                                label: {
+                                    color: '#fff',
+                                    position: [16, 6],
+                                    formatter: ['采集：{a|' + valueArr1[maxValueIndex] + '}', '巡访：{b|' + maxValue + '}'].join('\n'),
+                                    rich: {
+                                        a: {
+                                            fontSize: 14,
+                                            color: this.colorArr[0].lineColor
+                                        },
+                                        b: {
+                                            fontSize: 14,
+                                            color: this.colorArr[1].lineColor,
+                                            padding: [3, 0]
+                                        }
+                                    }
+                                }
+                            },
+                            itemStyle: {
+                                color: this.colorArr[1].lineColor,
+                            },
+                            lineStyle: {
+                                width: 2
+                            }
+                        },
+                        {
+                            data: barArr,
+                            type: 'bar',
+                            barWidth: 2,
+                            color: '#c0e7ff'
+                        }
+                    ]
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
+            }
         },
         mounted() {
-          this.draw();
+            this.draw();
         }
     }
 </script>

src/components/index/4.vue

@@ -42,30 +42,30 @@
               this.dataArr = result;
 
               const seriesArr = [];
-              for(let i = 0; i < this.dataArr.length; i++) {
-                  const kkArr = new Array(length).fill({});
-                  kkArr[i] = { value: 100, symbolPosition: 'start' };
-                  let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
-                  if(i < 4) {
-                      symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
-                  }
-                  seriesArr.push({
-                      type: 'pictorialBar',
-                      symbol: symbolImage,
-                      symbolSize: [24, 24],
-                      symbolOffset: [-40, -8],
-                      data: kkArr,
-                      label: {
-                          show: true,
-                          position: 'left',
-                          offset: [-19, -6],
-                          color: '#fff',
-                          fontSize: 14,
-                          formatter: `${ i + 1 }`
-                      },
-                      z: 2
-                  });
-              }
+              // for(let i = 0; i < this.dataArr.length; i++) {
+              //     const kkArr = new Array(length).fill({});
+              //     kkArr[i] = { value: 100, symbolPosition: 'start' };
+              //     let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
+              //     if(i < 4) {
+              //         symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
+              //     }
+              //     seriesArr.push({
+              //         type: 'pictorialBar',
+              //         symbol: symbolImage,
+              //         symbolSize: [24, 24],
+              //         symbolOffset: [-40, -8],
+              //         data: kkArr,
+              //         label: {
+              //             show: true,
+              //             position: 'left',
+              //             offset: [-19, -6],
+              //             color: '#fff',
+              //             fontSize: this.fontSize(0.17),
+              //             formatter: `${ i + 1 }`
+              //         },
+              //         z: 2
+              //     });
+              // }
 
               if(this.myChart != null) {
                   this.myChart.clear();
@@ -74,10 +74,10 @@
               this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
               this.myChart.setOption({
                   grid: {
-                      top: '19%',
-                      bottom: '-8%',
+                      top: '10%',
+                      bottom: '-18%',
                       right: '0%',
-                      left: '15%',
+                      left: '2%',
                       containLabel: true
                   },
                   xAxis: {
@@ -121,7 +121,7 @@
                           align: 'right',
                           verticalAlign: 'bottom',
                           lineHeight: 30,
-                          fontSize: 16,
+                          fontSize: this.fontSize(0.16),
                           color: '#fff',
                           formatter: (value, index) => {
                               return this.dataArr[index].value + '   ';
@@ -153,7 +153,7 @@
                               show: true,
                               position: [0, '-20px'],
                               textStyle: {
-                                  fontSize: 15
+                                  fontSize: this.fontSize(0.16)
                               },
                               formatter: function(a,) {
                                   return a.name;
@@ -168,30 +168,30 @@
               this.dataArr = result;
 
               const seriesArr = [];
-              for(let i = 0; i < this.dataArr.length; i++) {
-                  const kkArr = new Array(length).fill({});
-                  kkArr[i] = { value: 100, symbolPosition: 'start' };
-                  let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
-                  if(i < 4) {
-                      symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
-                  }
-                  seriesArr.push({
-                      type: 'pictorialBar',
-                      symbol: symbolImage,
-                      symbolSize: [24, 24],
-                      symbolOffset: [-40, -8],
-                      data: kkArr,
-                      label: {
-                          show: true,
-                          position: 'left',
-                          offset: [-19, -6],
-                          color: '#fff',
-                          fontSize: 14,
-                          formatter: `${ i + 1 }`
-                      },
-                      z: 2
-                  });
-              }
+              // for(let i = 0; i < this.dataArr.length; i++) {
+              //     const kkArr = new Array(length).fill({});
+              //     kkArr[i] = { value: 100, symbolPosition: 'start' };
+              //     let symbolImage = `image://${require('../../assets/index/y-text-4.png')}`;
+              //     if(i < 4) {
+              //         symbolImage =  `image://${require('../../assets/index/y-text-' + (i + 1) + '.png')}`
+              //     }
+              //     seriesArr.push({
+              //         type: 'pictorialBar',
+              //         symbol: symbolImage,
+              //         symbolSize: [24, 24],
+              //         symbolOffset: [-40, -8],
+              //         data: kkArr,
+              //         label: {
+              //             show: true,
+              //             position: 'left',
+              //             offset: [-19, -6],
+              //             color: '#fff',
+              //             fontSize: this.fontSize(0.17),
+              //             formatter: `${ i + 1 }`
+              //         },
+              //         z: 2
+              //     });
+              // }
 
               if(this.myChart != null) {
                   this.myChart.clear();
@@ -199,13 +199,13 @@
 
               this.myChart = this.$echarts.init(document.getElementById('myChartindex4'));
               this.myChart.setOption({
-                  grid: {
-                      top: '19%',
-                      bottom: '-8%',
-                      right: '0%',
-                      left: '15%',
-                      containLabel: true
-                  },
+                grid: {
+                  top: '10%',
+                  bottom: '-18%',
+                  right: '2%',
+                  left: '2%',
+                  containLabel: true
+                },
                   xAxis: {
                       show: false,
                       max: this.getMaxValueOfArray(this.dataArr)
@@ -247,7 +247,7 @@
                           align: 'right',
                           verticalAlign: 'bottom',
                           lineHeight: 30,
-                          fontSize: 16,
+                        fontSize: this.fontSize(0.16),
                           color: '#fff',
                           formatter: (value, index) => {
                               return this.dataArr[index].value + '   ';
@@ -279,7 +279,7 @@
                               show: true,
                               position: [0, '-20px'],
                               textStyle: {
-                                  fontSize: 15
+                                fontSize: this.fontSize(0.16)
                               },
                               formatter: function(a,) {
                                   return a.name;
@@ -288,6 +288,13 @@
                       }
                   }, ...seriesArr]
               });
+          },
+
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
           }
         },
         mounted() {

src/components/index/5.vue

@@ -1,273 +1,287 @@
 <template>
-  <div id="myChartindex5" style="width: 100%; height: 100%; "></div>
+    <div id="myChartindex5" style="width: 100%; height: 100%;"></div>
 </template>
 
 <script>
-    import { fourquan } from '../../api'
+    import {fourquan} from '../../api'
 
     import 'echarts-liquidfill'
+
     export default {
         name: "OperationAnalysisCount",
         data() {
-          return {
-            data1: { label: '巡访平均周期', value: '3.5天' },
-            data2: { label: '子女绑定占比', value: '60%' },
-            data3: { label: '积分存量', value: 123156 },
-            data4: { label: '兑换比例', value: '60%' },
-            colorArr: [
-              { color1: '#ff8d00', color2: '#FFF43F' },
-              { color1: '#5fff06', color2: '#B4FF9F' },
-              { color1: '#60b8db', color2: '#afd3ff' },
-              { color1: '#ff00e8', color2: '#f48fff' }
-            ],
-            myChart: null
-          }
+            return {
+                data1: {label: '巡访平均周期', value: '3.5天'},
+                data2: {label: '子女绑定占比', value: '60%'},
+                data3: {label: '积分存量', value: 123156},
+                data4: {label: '兑换比例', value: '60%'},
+                colorArr: [
+                    {color1: '#ff8d00', color2: '#FFF43F'},
+                    {color1: '#5fff06', color2: '#B4FF9F'},
+                    {color1: '#60b8db', color2: '#afd3ff'},
+                    {color1: '#ff00e8', color2: '#f48fff'}
+                ],
+                myChart: null
+            }
         },
         methods: {
-          handlerData(val) {
-            const length = String(parseInt(val)).length;
-            let r = 1;
-            if(length != 0) {
-              r = r + new Array(length).fill(0).join('');
-            }
-            return (parseInt(val) / parseInt(r)).toFixed(2);
-          },
-          createLiquidfill(obj) {
-            return {
-              type: 'liquidFill',
-              data: [obj.value],
-              radius: '30%',
-              center: [`${obj.center_x}%`, `${obj.center_y}%`],
-              outline: {
-                show: false
-              },
-              backgroundStyle: {
-                borderWidth: 0,
-                color: "transparent"
-              },
-              waveAnimation: false, // 禁止左右波动
-              label: {
-                normal: {
-                  position: ['50%', '53%'],
-                  textStyle: {
-                    fontSize: 24,
-                    color: '#fff'
-                  },
-                  formatter: `${ obj.text }`
+            handlerData(val) {
+                const length = String(parseInt(val)).length;
+                let r = 1;
+                if (length != 0) {
+                    r = r + new Array(length).fill(0).join('');
                 }
-              },
-              itemStyle: {
-                normal: {
-                  color: new this.$echarts.graphic.LinearGradient(
-                    0, 0, 0, 1,
-                    [
-                      {offset: 0, color: this.colorArr[obj.index].color1},
-                      {offset: 1, color: this.colorArr[obj.index].color2}
-                    ]
-                  )
-                }
-              }
-            };
-          },
-          createCircleImage(){
-
-          },
-          async draw() {
-              const result = await fourquan({}, 'POST');
-              this.data1 = result.data1;
-              this.data2 = result.data2;
-              this.data3 = result.data3;
-              this.data4 = result.data4;
-
-              const seriesArr = [];
-
-              const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 16, center_y: 28, text: this.data1.value, value: this.handlerData(this.data1.value) });
-              seriesArr.push(liquidFill1);
+                return (parseInt(val) / parseInt(r)).toFixed(2);
+            },
+            createLiquidfill(obj) {
+                return {
+                    type: 'liquidFill',
+                    data: [obj.value],
+                    radius: '67%',
+                    center: [`${obj.center_x}%`, `${obj.center_y}%`],
+                    outline: {
+                        show: false
+                    },
+                    backgroundStyle: {
+                        borderWidth: 0,
+                        color: "transparent"
+                    },
+                    waveAnimation: false, // 禁止左右波动
+                    label: {
+                        normal: {
+                            position: ['50%', '53%'],
+                            textStyle: {
+                                fontSize:  this.fontSize(0.3),
+                                color: '#fff'
+                            },
+                            formatter: `${obj.text}`
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0, 0, 0, 1,
+                                [
+                                    {offset: 0, color: this.colorArr[obj.index].color1},
+                                    {offset: 1, color: this.colorArr[obj.index].color2}
+                                ]
+                            )
+                        }
+                    }
+                };
+            },
+            createCircleImage() {
 
-              const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 58, center_y: 28, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
-              seriesArr.push(liquidFill2);
+            },
+            async draw() {
+                const result = await fourquan({}, 'POST');
+                this.data1 = result.data1;
+                this.data2 = result.data2;
+                this.data3 = result.data3;
+                this.data4 = result.data4;
 
-              const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 16, center_y: 78, text: this.data3.value, value: this.handlerData(this.data3.value) });
-              seriesArr.push(liquidFill3);
+                const seriesArr = [];
 
-              const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 58, center_y: 78, text: this.data4.value, value: this.handlerData(this.data4.value) });
-              seriesArr.push(liquidFill4);
+                const liquidFill1 = this.createLiquidfill({
+                    index: 0,
+                    center_x: 46,
+                    center_y: 55,
+                    text: this.data1.value,
+                    value: this.handlerData(this.data1.value)
+                });
+                seriesArr.push(liquidFill1);
 
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
-                  symbolSize: [102, 102],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, -100] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [-45, -90],
-                      color: '#fff',
-                      fontSize: 16,
-                      formatter: '巡访平均周期'
-                  },
-                  z: 2
-              });
+                // const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 66, center_y: 28, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
+                // seriesArr.push(liquidFill2);
+                //
+                // const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 16, center_y: 78, text: this.data3.value, value: this.handlerData(this.data3.value) });
+                // seriesArr.push(liquidFill3);
+                //
+                // const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 66, center_y: 78, text: this.data4.value, value: this.handlerData(this.data4.value) });
+                // seriesArr.push(liquidFill4);
 
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
-                  symbolSize: [62, 5],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, -60] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [-60, -55],
-                      color: this.colorArr[0].color1,
-                      fontSize: 16,
-                      formatter: this.data1.value
-                  },
-                  z: 2
-              });
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
+                //     symbolSize: [40, 40],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, -100] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-45, -90],
+                //         color: '#fff',
+                //         fontSize: 16,
+                //         formatter: '巡访平均周期'
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
+                //     symbolSize: [62, 5],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, -60] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, -55],
+                //         color: this.colorArr[0].color1,
+                //         fontSize: 16,
+                //         formatter: this.data1.value
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
+                //     symbolSize: [102, 102],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [160, -90],
+                //         color: '#fff',
+                //         fontSize: 16,
+                //         formatter: '子女绑定占比'
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
+                //     symbolSize: [62, 5],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [150, -55],
+                //         color: this.colorArr[1].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data2.value}%`
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
+                //     symbolSize: [102, 102],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, 30] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, 40],
+                //
+                //         color: '#fff',
+                //         fontSize: 16,
+                //         formatter: '积分存量'
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
+                //     symbolSize: [62, 5],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, 70] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [-60, 75],
+                //         color: this.colorArr[2].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data3.value}`
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
+                //     symbolSize: [102, 102],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [150, 40],
+                //         color: '#fff',
+                //         fontSize: 16,
+                //         formatter: '兑换比例'
+                //     },
+                //     z: 2
+                // });
+                //
+                // seriesArr.push({
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
+                //     symbolSize: [62, 5],
+                //     data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
+                //     label: {
+                //         show: true,
+                //         position: 'top',
+                //         offset: [150, 80],
+                //         color: this.colorArr[3].color1,
+                //         fontSize: 16,
+                //         formatter: `${this.data4.value}`
+                //     },
+                //     z: 2
+                // });
 
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
-                  symbolSize: [102, 102],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [160, -90],
-                      color: '#fff',
-                      fontSize: 16,
-                      formatter: '子女绑定占比'
-                  },
-                  z: 2
-              });
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
-                  symbolSize: [62, 5],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [150, -55],
-                      color: this.colorArr[1].color1,
-                      fontSize: 16,
-                      formatter: `${this.data2.value}%`
-                  },
-                  z: 2
-              });
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
-                  symbolSize: [102, 102],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, 30] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [-60, 40],
-
-                      color: '#fff',
-                      fontSize: 16,
-                      formatter: '积分存量'
-                  },
-                  z: 2
-              });
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
-                  symbolSize: [62, 5],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, 70] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [-60, 75],
-                      color: this.colorArr[2].color1,
-                      fontSize: 16,
-                      formatter: `${this.data3.value}`
-                  },
-                  z: 2
-              });
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
-                  symbolSize: [102, 102],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [150, 40],
-                      color: '#fff',
-                      fontSize: 16,
-                      formatter: '兑换比例'
-                  },
-                  z: 2
-              });
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
-                  symbolSize: [62, 5],
-                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      offset: [150, 80],
-                      color: this.colorArr[3].color1,
-                      fontSize: 16,
-                      formatter: `${this.data4.value}`
-                  },
-                  z: 2
-              });
+                if (this.myChart != null) {
+                    this.myChart.clear();
+                }
 
-              if(this.myChart != null) {
-                  this.myChart.clear();
-              }
+                this.myChart = this.$echarts.init(document.getElementById('myChartindex5'));
+                this.myChart.setOption({
+                    grid: {
+                        left: "2%"
+                    },
+                    xAxis: {
+                        type: 'value',
+                        max: 100,
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'category',
+                        splitLine: {
+                            show: false
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    series: seriesArr
+                });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
 
-              this.myChart = this.$echarts.init(document.getElementById('myChartindex5'));
-              this.myChart.setOption({
-                  grid:{
-                      left:"2%"
-                  },
-                  xAxis: {
-                      type: 'value',
-                      max: 100,
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: false
-                      },
-                      axisLabel: {
-                          show: false
-                      },
-                      axisTick: {
-                          show: false
-                      }
-                  },
-                  yAxis: {
-                      type: 'category',
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: false
-                      },
-                      axisLabel: {
-                          show: false
-                      },
-                      axisTick: {
-                          show: false
-                      }
-                  },
-                  series: seriesArr
-              });
-          }
+            }
         },
         mounted() {
-          this.draw();
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/1.vue

@@ -1,134 +1,224 @@
 <template>
-  <div id="myChartold1" style="width: 100%; height: 100%; "></div>
+    <!--  <div id="myChartold1" style="width: 100%; height: 100%; "></div>-->
+    <div class="flex-box">
+        <div class="flex-box1">
+            <div class="title">{{this.dataArr[0].label}}</div>
+            <div class="title1">{{this.dataArr[0].percent}}</div>
+            <div class="title2">{{this.dataArr[0].value}}人</div>
+        </div>
+        <div class="flex-box2">
+            <div class="title">{{this.dataArr[1].label}}</div>
+            <div class="title1" style="color:#e9f82d;">{{this.dataArr[1].percent}}</div>
+            <div class="title2" style="color:#e9f82d;">{{this.dataArr[1].value}}人</div>
+        </div>
+        <div class="flex-box3">
+            <div class="title">{{this.dataArr[2].label}}</div>
+            <div class="title1" style="color:#32fc6b;">{{this.dataArr[2].percent}}</div>
+            <div class="title2" style="color:#32fc6b;">{{this.dataArr[2].value}}人</div>
+        </div>
+        <div class="flex-box4">
+            <div class="title">{{this.dataArr[3].label}}</div>
+            <div class="title1" style="color:#fec400;">{{this.dataArr[3].percent}}</div>
+            <div class="title2" style="color:#fec400;">{{this.dataArr[3].value}}人</div>
+        </div>
+
+    </div>
 </template>
 
 <script>
-  import { oldPersonFournums } from '../../api'
-
-  export default {
-    //老年人年龄分布统计
-    name: "OldPersonAgeCount",
-    data() {
-      return {
-        dataArr: [],
-        colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)'],
-        myChart: null
-      }
-    },
-    methods: {
-      async draw() {
-          if(this.myChart != null) {
-              this.myChart.clear();
-          }
-          const result = await oldPersonFournums({}, 'POST');
-          this.dataArr = result;
-
-          const seriesArr = [];
-          for(let i = 0; i < this.dataArr.length; i++) {
-              const d = this.dataArr[i];
-
-              const arr = new Array(this.dataArr.length).fill({});
-              arr[i] = { value: 130 };
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
-                  symbolSize: [147, 147],
-                  symbolOffset: [0, -50],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      textStyle: {
-                          fontSize: 15
-                      },
-                      color: this.colorArr[i],
-                      fontWeight: 'bold',
-                      offset: [0, 70],
-                      formatter: d.percent
-                  },
-                  data: arr
-              });
-
-              const topArr = new Array(this.dataArr.length).fill({});
-              topArr[i] = { value: 155 };
-
-              seriesArr.push({
-                  type: 'pictorialBar',
-                  symbol: `image://${require('../../assets/oldStatistics/age-' + i + '-1.png')}`,
-                  symbolSize: [121, 6],
-                  symbolOffset: [0, -220],
-                  label: {
-                      show: true,
-                      position: 'top',
-                      textStyle: {
-                          fontSize: 15
-                      },
-                      color: this.colorArr[i],
-                      fontWeight: 'bold',
-                      offset: [0, 80],
-                      formatter: `${d.value}人`
-                  },
-                  data: topArr
-              });
-          }
-
-          this.myChart = this.$echarts.init(document.getElementById('myChartold1'));
-          this.myChart.setOption(
-              {
-                  grid:{
-                      right:"14%",
-                  },
-                  xAxis: {
-                      type: 'category',
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: false
-                      },
-                      axisLabel: {
-                          show: true,
-                          color: '#fff',
-                          fontWeight: 'bold',
-                          fontSize: 15,
-                          margin: -230
-                      },
-                      axisTick: {
-                          show: false
-                      },
-                      data: this.dataArr.map((item) => {
-                          return item.label;
-                      })
-                  },
-                  yAxis: {
-                      type: 'value',
-                      axisLabel: {
-                          formatter: '{value}%'
-                      },
-                      splitLine: {
-                          show: false
-                      },
-                      axisLine: {
-                          show: false
-                      },
-                      axisTick: {
-                          show: false
-                      },
-                      // axisLabel: {
-                      //   show: false
-                      // }
-                  },
-                  series: seriesArr
-              }
-          );
-      }
-    },
-    mounted() {
-      this.draw();
+    import {oldPersonFournums} from '../../api'
+
+    export default {
+        //老年人年龄分布统计
+        name: "OldPersonAgeCount",
+        data() {
+            return {
+                dataArr: [],
+                colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)'],
+                myChart: null
+            }
+        },
+        methods: {
+            async draw() {
+                // if (this.myChart != null) {
+                //     this.myChart.clear();
+                // }
+                const result = await oldPersonFournums({}, 'POST');
+                this.dataArr = result;
+                console.log(this.dataArr,"0000000000000000000000000000")
+
+                const seriesArr = [];
+                for (let i = 0; i < this.dataArr.length; i++) {
+                    const d = this.dataArr[i];
+
+                    const arr = new Array(this.dataArr.length).fill({});
+                    arr[i] = {value: 130};
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
+                        symbolSize: [147, 147],
+                        symbolOffset: [0, -50],
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 15
+                            },
+                            color: this.colorArr[i],
+                            fontWeight: 'bold',
+                            offset: [0, 70],
+                            formatter: d.percent
+                        },
+                        data: arr
+                    });
+
+                    const topArr = new Array(this.dataArr.length).fill({});
+                    topArr[i] = {value: 155};
+
+                    seriesArr.push({
+                        type: 'pictorialBar',
+                        symbol: `image://${require('../../assets/oldStatistics/age-' + i + '-1.png')}`,
+                        symbolSize: [121, 6],
+                        symbolOffset: [0, -220],
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 15
+                            },
+                            color: this.colorArr[i],
+                            fontWeight: 'bold',
+                            offset: [0, 80],
+                            formatter: `${d.value}人`
+                        },
+                        data: topArr
+                    });
+                }
+
+                this.myChart = this.$echarts.init(document.getElementById('myChartold1'));
+                this.myChart.setOption(
+                    {
+                        grid: {
+                            right: "14%",
+                        },
+                        xAxis: {
+                            type: 'category',
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                show: true,
+                                color: '#fff',
+                                fontWeight: 'bold',
+                                fontSize: 15,
+                                margin: -230
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            data: this.dataArr.map((item) => {
+                                return item.label;
+                            })
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLabel: {
+                                formatter: '{value}%'
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            // axisLabel: {
+                            //   show: false
+                            // }
+                        },
+                        series: seriesArr
+                    }
+                );
+            }
+        },
+        mounted() {
+            this.draw();
+        }
     }
-  }
 </script>
 
 <style scoped>
+    .flex-box {
+        display: flex;
+        height: 100%;
+        height: 100%;
+    }
+
+    .flex-box1 {
+        background: url("../../assets/oldStatistics/age1.png") no-repeat;
+        background-size: contain;
+        width: 22%;
+        height: 100%;
+        margin-top: 8%;
+        position: relative;
+    }
+
+    .flex-box2 {
+        background: url("../../assets/oldStatistics/age2.png") no-repeat;
+        background-size: contain;
+        width: 22%;
+        height: 100%;
+        margin-top: 8%;
+        position: relative;
+    }
+
+    .flex-box3 {
+        background: url("../../assets/oldStatistics/age3.png") no-repeat;
+        background-size: contain;
+        width: 22%;
+        height: 100%;
+        margin-top: 8%;
+        position: relative;
+    }
+
+    .flex-box4 {
+        background: url("../../assets/oldStatistics/age4.png") no-repeat;
+        background-size: contain;
+        width: 22%;
+        height: 100%;
+        margin-top: 8%;
+        position: relative;
+    }
+    .title {
+        color: white;
+        margin-top: -6%;
+        font-size: 0.5em;
+    }
+
+    .title1 {
+        color: #00d7ff;
+        position: absolute;
+        top: 18%;
+        left: 30%;
+        width: 40%;
+        font-size: 0.5em;
+        text-align: center;
+    }
+
+    .title2 {
+        position: absolute;
+        top: 25%;
+        left: 30%;
+        width: 40%;
+        color: #00d7ff;
+        font-size: 0.5em;
+        text-align: center;
+    }
 
 </style>

src/components/oldStatistics/10.vue

@@ -1,138 +1,142 @@
 <template>
-  <div id="myChartold10" style="width: 100%; height: 100%; "></div>
+    <div id="myChartold10" style="width: 100%; height: 100%; "></div>
 </template>
 
 <script>
-    import { oldPersonLivingCondition } from '../../api'
+    import {oldPersonLivingCondition} from '../../api'
 
     export default {
         //老年人生活经济状况统计
         name: "OldPersonLivingConditionsCount",
         data() {
-          return {
-            dataArr: []
-          }
+            return {
+                dataArr: []
+            }
         },
         methods: {
-          async draw() {
-              const result = await oldPersonLivingCondition({}, 'POST');
-              this.dataArr = result;
+            async draw() {
+                const result = await oldPersonLivingCondition({}, 'POST');
+                this.dataArr = result;
 
-              this.myChart = this.$echarts.init(document.getElementById('myChartold10'));
-              this.myChart.setOption({
-                  grid:{
-                      left:"16%",
-                      right:"5%",
-                  },
-                  xAxis: {
-                      type: 'category',
-                      boundaryGap: true,
-                      data: this.dataArr.map((item) => {
-                          return item.lable;
-                      }),
-                      splitLine: {
-                          show: true,
-                          lineStyle:{
-                              color: ['#315070'],
-                              width: 1,
-                              type: 'solid'
-                          }
-                      },
-                      axisLine: {
-                          show: true,
-                          lineStyle: {
-                              color: '#5c6ab6'
-                          }
-                      },
-                      axisLabel: {
-                          show: true,
-                          textStyle: {
-                              color: 'white',
-                          },
-                          fontSize: 12
-                      },
-                      axisTick: {
-                          show: false
-                      }
-                  },
-                  yAxis: {
-                      type: 'value',
-                      axisLabel: {
-                          formatter: '{value}',
-                          show: true,
-                          fontSize: 12,
-                          textStyle: {
-                              color: 'white',
-                          },
-                      },
-                      splitLine: {
-                          show: true,
-                          lineStyle:{
-                              color: ['#315070'],
-                              width: 1,
-                              type: 'solid'
-                          }
-                      },
-                      axisLine: {
-                          show: true,
-                          lineStyle: {
-                              color: '#5c6ab6'
-                          }
-                      },
-                      axisTick: {
-                          show: false
-                      },
+                this.myChart = this.$echarts.init(document.getElementById('myChartold10'));
+                this.myChart.setOption({
+                    grid: {
+                        left: "16%",
+                        right: "5%",
 
-                  },
-                  series: [
-                      {
-                          type: 'line',
-                          smooth: true,
-                          areaStyle: {
-                              color: {
-                                  type: 'linear',
-                                  x: 0,
-                                  y: 0,
-                                  x2: 1,
-                                  y2: 0,
-                                  colorStops: [{
-                                      offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
-                                  }, {
-                                      offset: 1, color: 'rgba(215, 0, 255, 0.2)' // 100% 处的颜色
-                                  }],
-                                  global: false // 缺省为 false
-                              }
-                          },
-                          symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
-                          symbolSize: [10, 10],
-                          data: this.dataArr.map((item) => {
-                              return item.value;
-                          }),
-                          label: {
-                              show: true,
-                              formatter: '{c}',
-                              color: '#fff',
-                              fontSize: 16
-                          },
-                          itemStyle: {
-                              color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                                  offset: 0,
-                                  color: '#d700ff'
-                              }, {
-                                  offset: 1,
-                                  color: '#0090ff'
-                              }]),
-                          },
-                          lineStyle: {
-                              width: 2
-                          }
-                      }
-                  ]
-              });
-          }
+                    },
+
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: true,
+                        data: this.dataArr.map((item) => {
+                            return item.lable;
+                        }),
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#5c6ab6'
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                color: 'white',
+                            },
+                            fontSize: 12,
+                            interval: 0,
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            formatter: '{value}',
+                            show: true,
+                            fontSize: 12,
+                            textStyle: {
+                                color: 'white',
+                            },
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#315070'],
+                                width: 1,
+                                type: 'solid'
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#5c6ab6'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+
+                    },
+                    series: [
+                        {
+                            type: 'line',
+                            smooth: true,
+                            areaStyle: {
+                                color: {
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 1,
+                                    y2: 0,
+                                    colorStops: [{
+                                        offset: 0, color: 'rgba(0, 144, 255, 0.2)' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'rgba(215, 0, 255, 0.2)' // 100% 处的颜色
+                                    }],
+                                    global: false // 缺省为 false
+                                }
+                            },
+                            symbol: `image://${require('../../assets/oldStatistics/y.png')}`,
+                            symbolSize: [10, 10],
+                            data: this.dataArr.map((item) => {
+                                return item.value;
+                            }),
+                            label: {
+                                show: true,
+                                formatter: '{c}',
+                                color: '#fff',
+                                fontSize: 16
+                            },
+                            itemStyle: {
+                                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                                    offset: 0,
+                                    color: '#d700ff'
+                                }, {
+                                    offset: 1,
+                                    color: '#0090ff'
+                                }]),
+                            },
+                            lineStyle: {
+                                width: 2
+                            }
+                        }
+                    ]
+                });
+            }
         },
         mounted() {
-          this.draw();
+            this.draw();
         }
     }
 </script>

src/components/oldStatistics/2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="myChartold2" style="width: 100%; height: 100%; "></div>
+  <div id="myChartold2" style=" width: 100%; height: 100%;"></div>
 </template>
 
 <script>
@@ -12,7 +12,7 @@
             dataArr: [],
             colorArr: [
               { color1: '#009cff', color2: '#5BB4FF' },
-              { color1: '#ff5b00', color2: '#FF9648' }
+              // { color1: '#ff5b00', color2: '#FF9648' }
             ],
             myChart: null
           }
@@ -21,106 +21,117 @@
             async draw() {
                 if (this.myChart)
                 {
-                    this.myChart.clear();
+                    this.myChart.dispose();
                 }
+                let title=[];
                 const result = await oldPersonSex({}, 'POST');
                 this.dataArr = result;
-
                 const seriesArr = [];
+              console.log(this.dataArr[0],"7878787878")
+                if(this.dataArr[0]) {
+                  title.push({
+                    text: this.dataArr[0].percent,
+                    x: 'center',
+                    y: 'center',
+                    textStyle: {
+                      fontWeight: 'normal',
+                      color: this.colorArr[0].color2,
+                      fontSize: '14'
+                    }
 
+                  });
+                }
                 for(let i = 0; i < this.dataArr.length; i++) {
-                    const d = this.dataArr[i];
-
-                    seriesArr.push({
-                        type: 'pie',
-                        radius: [38, 70],
-                        center: [`${ i == 0 ?  30: 70 }%`, '56%'],
-                        startAngle: 90,
-                        clockwise: false,
-                        labelLine: {
-                            show: false
-                        },
-                        data: [{
-                            value: parseInt(d.percent),
-                            itemStyle: {
-                                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                    offset: 0,
-                                    color: this.colorArr[i].color1
-                                }, {
-                                    offset: 1,
-                                    color: this.colorArr[i].color2
-                                }])
-                            }
-                        },
-                            {
-                                value: 100 - parseInt(d.percent),
-                                itemStyle: {
-                                    color: "transparent"
-                                }
-                            }],
-                        z: 1
-                    });
-
-                    seriesArr.push({
-                        type: 'pictorialBar',
-
-                        symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
-                        symbolSize: [144, 143],
-                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
-                        label: {
-                            normal: {
-                                show: true,
-                                position: "top",
-                                offset: [i == 0 ? -120 : 120, 0],
-                                textStyle: {
-                                    fontSize: 18,
-                                    color: '#fff'
-                                },
-                                formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
-                                rich:{
-                                    a: {
-                                        fontSize: 26,
-                                        color: this.colorArr[i].color1
-                                    },
-                                    b: {
-                                        fontSize: 18,
-                                        color: '#fff',
-                                        padding: [5, 0]
-                                    }
-                                }
-                            }
+                  seriesArr.push({
+                    type: 'pie',
+                    radius: ['100%', '60%'],
+                    center: [`50%`, '50%'],
+                    startAngle: 90,
+                    clockwise: false,
+                    labelLine: {
+                      show: false
+                    },
+                    data: [{
+                      value: parseInt(this.dataArr[0].percent),
+                      itemStyle: {
+                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                          offset: 0,
+                          color: this.colorArr[0].color1
                         },
-                        z: 2
-                    });
-
-                    seriesArr.push({
-                        type: 'pictorialBar',
+                          {
+                            offset: 1,
+                            color: this.colorArr[0].color2
+                          }])
+                      }
+                    },
+                      {
+                        value: 100 - parseInt(this.dataArr[0].percent),
+                        itemStyle: {
+                          color: "transparent"
+                        }
+                      }],
+                    z: 1
+                  });
 
-                        symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
-                        symbolSize: [53, 52],
-                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
-                        label: {
-                            normal: {
-                                show: true,
-                                position: "top",
-                                offset: [i == 0 ? -120 : 120, 50],
-                                textStyle: {
-                                    fontSize: 20,
-                                    color: this.colorArr[i].color1
-                                },
-                                formatter: () => {
-                                    return `${d.percent}`;
-                                }
-                            }
-                        },
-                        z: 1
-                    });
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol:  i == 0 ? `image://${require("../../assets/oldStatistics/old-person-sex-male.png")}` : `image://${require("../../assets/oldStatistics/old-person-sex-female.png")}`,
+                    //     symbolSize: [144, 143],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -120 : 120}`, 0] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 0],
+                    //             textStyle: {
+                    //                 fontSize: 18,
+                    //                 color: '#fff'
+                    //             },
+                    //             formatter: ['{a|' + d.value + '}', '{b|' + d.label + '}'].join('\n'),
+                    //             rich:{
+                    //                 a: {
+                    //                     fontSize: 26,
+                    //                     color: this.colorArr[i].color1
+                    //                 },
+                    //                 b: {
+                    //                     fontSize: 18,
+                    //                     color: '#fff',
+                    //                     padding: [5, 0]
+                    //                 }
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 2
+                    // });
+                    //
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol: i == 0 ?  `image://${require("../../assets/oldStatistics/old-person-male-icon.png")}` :  `image://${require("../../assets/oldStatistics/old-person-female-icon.png")}`,
+                    //     symbolSize: [53, 52],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -230 : 10}`, -50] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -120 : 120, 50],
+                    //             textStyle: {
+                    //                 fontSize: 20,
+                    //                 color: this.colorArr[i].color1
+                    //             },
+                    //             formatter: () => {
+                    //                 return `${d.percent}`;
+                    //             }
+                    //         }
+                    //     },
+                    //     z: 1
+                    // });
                 }
 
 
                 this.myChart = this.$echarts.init(document.getElementById('myChartold2'));
                 this.myChart.setOption(
                     {
+                      title:title,
                         xAxis: {
                             type: 'category',
                             splitLine: {
@@ -164,5 +175,8 @@
 </script>
 
 <style scoped>
-
+  /*#myChartold2 {*/
+  /*  background: url("../../assets/oldStatistics/old-2.png") no-repeat !important;*/
+  /*  background-size: 90% 90% !important;*/
+  /*}*/
 </style>

src/components/oldStatistics/3.vue

@@ -70,7 +70,7 @@
                 name:{
                   textStyle:{
                     // color:'#000'
-                    fontSize: 16
+                    fontSize: this.fontSize(0.17)
                   }
                 },
                 axisLabel: {
@@ -118,6 +118,13 @@
                 data: [ valueArr ]
               }]
             });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         mounted() {

src/components/oldStatistics/4.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="myChartold4" style="width: 100%; height: 100%; "></div>
+    <div id="myChartold4" style="width: 100%; height: 100%; border: 1px solid green"></div>
 </template>
 
 <script>
@@ -26,13 +26,27 @@
                 }
                 const result = await oldPersonAbility({}, 'POST');
                 this.dataArr = result;
-                const seriesArr = [{
-                    type: 'pictorialBar',
-                    symbol: `image://${require('../../assets/oldStatistics/new.png')}`,
-                    symbolSize: [94, 59],
-                    data: [{value: 200, symbolPosition: 'center', symbolOffset: [0, 0]}],
-                    z: 2
-                }];
+                // const seriesArr = [{
+                //     type: 'pictorialBar',
+                //     symbol: `image://${require('../../assets/oldStatistics/new.png')}`,
+                //     symbolSize: [94, 59],
+                //     data: [{value: 200, symbolPosition: 'center', symbolOffset: ['-120%', 0]}],
+                //     z: 1
+                // }];
+                const  seriesArr=[];
+                let elements=[
+                    {
+                        type: "image",
+                        style: {
+                            image: require('../../assets/oldStatistics/new.png'),
+                            width: 94,
+                            height: 59
+                        },
+                        left: "23%",
+                        top: "35%",
+                        z: 20,
+                    }
+                ];
                 let nameList = ['完全自理', '半失能', '失能'];
                 const titleArr = [];
                 for (let i = 0; i < this.dataArr.length; i++) {
@@ -53,8 +67,8 @@
                     titleArr.push({
                         text: d.value,
                         left: `72%`,
-                        top: `${17 + i * 29}%`,
-                        textAlign: "center",
+                        top: `${30 + i * 60}`,
+                        textAlign: "bottom",
                         textStyle: {
                             fontSize: "14",
                             fontWeight: 'normal',
@@ -66,7 +80,7 @@
 
                 seriesArr.push({
                     type: 'pie',
-                    radius: [70, 85],  //内部经 外半径
+                    radius: ['60%', '75%'],  //内部经 外半径
                     center: ['30%', '50%'],
                     clockwise: false,
                     labelLine: {
@@ -116,7 +130,7 @@
                 seriesArr.push({
                     name: '完全自理',
                     type: 'pie',
-                    radius: [70, 85],  //内部经 外半径
+                    radius: ["60%", '75%'],  //内部经 外半径
                     center: ['30%', '49%'],
                     clockwise: true,
                     labelLine: {
@@ -145,7 +159,7 @@
 
                 seriesArr.push({
                     type: 'pie',
-                    radius: [97, 100],  //内部经 外半径
+                    radius: ['80%','85%'],  //内部经 外半径
                     center: ['30%', '49%'],
                     clockwise: true,
                     labelLine: {
@@ -181,21 +195,24 @@
                     {
                         title: titleArr,
                         grid: {
-                            right: "50%",
+                            // right: "50%",
+                            // top:'20%',
+                            // left:"10%",
                         },
                         color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
                         legend: {
                             show: true,
                             orient: 'vertical',
                             top: 'middle',
-                            right: '220',
-                            itemGap: 70,
+                            right: '32%',
+                            itemGap: 50,
                             itemWidth: 13,
                             itemHeight: 13,
                             data: ['完全自理', '半失能', '失能'],
                             textStyle: {
                                 color: 'white',
                             },
+
                         },
                         xAxis: {
                             type: 'category',
@@ -228,7 +245,10 @@
                                 show: false
                             }
                         },
-                        series: seriesArr
+                        series: seriesArr,
+                        graphic: {
+                            elements: elements
+                        }
                     }
                 );
             }

src/components/oldStatistics/5.vue

@@ -26,7 +26,9 @@
 
               this.myChart = this.$echarts.init(document.getElementById('myChartold5'));
               this.myChart.setOption({
-
+                  grid:{
+                    left:'12%'
+                  },
                   xAxis: {
                       type: 'category',
                       data: this.dataArr.map((item) => item.label),
@@ -43,7 +45,8 @@
                           show: true,
                           textStyle: {
                               color: 'white'
-                          }
+                          },
+                        interval: 0,
                       }
 
                   },
@@ -62,7 +65,8 @@
                           show: true,
                           textStyle: {
                               color: 'white'
-                          }
+                          },
+
                       }
                   },
                   series: [{
@@ -84,10 +88,17 @@
                           show: true,
                           position: 'top',
                           color: '#fff',
-                          fontSize: 16
+                          fontSize: this.fontSize(0.17)
                       }
                   }]
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         mounted() {

src/components/oldStatistics/6.vue

@@ -92,8 +92,8 @@
                       },
                       label: {
                           show: true,
-                          position: 'bottom',
-                          offset: [0, -190],
+                          position: 'top',
+                          offset: [0, -10],
                           color: '#fff'
                       },
                       z: 1

src/components/oldStatistics/7.vue

@@ -46,7 +46,7 @@
                           offset: [10, 2],
                           distance: 0,
                           color: 'rgba(0, 124, 255, 1)',
-                          fontSize: 16,
+                          fontSize: this.fontSize(0.2),
                           formatter: `${d.value}`
                       },
                       z: 2
@@ -85,8 +85,8 @@
                   grid: {
                       top: '15%',
                       bottom: '15%',
-                      right: '15%',
-                      left: '10%',
+                      right: '18%',
+                      left: '4%',
                       containLabel: true
                   },
                   xAxis: {
@@ -115,7 +115,8 @@
                           show: true,
                           color: '#fff',
                           fontWeight: 'bold',
-                          fontSize: 16
+                          fontSize: this.fontSize(0.16),
+
                       },
                       axisLine: {
                           show: true,
@@ -126,6 +127,13 @@
                   },
                   series: seriesArr
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         mounted() {

src/components/oldStatistics/8.vue

@@ -51,7 +51,8 @@
                               color: 'white',
                               formatter: '{value}',
                           },
-                          fontSize: 12
+                          fontSize: this.fontSize(0.14),
+                        interval: 0,
                       },
                       axisTick: {
                           show: false
@@ -112,7 +113,7 @@
                               show: true,
                               formatter: '{c}',
                               color: '#fff',
-                              fontSize: 16
+                              fontSize: this.fontSize(0.16)
                           },
                           itemStyle: {
                               color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
@@ -129,6 +130,13 @@
                       }
                   ]
               });
+          },
+          fontSize(res) {
+            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            if (!clientWidth) return;
+            let fontSize = 100 * (clientWidth / 1920);
+            return res * fontSize;
+
           }
         },
         watch: {

src/components/oldStatistics/9.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="myChartold9" style="width: 100%; height: 100%; "></div>
+    <div id="myChartold9" style="width: 100%; height: 100%; "></div>
 </template>
 
 <script>
-    import { oldPersonIncome } from '../../api'
+    import {oldPersonIncome} from '../../api'
 
     export default {
         //老年人可支配收入统计
@@ -12,9 +12,9 @@
             return {
                 dataArr: [],
                 colorArr: [
-                    { color1: '#4625FF', color2: '#6DC0FF' },
-                    { color1: '#f6a314', color2: '#f4ff81' },
-                    { color1: '#45ff00', color2: '#8bffbb' }
+                    {color1: '#4625FF', color2: '#6DC0FF'},
+                    {color1: '#f6a314', color2: '#f4ff81'},
+                    {color1: '#45ff00', color2: '#8bffbb'}
                 ],
                 myChart: null
             }
@@ -25,81 +25,145 @@
                 this.dataArr = result;
 
                 const seriesArr = [];
-                const offset = 30;
-
-                for(let i = 0; i < this.dataArr.length; i++) {
+                // const offset = 30;
+                let positon = [
+                    ['15%', '70%'],
+                    ['50%', '10%'],
+                    ['80%', '70%'],
+                ];
+                let title = [];
+                for (let i = 0; i < this.dataArr.length; i++) {
                     const d = this.dataArr[i];
 
-                    seriesArr.push({
-                        type: 'pictorialBar',
-                        symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
-                        symbolSize: [72, 72],
-                        data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
-                        label: {
-                            normal: {
-                                show: true,
-                                position: "top",
-                                offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
-                                textStyle: {
-                                    fontSize: 20,
-                                    color: '#fff'
-                                },
-                                formatter: `${d.lable}`
-                            }
-                        },
-                        z: 2
-                    });
+                    // seriesArr.push({
+                    //     type: 'pictorialBar',
+                    //     symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
+                    //     symbolSize: [72, 72],
+                    //     data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
+                    //     label: {
+                    //         normal: {
+                    //             show: true,
+                    //             position: "top",
+                    //             offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
+                    //             textStyle: {
+                    //                 fontSize: 20,
+                    //                 color: '#fff'
+                    //             },
+                    //             formatter: `${d.lable}`
+                    //         }
+                    //     },
+                    //     z: 2
+                    // });
+                    title.push({
+                            show: true,
+                            text: d.lable,
+                            x: positon[i][0],
+                            y: positon[i][1],
+                            z: 8,
+                            textAlign: 'center',
+                            textStyle: {
+                                fontSize: this.fontSize(0.18),
+                                color: '#fff'
+                            },
 
+                        },
+                    );
 
                     seriesArr.push({
-                        type: 'pie',
-                        radius: [58, 78],
-                        startAngle: '180',
-                        clockwise: !(i % 2),
-                        center: [`${50 - 29.5 + i * offset}%`, '46%'],
-                        labelLine: {
-                            show: false
-                        },
-                        data: [{
-                            value: parseInt(d.value) / 2,
-                            label: {
-                                show: true,
-                                position: 'center',
-                                formatter:() => {
-                                    return `${d.value}`
-                                },
-                                fontSize: '16',
-                                fontWeight: 'bold',
-                                color: '#fff'
+                            type: 'pie',
+                            radius: ['50%', '70%'],
+                            startAngle: '180',
+                            clockwise: !(i % 2),
+                            center: [`${16.6 + i * 33.33}%`, '46%'],
+                            labelLine: {
+                                show: false
+                            },
+                            data: [{
+                                value: parseInt(d.value) / 2,
+                                // label: {
+                                //     show: true,
+                                //     position: 'center',
+                                //     formatter: () => {
+                                //         return `${d.value}`
+                                //     },
+                                //     fontSize: 20,
+                                //     fontWeight: 'bold',
+                                //     color: '#fff'
+                                // },
+                                itemStyle: {
+                                    color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                        offset: 0,
+                                        color: this.colorArr[i].color1
+                                    }, {
+                                        offset: 1,
+                                        color: this.colorArr[i].color2
+                                    }])
+                                }
                             },
-                            itemStyle: {
-                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                                    offset: 0,
-                                    color: this.colorArr[i].color1
-                                }, {
-                                    offset: 1,
-                                    color: this.colorArr[i].color2
-                                }])
-                            }
+                                {
+                                    value: 50 - (parseInt(d.value) * 50 / 100).toFixed(1),
+                                    itemStyle: {
+                                        color: 'rgba(184, 255, 205, 0.1)'
+                                    }
+                                },
+                                {
+                                    value: 50,
+                                    itemStyle: {
+                                        color: "transparent"
+                                    }
+                                }],
+                            z: 2
                         },
                         {
-                            value: 50 - (parseInt(d.value) * 50 / 100).toFixed(1),
-                            itemStyle: {
-                                color: 'rgba(184, 255, 205, 0.1)'
-                            }
+                            type: 'pie',
+                            radius: ['0', '35%'],
+                            center: [`${16.6 + i * 33.33}%`, '46%'],
+                            z: 8,
+                            hoverAnimation: false,
+                            data: [{
+                                name: '污染程度',
+                                value: '80',
+                                itemStyle: {
+                                    normal: {
+                                        color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                            offset: 0,
+                                            color: this.colorArr[i].color1
+                                        }, {
+                                            offset: 1,
+                                            color: this.colorArr[i].color2
+                                        }])
+                                    }
+
+                                },
+                                label: {
+                                    normal: {
+                                        rich: {
+                                            a: {
+                                                color: '#fff',
+                                                align: 'center',
+                                                fontSize:this.fontSize(0.15),
+                                                fontWeight: "bold"
+                                            },
+                                        },
+                                        formatter: function () {
+                                            return "{a|" + d.value + "}";
+                                        },
+                                        position: 'center',
+                                        show: true
+                                    }
+                                },
+                                labelLine: {
+                                    show: false
+                                }
+                            }],
                         },
-                        {
-                            value: 50,
-                            itemStyle: {
-                                color: "transparent"
-                            }
-                        }],
-                        z: 2
-                    });
+                    );
                 }
+                console.log(title, "title");
 
                 this.myChart = this.$echarts.init(document.getElementById('myChartold9'));
                 this.myChart.setOption({
+                    title: title,
                     xAxis: {
                         type: 'category',
                         splitLine: {
@@ -133,6 +197,13 @@
                     },
                     series: seriesArr
                 });
+            },
+            fontSize(res) {
+                let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+                if (!clientWidth) return;
+                let fontSize = 100 * (clientWidth / 1920);
+                return res * fontSize;
+
             }
         },
         mounted() {

src/pages/Home.vue

@@ -1,4 +1,5 @@
 <template>
+    <!--    :style='{height:height} -->
     <div class="home">
         <timeing></timeing>
         <p class="backtitle">居家老年人巡访关爱探访平台</p>
@@ -11,26 +12,17 @@
                         <span class="chankan-background"></span>
                     </router-link>
                 </div>
-                <div class="p1chart bj">
+                <div class="p1chart">
                     <com1 ref="c1"></com1>
                 </div>
             </div>
             <!-- 左二 -->
             <div class="p2 bj">
-                <!--        <div class="p2title bj">-->
-                <!--          <router-link to="/home/EnterpriseInformation">-->
-                <!--            <p>巡访员信息统计</p>-->
-                <!--          </router-link>-->
-                <!--          <span :class="isTure ? 'kaung1': 'kaung2' "  style="margin-left: 10px" @click="right1">个人探访数据</span>-->
-                <!--          <span :class="isTure ? 'kaung2': 'kaung1' "  @click="right2">地区探访数据</span>-->
-                <!--        </div>-->
                 <div class="p2title bj">
-                    <p>
-                        <span>巡访员信息统计</span>
-                        <router-link to="/home/PatrolmanStatistics">
-                            <span class="chankan-background" style="margin-right: 0%;"></span>
-                        </router-link>
-                    </p>
+                    <span>巡访员信息统计</span>
+                    <router-link to="/home/PatrolmanStatistics">
+                        <span class="chankan-background1" style="margin-right: 0%;"></span>
+                    </router-link>
                 </div>
                 <div class="chankan-div bj">
                      <span :class="isleftbtnTure ? 'left-selectkaung': 'left-kaung' " style="margin-left: 10%"
@@ -39,7 +31,7 @@
                           @click="left2">性别</span>
 
                 </div>
-                <div class="p2chart bj">
+                <div class="p2chart ">
 
                     <!--                    <div class="p2legend">-->
                     <!--                        <span class="span2">群众</span>-->
@@ -70,7 +62,7 @@
         <div class="center">
             <!-- 中间部分上方数据 -->
             <div class="topdatabox">
-                <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;">
+                <el-row :span="24" type="flex" justify="center" align="middle" style="height:100%;font-size: 1.5vh">
                     <el-col :span="5">老年人信息（人）</el-col>
                     <el-col :span="5">认证巡访员（人）</el-col>
                     <el-col :span="4">累计巡访量（次）</el-col>
@@ -116,20 +108,27 @@
         </div>
         <div class="right">
             <!-- 右一 -->
+
             <div class="p4 bj">
                 <div class="p4title bj">
                     <span>当月探访数据排行榜</span>
                     <router-link to="/home/Ranking">
-                        <span class="chankan-background"></span>
+                        <span class="chankan-background2"></span>
                     </router-link>
-
                 </div>
                 <div class="p4chart-title">
-                    <span :class="isTure ? 'kaung1': 'kaung2' " style="margin-left: 10px" @click="right1">个人探访数据</span>
+                    <span :class="isTure ? 'kaung1': 'kaung2' " @click="right1">个人探访数据</span>
                     <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
                 </div>
+
                 <div class="p4chart bj">
-                    <com4 ref="c4"></com4>
+                    <div  class="p4chart-tu" >
+
+                    </div>
+                    <div style="width: 80%">
+                        <com4 ref="c4"></com4>
+                    </div>
+
                 </div>
             </div>
             <!-- 右二 -->
@@ -137,9 +136,72 @@
                 <div class="p5title bj">
                     <p>运营分析</p>
                 </div>
-                <div class="p5chart">
-                    <com5 ref="c5"></com5>
+                <!--                <div class="p5chart">-->
+                <!--                    <com5 ref="c5"></com5>-->
+                <!--                </div>-->
+                <div class="tu-home">
+                    <div class="home-tu1">
+                        <div class="home-tu1-tu1">
+                            <com5 ref="c5"></com5>
+                        </div>
+                        <div class="home-tu1-tu1-tu1">
+                            <div style="color: white ; font-size: 0.5em; text-align: center; width:100%;">
+                                {{this.data1.label}}
+                            </div>
+                            <div style="margin-top: 20%;color: #FF8D00; font-size: 1em; text-align: center; width:100%;">
+                                {{this.data1.value}}
+                            </div>
+                            <div class="home-tu1-tu1-shu"></div>
+                        </div>
+
+                    </div>
+                    <div class="home-tu2">
+                        <div class="home-tu2-tu2">
+                            <com6 ref="c6"></com6>
+                        </div>
+                        <div class="home-tu2-tu2-tu2">
+                            <div style="color: white ; font-size: 0.5em; text-align: center; width:100%;">
+                                {{this.data2.label}}
+                            </div>
+                            <div style=" margin-top: 20%;color: #FF8D00; font-size: 1em; text-align: center; width:100%;">
+                                {{this.data2.value}}
+                            </div>
+                            <div class="home-tu2-tu2-shu"></div>
+                        </div>
+                    </div>
                 </div>
+
+                <div class="tu-home1">
+                    <div class="home-tu3">
+                        <div class="home-tu3-tu3">
+                            <com7 ref="c7"></com7>
+                        </div>
+                        <div class="home-tu3-tu3-tu3">
+                            <div style="color: white ; font-size: 0.5em; margin-right: 5%;text-align: center; width:100%;">
+                                {{this.data3.label}}
+                            </div>
+                            <div style="  margin-top: 20%;color: #FF8D00; font-size: 1em; text-align: center; width:100%;">
+                                {{this.data3.value}}
+                            </div>
+                            <div class="home-tu3-tu3-shu"></div>
+                        </div>
+                    </div>
+                    <div class="home-tu4">
+                        <div class="home-tu4-tu4">
+                            <com8 ref="c8"></com8>
+                        </div>
+                        <div class="home-tu4-tu4-tu4">
+                            <div style="color: white ; font-size: 0.5em;text-align: center; width:100%;">
+                                {{this.data4.label}}
+                            </div>
+                            <div style="margin-top: 20%;color: #FF8D00; font-size: 1em; text-align: center; width:100%;">
+                                {{this.data4.value}}
+                            </div>
+                            <div class="home-tu4-tu4-shu"></div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
             <!-- 右三 -->
             <div class="p6 bj">
@@ -150,7 +212,7 @@
                     <ul class="item" style="height:100%">
                         <li v-for="(item, index) in listData" :key="index">
                             <el-row
-                                    style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff;text-align: center"
+                                    style="font-size: 1.8vh; padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff;text-align: center"
 
                                     :class="{'sc0': index%2==0}"
                             >
@@ -178,6 +240,9 @@
     import com3 from "../components/index/3.vue";
     import com4 from "../components/index/4.vue";
     import com5 from "../components/index/5.vue";
+    import com6 from "../components/index/6.vue";
+    import com7 from "../components/index/7.vue";
+    import com8 from "../components/index/8.vue";
     import vueSeamlessScroll from "vue-seamless-scroll";
     import storageUtil from '../util/storageUtil'
     import {
@@ -187,12 +252,12 @@
         visitnum,
         visitNumDay,
         selectDeptByName,
-        selectInfoMessage
+        selectInfoMessage, fourquan
     } from "../api";
 
     export default {
         name: "Home",
-        components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
+        components: {com1, com2, com3, com4, com5, com6, com7, com8, jlMap, vueSeamlessScroll},
         data() {
             return {
                 count1: 0,   //老年人信息（人）
@@ -200,7 +265,7 @@
                 count3: 0,   //累计巡访量（次）
                 count4: 0,   //累计积分（分）
                 count5: 0,   //今日探访（次）
-
+                height: '0px',
                 month: "",
                 isTure: true,
                 isleftbtnTure: true,
@@ -223,8 +288,11 @@
                 mapdata: [],
                 mapdata1: [],
                 mapprodata: [],
-                data4: [],
-                mapDataArr: []
+                mapDataArr: [],
+                data1: {label: '巡访平均周期', value: '3.5天'},
+                data2: {label: '子女绑定占比', value: '60%'},
+                data3: {label: '积分存量', value: 123156},
+                data4: {label: '兑换比例', value: '60%'},
             };
         },
         mounted() {
@@ -242,6 +310,7 @@
             this.count4_method();
             this.count5_method();
             this.right3();
+            this.fourquan();
         },
         methods: {
             async mapClick(deptName) {
@@ -254,12 +323,16 @@
                 this.count3_method();
                 this.count4_method();
                 this.count5_method();
+                this.fourquan();
 
                 this.$refs.c1.draw();
                 this.$refs.c2.draw1();
                 this.$refs.c3.draw();
                 this.$refs.c4.draw1();
                 this.$refs.c5.draw();
+                this.$refs.c6.draw();
+                this.$refs.c7.draw();
+                this.$refs.c8.draw();
                 this.right3();
             },
             back() {
@@ -269,12 +342,16 @@
                 this.count3_method();
                 this.count4_method();
                 this.count5_method();
+                this.fourquan();
 
                 this.$refs.c1.draw();
                 this.$refs.c2.draw1();
                 this.$refs.c3.draw();
                 this.$refs.c4.draw1();
                 this.$refs.c5.draw();
+                this.$refs.c6.draw();
+                this.$refs.c7.draw();
+                this.$refs.c8.draw();
                 this.right3();
             },
             async count1_method() {
@@ -297,17 +374,23 @@
                 const result = await visitNumDay({}, 'POST');
                 this.count5 = result.visitnum;
             },
+            async fourquan() {
+                const result = await fourquan({}, 'POST');
+                this.data1 = result.data1;
+                this.data2 = result.data2;
+                this.data3 = result.data3;
+                this.data4 = result.data4;
+            },
+
 
             //  右边第一个  地区探访数据 按钮
             right1() {
                 this.isTure = false;
-
                 this.$refs.c4.draw2();
             },
             //  右边第二个
             right2() {
                 this.isTure = true;
-
                 this.$refs.c4.draw1();
             },
             async right3() {
@@ -368,7 +451,10 @@
             },
 
         },
-        computed: {}
+        computed: {},
+        // created() {
+        //     this.height =   window.innerWidth * 1080 /  1920 +'px'
+        // }
     };
 </script>
 <style scoped lang="less" type="text/css">
@@ -376,19 +462,21 @@
         background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-size: 32px;
+        font-size: 3.5vh;
         font-weight: 900;
         position: absolute;
-        left: 40%;
+        left: 38%;
         top: 1%;
     }
 
     .seamless-warp {
         width: 85%;
-        margin-left: 5%;
+        margin-left: 3%;
         height: 80%;
         margin-top: 2%;
         overflow: hidden;
+        /*border: 1px silver solid;*/
+
     }
 
     .home {
@@ -398,6 +486,8 @@
         background: url("../assets/index/bj.png");
         background-size: 100% 100%;
         display: flex;
+
+
     }
 
     .bj {
@@ -408,12 +498,14 @@
         width: 26%;
         height: 99%;
         position: relative;
+        top: 1%;
     }
 
     .center {
-        width: 48%;
+        width: 49%;
         height: 99%;
         position: relative;
+        /*border: 1px silver solid;*/
     }
 
     .right {
@@ -452,6 +544,7 @@
 
     .p5 {
         height: 29%;
+        position: relative;
 
     }
 
@@ -467,7 +560,7 @@
         position: absolute;
         top: 30%;
         left: 13%;
-        font-size: 1.2em;
+        font-size: 1.7vh;
 
     }
 
@@ -476,7 +569,7 @@
         position: absolute;
         left: 13%;
         top: 15%;
-        font-size: 1.2em;
+        font-size: 1.7vh;
         color: #fff;
         width: 85%;
 
@@ -492,22 +585,26 @@
         position: absolute;
         left: 13%;
         top: 13.5%;
-        font-size: 1.2em;
+        font-size: 1.7vh;
         color: #fff;
     }
 
     .p1chart {
-        height: 70%;
+        width: 93%;
+        height: 65%;
         position: absolute;
         top: 40%;
-        left: 0%;
+        left: 7%;
+        /*border: 1px white solid;*/
     }
 
     .p2chart {
-        height: 80%;
+        height: 70%;
         position: absolute;
         top: 35%;
-        left: 0%;
+        left: 7%;
+        /*border: 1px white solid;*/
+        width: 94%;
     }
 
     .p1legend img {
@@ -516,25 +613,41 @@
     }
 
     .p3chart {
-        height: 80%;
+        height: 70%;
         position: absolute;
         top: 30%;
-        left: 0%;
+        left: 7%;
+        width: 94%;
+        /*border: 1px white solid;*/
     }
 
     .p4chart {
-        height: 82%;
+        height: 62%;
+        width: 90%;
         position: relative;
-        top: 10%;
+        top: 8%;
+        display: flex;
+        /*left: 8%;*/
+    }
+    .p4chart-tu{
+        width: 16%;
+        background: url("../assets/index/12345.png") no-repeat ;
+        background-position: 90%;
+        background-size: contain;
     }
 
-    .p4chart-title{
+    .p4chart-title {
         position: relative;
-        top: 10%;
+        top: 6%;
         z-index: 999;
-        left: 4%;
+        /*height: 14%;*/
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        /*left: 4%;*/
 
     }
+
     .p1legend {
         width: 95%;
         height: 10%;
@@ -583,7 +696,7 @@
         position: absolute;
         bottom: 20%;
         left: 6%;
-        font-size: 1.2em;
+        font-size: 1.7vh
     }
 
     .p4title {
@@ -591,13 +704,14 @@
         position: relative;
         top: 4%;
         left: 6%;
+        font-size: 1.7vh;
     }
 
     .p5title {
         height: 18%;
         color: #fff;
         position: relative;
-        font-size: 1.2em;
+        font-size: 1.7vh;
     }
 
     .p5title p {
@@ -605,6 +719,7 @@
         top: 20%;
         left: 6%;
 
+
     }
 
     .p4title p {
@@ -615,10 +730,9 @@
     }
 
     .p5chart {
-        width: 100%;
+        width: 92%;
         height: 84%;
-        margin-left: 4%;
-
+        /*margin-left: 8%;*/
     }
 
     .span1box {
@@ -655,7 +769,8 @@
     }
 
     .num {
-        font-size: 50px;
+        font-size: 5vh;
+
         font-family: AgencyFB;
         font-weight: normal;
         color: rgba(247, 255, 63, 1);
@@ -700,18 +815,19 @@
 
     .aa {
         opacity: 0.1;
-        width: 735px;
-        height: 735px;
+        width: 80%;
+        height: 80%;
         position: absolute;
         top: 0%;
         left: 10%;
+
     }
 
     .bb {
-        width: 600px;
-        height: 550px;
+        width: 70%;
+        height: 100%;
         position: absolute;
-        top: 0%;
+        top: 5%;
         left: 15%;
         -webkit-animation: rotateImg 8s linear infinite;
         vertical-align: middle;
@@ -754,13 +870,32 @@
 
 
     .chankan-background {
-        background: url("../assets/index/chakan.png");
+        background: url("../assets/index/chakan.png") no-repeat;
+        background-size: contain;
         display: inline-block;
-        width: 90px;
-        height: 26px;
+        width: 20%;
+        height: 80%;
         float: right;
         margin-right: 15%;
     }
+    .chankan-background1 {
+        background: url("../assets/index/chakan.png") no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 23%;
+        height: 100%;
+        float: right;
+        margin-right: 15%;
+    }
+    .chankan-background2 {
+        background: url("../assets/index/chakan.png") no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 20%;
+        height: 26px;
+        float: right;
+        margin-right: 13%;
+    }
 
     .chankan-div {
         position: absolute;
@@ -776,7 +911,8 @@
         display: inline-block;
         color: #34bff1;
         background: url("../assets/index/leftkuang.png");
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
     }
 
     .left-selectkaung {
@@ -785,7 +921,8 @@
         padding: 2px 5px;
         display: inline-block;
         background: url("../assets/index/leftselectkuang.png");
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
         color: white;
     }
 
@@ -795,7 +932,8 @@
         padding: 2px 5px;
         display: inline-block;
         background: url("../assets/index/leftkuang2.png");
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
         color: white;
     }
 
@@ -804,7 +942,8 @@
         cursor: pointer;
         padding: 2px 5px;
         display: inline-block;
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
         color: white;
         background: url("../assets/index/leftselectkuang2.png");
     }
@@ -816,7 +955,8 @@
         display: inline-block;
         color: #34bff1;
         background: url("../assets/index/leftkuang2.png") no-repeat;
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
     }
 
     .left-selectkaung3 {
@@ -824,30 +964,195 @@
         cursor: pointer;
         padding: 2px 7px;
         display: inline-block;
-        font-size: 16px;
+        background-size: contain;
+        font-size: 1.8vh;
         color: white;
         background: url("../assets/index/leftselectkuang2.png");
     }
 
     .kaung1 {
-        float: right;
-        margin-top: 2%;
+        /*float: right;*/
         cursor: pointer;
         padding: 2px 5px;
         display: inline-block;
+        margin-right: 2%;
         color: #34bff1;
-        background: url("../assets/index/biankuang2.png");
+        background: url("../assets/index/biankuang2.png") no-repeat;
+        background-size: contain;
+        font-size: 1.8vh;
     }
 
     .kaung2 {
-        float: right;
-        margin-top: 2%;
-        background: url("../assets/index/biankuang1.png");
+        /*float: right;*/
+        background: url("../assets/index/biankuang1.png") no-repeat;
+        background-size: contain;
+        font-size: 1.8vh;
         padding: 2px 5px;
         display: inline-block;
         cursor: pointer;
         color: white;
+        margin-right: 2%
+    }
+
+    .tu-home {
+        width: 92%;
+        height: 84%;
+        position: absolute;
+        top: 22%;
+        display: flex;
+    }
+
+    .tu-home1 {
+        width: 92%;
+        height: 84%;
+        position: absolute;
+        top: 64%;
+        display: flex;
+    }
+
+    .home-tu1 {
+        /*background: url("../assets/index/liquidfill-1-circle.png") no-repeat ;*/
+        /*background-position: 34%;*/
+        /*background-size: contain;*/
+        width: 50%;
+        height: 40%;
+        display: flex;
+        /*flex-direction: column;*/
+        /*!*text-align: right;*!*/
+        /*align-items: flex-end;*/
+    }
+
+    .home-tu1-tu1 {
+        background: url("../assets/index/liquidfill-1-circle.png") no-repeat;
+        background-position: 34%;
+        background-size: contain;
+        width: 50%;
+        height: 100%;
+        margin-left: 0%;
+
+    }
+
+    .home-tu1-tu1-tu1 {
+        display: flex;
+        flex-direction: column;
+        /*text-align: right;*/
+        align-items: flex-end;
+        width: 50%;
+
+    }
+
+    .home-tu1-tu1-shu {
+        background: url("../assets/index/liquidfill-1-line.png") no-repeat center;
+        margin-right: 25%;
+        background-size: contain;
+        width: 50%;
+        height: 40%;
+        margin-top: 10%;
+    }
+
+    .home-tu2 {
+        width: 50%;
+        height: 40%;
+        display: flex;
+
+    }
+
+    .home-tu2-tu2 {
+        background: url("../assets/index/liquidfill-2-circle.png") no-repeat;
+        background-position: 34%;
+        background-size: contain;
+        width: 50%;
+        height: 100%;
+        margin-left: 0%;
     }
 
+    .home-tu2-tu2-tu2 {
+        display: flex;
+        flex-direction: column;
+        /*text-align: right;*/
+        align-items: flex-end;
+        width: 50%;
+
+    }
+
+    .home-tu2-tu2-shu {
+        background: url("../assets/index/liquidfill-2-line.png") no-repeat center;
+        margin-right: 25%;
+        background-size: contain;
+        width: 50%;
+        height: 40%;
+        margin-top: 10%;
+    }
+
+
+    .home-tu3 {
+        width: 50%;
+        height: 40%;
+        /*border: 1px seagreen solid;*/
+        display: flex;
+    }
+
+
+    .home-tu3-tu3 {
+        background: url("../assets/index/liquidfill-3-circle.png") no-repeat;
+        background-position: 34%;
+        background-size: contain;
+        width: 50%;
+        height: 100%;
+        margin-left: 0%;
+    }
+
+    .home-tu3-tu3-tu3 {
+        display: flex;
+        flex-direction: column;
+        /*text-align: right;*/
+        width: 50%;
+        align-items: flex-end;
+
+    }
+
+    .home-tu3-tu3-shu {
+        background: url("../assets/index/liquidfill-3-line.png") no-repeat center;
+        margin-right: 25%;
+        background-size: contain;
+        width: 50%;
+        height: 40%;
+        margin-top: 10%;
+    }
+
+
+    .home-tu4 {
+        width: 50%;
+        height: 40%;
+        display: flex;
+    }
+
+    .home-tu4-tu4 {
+        background: url("../assets/index/liquidfill-4-circle.png") no-repeat;
+        background-position: 34%;
+        background-size: contain;
+        width: 50%;
+        height: 100%;
+        margin-left: 0%;
+    }
+
+    .home-tu4-tu4-tu4 {
+        display: flex;
+        flex-direction: column;
+        /*text-align: right;*/
+        align-items: flex-end;
+        width: 50%;
+
+    }
+
+    .home-tu4-tu4-shu {
+        background: url("../assets/index/liquidfill-4-line.png") no-repeat center;
+        margin-right: 25%;
+        background-size: contain;
+        width: 55%;
+        height: 40%;
+        margin-top: 10%;
+
+    }
 
 </style>

src/pages/PatrolmanStatistics.vue

@@ -75,7 +75,7 @@
                     <ul class="item " style="height:100%">
                         <li v-for="(item, index) in listData" :key="index">
                             <el-row
-                                    style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff"
+                                    style="padding-top:1%;padding-bottom:1%;margin-top:2%;color:#fff;font-size: 1.6vh"
                                     type="flex"
                                     justify="center"
                                     align="middle"
@@ -320,7 +320,7 @@
         background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-size: 32px;
+        font-size: 3.3vh;
         font-weight: 900;
         font-weight: 900;
         position: absolute;
@@ -329,7 +329,7 @@
     }
 
     .select-div {
-        width: 34%;
+        width: 38%;
         /*height: 4%;*/
         position: absolute;
         top: 4.5%;
@@ -495,21 +495,22 @@
     }
 
     .number {
-        font-size: 55px;
+        font-size: 5.5vh;
         font-weight: 400;
         color: rgba(248, 255, 63, 1);
         font-family: LCD;
-        letter-spacing: 20px;
+        letter-spacing: 1.3vh;
         margin-top: 5%;
     }
 
     .small-title {
         color: white;
         margin-top: 3%;
+        font-size: 1.8vh;
     }
 
     .title1 {
-        font-size: 16px;
+        font-size: 1.8vh;
         font-family: SourceHanSansCN;
         font-weight: 500;
         color: rgba(255, 255, 255, 1);
@@ -566,11 +567,11 @@
 
     .address-title {
         color: #00d8fe;
+        font-size: 1.3vh;
     }
 
     .input {
         width: 15.5%;
-        margin-right: 1%;
     }
 
     .input1 {
@@ -608,9 +609,9 @@
 
     .bj-qeuren {
         display: inline-block;
-        background: url("../assets/PatrolmanStatistics/queren.png") no-repeat;
-        background-size: 90% 90%;
-        width: 69px;
+        background: url("../assets/PatrolmanStatistics/queren.png") no-repeat ;
+        background-size: 85% 85%;
+        width: 6vh;
         height: 37px;
         vertical-align: bottom;
     }

src/pages/Ranking.vue

@@ -308,7 +308,7 @@
         background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-size: 32px;
+        font-size: 3.5vh;
         font-weight: 900;
         position: absolute;
         left: 44%;
@@ -317,6 +317,7 @@
 
     .address-title {
         color: #00d8fe;
+        font-size: 1.3vh;
     }
     .top10-number {
         color: #ffd821;
@@ -326,12 +327,13 @@
     }
     .input {
         width: 8%;
-        margin-right: 1.5%;
+        margin-right: 0.5%;
+
     }
 
     .input1 {
         width: 10%;
-        margin-right: 1.5%;
+        margin-right: 0.5%;
     }
 
     .select-div {
@@ -351,10 +353,11 @@
         top: 16%;
         left: 2%;
         text-align: center;
-        font-size: 18px;
+        font-size: 1.9vh;
         font-family: SourceHanSansCN;
         font-weight: 400;
         color: rgba(255, 255, 255, 1);
+
     }
 
     .title-rightdiv {
@@ -364,7 +367,7 @@
         top: 16%;
         left: 51%;
         text-align: center;
-        font-size: 18px;
+        font-size: 1.9vh;
         font-family: SourceHanSansCN;
         font-weight: 400;
         color: rgba(255, 255, 255, 1);
@@ -447,10 +450,10 @@
         border: 0.8px solid #00d0f6;
         /*border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;*/
         box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
-
     }
 
 
+
     /deep/ .el-select .el-input .el-select__caret {
         color: #00d0f6;
     }
@@ -482,7 +485,7 @@
         left: 51%;
         overflow-y: auto;
         overflow-x: hidden;
-
+        font-size: 1.7vh;
 
     }
 
@@ -494,6 +497,7 @@
         left: 2%;
         overflow-y: auto;
         overflow-x: hidden;
+        font-size: 1.7vh;
     }
 
     .name {
@@ -510,4 +514,8 @@
     .right-box/deep/ .el-progress-bar__inner {
         background:linear-gradient(-90deg,#fab41d,#e98000);
     }
+
+    /deep/.el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner {
+        width: 10%;
+    }
 </style>

src/pages/oldStatistics.vue

@@ -5,7 +5,8 @@
         <div class="return-btn" @click="goHome">返回首页</div>
         <div class="select-div">
             <span class="address-title">省：</span>
-            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择" @change="provinceChange">
+            <el-select class="input" v-model="dept1" clearable :popper-append-to-body="false" placeholder="请选择"
+                       @change="provinceChange">
                 <el-option
                         v-for="item in provinces"
                         :key="item.value"
@@ -15,7 +16,8 @@
                 </el-option>
             </el-select>
             <span class="address-title">地市：</span>
-            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择" @change="cityChange">
+            <el-select class="input" v-model="dept2" clearable :popper-append-to-body="false" placeholder="请选择"
+                       @change="cityChange">
                 <el-option
                         v-for="item in citys"
                         :key="item.value"
@@ -25,7 +27,8 @@
                 </el-option>
             </el-select>
             <span class="address-title">县(市区)：</span>
-            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择" @change="areaChange">
+            <el-select class="input1" v-model="dept3" clearable :popper-append-to-body="false" placeholder="请选择"
+                       @change="areaChange">
                 <el-option
                         v-for="item in areas"
                         :key="item.value"
@@ -38,7 +41,8 @@
             <span v-else class="bj-shouqi" @click="guanbi"></span>
             <span class="bj-qeuren" @click="queren"></span>
             <span v-if="isZhankai" class="address-title">乡镇(街道)：</span>
-            <el-select v-if="isZhankai" class="input1" style="margin-top: 1%" clearable :popper-append-to-body="false" v-model="dept4" placeholder="请选择" @change="countyChange">
+            <el-select v-if="isZhankai" class="input1" style="margin-top: 1%" clearable :popper-append-to-body="false"
+                       v-model="dept4" placeholder="请选择" @change="countyChange">
                 <el-option
                         v-for="item in countys"
                         :key="item.value"
@@ -48,7 +52,8 @@
                 </el-option>
             </el-select>
             <span v-if="isZhankai" class="address-title">村(居)民委员会：</span>
-            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5" placeholder="请选择">
+            <el-select v-if="isZhankai" class="input1" clearable :popper-append-to-body="false" v-model="dept5"
+                       placeholder="请选择">
                 <el-option
                         v-for="item in villages"
                         :key="item.value"
@@ -62,19 +67,72 @@
             <!--  图1     -->
             <div class="tu-one">
                 <p class="title1" style="padding-top: 9%">老年人年龄分布统计</p>
-                <com1 ref="c1"></com1>
+                <div class="tu-one-one">
+                    <com1 ref="c1"></com1>
+                </div>
+
             </div>
             <div class="tu-two">
                 <p class="title1">老年人性别分布统计</p>
-                <com2 ref="c2"></com2>
+                <!--                <div class="tu-two-two">-->
+                <!--                    -->
+                <!--                </div>-->
+            </div>
+            <div class="tu-two-two">
+                <div class="tu-two-two-left">
+                    <div class="tu-two-two-left-left">
+                        <div class="tu-two-two-left-male"></div>
+                    </div>
+                    <div class="tu-two-two-left-right">
+                        <div class="tu-two-two-left-top">
+                            <div style="font-family:AgencyFB;font-weight:normal;color:rgba(0,215,255,1);font-size: 3vh">
+                                {{this.dataArr2[0].value}}
+                            </div>
+                            <div style="color:white; font-size: 2vh">
+                                {{this.dataArr2[0].label}}
+                            </div>
+                        </div>
+                        <div class="tu-two-two-left-bottom">
+                            <com2 ref="c2"></com2>
+                        </div>
+
+                    </div>
+
+                </div>
+                <div class="tu-two-two-left">
+                    <div class="tu-two-two-left-left">
+                        <div class="tu-two-two-right-male"></div>
+                    </div>
+                    <div class="tu-two-two-left-right">
+                        <div class="tu-two-two-left-top">
+                            <div style="font-family:AgencyFB;font-weight:normal;color:#FDC001;font-size: 3vh">
+                                {{this.dataArr2[1].value}}
+                            </div>
+                            <div style="color:white; font-size: 2vh">
+                                {{this.dataArr2[1].label}}
+                            </div>
+                        </div>
+                        <div class="tu-two-two-right-bottom ">
+                            <com11 ref="c11"></com11>
+                        </div>
+
+                    </div>
+
+                </div>
+
             </div>
+
+
             <div class="tu-three">
                 <p class="title1">老年人关爱服务统计</p>
                 <com3 ref="c3"></com3>
             </div>
             <div class="tu-four">
                 <p class="title1">老年人能力评估统计</p>
-                <com4 ref="c4"></com4>
+                <div class="tu-four-four">
+                    <com4 ref="c4"></com4>
+                </div>
+
             </div>
             <div class="tu-five">
                 <p class="title1">老年人健康状况统计</p>
@@ -96,7 +154,16 @@
             </div>
             <div class="tu-nine">
                 <p class="title1">老年人可支配收入统计</p>
-                <com9 ref="c9"></com9>
+                <div class="tu-nine-nine">
+<!--                    <div class="tu-nine-nine-flex">-->
+<!--                        -->
+<!--                    </div>-->
+<!--                    <div class="tu-nine-nine-flex"></div>-->
+<!--                    <div class="tu-nine-nine-flex"></div>-->
+                    <com9 ref="c9"></com9>
+
+                </div>
+
             </div>
             <div class="tu-ten">
                 <p class="title1">老年人生活经济状况统计</p>
@@ -117,13 +184,14 @@
     import com8 from "../components/oldStatistics/8.vue";
     import com9 from "../components/oldStatistics/9.vue";
     import com10 from "../components/oldStatistics/10.vue";
+    import com11 from "../components/oldStatistics/11.vue";
 
     import storageUtil from '../util/storageUtil'
-    import { findDept } from '../api'
+    import {findDept, oldPersonSex} from '../api'
 
     export default {
         name: "Home",
-        components: {com1,com2,com3,com4,com5,com6,com7,com8,com9,com10},
+        components: {com1, com2, com3, com4, com5, com6, com7, com8, com9, com10, com11},
         data() {
             return {
                 provinces: [],   // 省份
@@ -146,28 +214,31 @@
         async mounted() {
             this.provinces = await this.findDept({'level': '1'});
 
+            this.oldPersonSex();
+
             const deptArray = storageUtil.read('dept-array');
-            if(deptArray != null && deptArray != '' && deptArray.length > 0) {
-                for(let i = 0; i < deptArray.length; i++) {
+            if (deptArray != null && deptArray != '' && deptArray.length > 0) {
+                for (let i = 0; i < deptArray.length; i++) {
                     this['dept' + (i + 1)] = deptArray[i];
                 }
             }
 
-            if(this.dept1 != '') {
-                this.citys = await this.findDept({ fid: this.dept1 });
+            if (this.dept1 != '') {
+                this.citys = await this.findDept({fid: this.dept1});
             }
 
-            if(this.dept2 != '') {
-                this.areas = await this.findDept({ fid: this.dept2 });
+            if (this.dept2 != '') {
+                this.areas = await this.findDept({fid: this.dept2});
             }
 
-            if(this.dept3 != '') {
-                this.countys = await this.findDept({ fid: this.dept3 });
+            if (this.dept3 != '') {
+                this.countys = await this.findDept({fid: this.dept3});
             }
 
-            if(this.dept4 != '') {
-                this.villages = await this.findDept({ fid: this.dept4 });
+            if (this.dept4 != '') {
+                this.villages = await this.findDept({fid: this.dept4});
             }
+
         },
         methods: {
             //获取地区
@@ -175,9 +246,16 @@
                 const result = await findDept(data, 'POST');
                 return result;
             },
+
+            async oldPersonSex() {
+                const result = await oldPersonSex({}, 'POST');
+                this.dataArr2 = result;
+                console.log(this.dataArr2)
+            },
+
             async provinceChange(val) {
-                if(val != '' && val != null) {
-                    this.citys = await this.findDept({ fid: val });
+                if (val != '' && val != null) {
+                    this.citys = await this.findDept({fid: val});
                 } else {
                     this.citys = [];
                     this.areas = [];
@@ -190,8 +268,8 @@
                 this.dept5 = '';
             },
             async cityChange(val) {
-                if(val != '' && val != null) {
-                    this.areas = await this.findDept({ fid: val });
+                if (val != '' && val != null) {
+                    this.areas = await this.findDept({fid: val});
                 } else {
                     this.areas = [];
                     this.countys = [];
@@ -203,8 +281,8 @@
                 this.dept5 = '';
             },
             async areaChange(val) {
-                if(val != '' && val != null) {
-                    this.countys = await this.findDept({ fid: val });
+                if (val != '' && val != null) {
+                    this.countys = await this.findDept({fid: val});
                 } else {
                     this.countys = [];
                     this.villages = [];
@@ -213,8 +291,8 @@
                 this.dept5 = '';
             },
             async countyChange(val) {
-                if(val != '' && val != null) {
-                    this.villages = await this.findDept({ fid: val });
+                if (val != '' && val != null) {
+                    this.villages = await this.findDept({fid: val});
                 } else {
                     this.villages = [];
                 }
@@ -225,7 +303,7 @@
             //糊掉首页
             goHome() {
                 storageUtil.save('dept-array', '');
-                this.$router.push({ path: '/' });
+                this.$router.push({path: '/'});
             },
             // 省市选择框 展开
             zhankai() {
@@ -239,23 +317,25 @@
             // 省市选择框 确认
             async queren() {
                 let arr = new Array();
-                if(this.dept1 != '') {
+                if (this.dept1 != '') {
                     arr.push(this.dept1);
                 }
-                if(this.dept2 != '') {
+                if (this.dept2 != '') {
                     arr.push(this.dept2);
                 }
-                if(this.dept3 != '') {
+                if (this.dept3 != '') {
                     arr.push(this.dept3);
                 }
-                if(this.dept4 != '') {
+                if (this.dept4 != '') {
                     arr.push(this.dept4);
                 }
-                if(this.dept5 != '') {
+                if (this.dept5 != '') {
                     arr.push(this.dept5);
                 }
                 storageUtil.save('dept-array', arr);
 
+                this.oldPersonSex();
+
                 this.$refs.c1.draw();
                 this.$refs.c2.draw();
                 this.$refs.c3.draw();
@@ -266,6 +346,7 @@
                 this.$refs.c8.draw();
                 this.$refs.c9.draw();
                 this.$refs.c10.draw();
+                this.$refs.c11.draw();
             }
         },
         computed: {}
@@ -276,16 +357,16 @@
         background-image: -webkit-linear-gradient(bottom, #91e5ff, #fff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        font-size: 32px;
+        font-size: 3.5vh;
         font-weight: 900;
         position: absolute;
-        left: 44%;
+        left: 43.5%;
         top: 1%;
 
     }
 
     .select-div {
-        width: 34%;
+        width: 38%;
         /*height: 4%;*/
         position: absolute;
         top: 4.5%;
@@ -334,21 +415,124 @@
     .tu-one {
         width: 36%;
         height: 49%;
-        position: absolute;
+        position: relative;
         top: 7%;
         left: 0;
         text-align: center;
     }
 
+    .tu-one-one {
+        position: absolute;
+        width: 88%;
+        height: 70%;
+        top: 30%;
+        left: 6%;
+
+    }
+
     .tu-two {
         width: 31%;
-        height: 41%;
+        height: 4%;
         position: absolute;
         top: 16%;
         left: 36%;
         text-align: center;
     }
 
+    .tu-two-two {
+        width: 32%;
+        height: 36%;
+        position: absolute;
+        top: 21%;
+        left: 35%;
+        text-align: center;
+        display: flex;
+    }
+
+    .tu-two-two-left {
+        width: 50%;
+        display: flex;
+    }
+
+    .tu-two-two-left-left {
+        width: 40%;
+        height: 100%;
+        position: relative;
+    }
+
+    .tu-two-two-left-male {
+        background: url("../assets/oldStatistics/old-person-male-icon.png") no-repeat;
+        background-size: contain;
+        width: 40%;
+        height: 40%;
+        position: absolute;
+        top: 60%;
+        right: 10%;
+    }
+
+    .tu-two-two-left-right {
+        width: 60%;
+        display: flex;
+        flex-direction: column;
+        margin-top: 2%;
+    }
+
+    .tu-two-two-left-top {
+        width: 100%;
+        height: 40%;
+        text-align: left;
+    }
+
+    .tu-two-two-left-bottom {
+        background: url("../assets/oldStatistics/old-person-sex-male.png") no-repeat center;
+
+        background-size: contain;
+        width: 100%;
+        height: 50%;
+    }
+
+    .tu-two-two-right-bottom {
+        background: url("../assets/oldStatistics/old-person-sex-female.png") no-repeat center;
+        background-size: contain;
+        width: 100%;
+        height: 50%;
+    }
+
+
+    .tu-two-two-right {
+        width: 50%;
+        border: 1px greenyellow solid;
+    }
+
+    .tu-two-two-right-left {
+        width: 40%;
+        height: 100%;
+        position: relative;
+    }
+
+    .tu-two-two-right-male {
+        background: url("../assets/oldStatistics/old-person-female-icon.png") no-repeat;
+        background-size: contain;
+        width: 40%;
+        height: 40%;
+        position: absolute;
+        top: 60%;
+        right: 10%;
+    }
+
+    .tu-two-two-right-right {
+        width: 60%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .tu-two-two-right-top {
+        width: 100%;
+        height: 40%;
+        text-align: left;
+    }
+
+
     .tu-three {
         width: 31%;
         height: 41%;
@@ -366,6 +550,14 @@
         left: 0%;
         text-align: center;
     }
+    .tu-four-four {
+        position: absolute;
+        left: 5%;
+        top: 15%;
+        width: 89%;
+
+        height: 88%;
+    }
 
     .tu-five {
         width: 31%;
@@ -406,10 +598,29 @@
     .tu-nine {
         width: 23%;
         height: 90%;
-        position: absolute;
+        position: relative;
         top: 8%;
         left: 50.5%;
         text-align: center;
+
+    }
+
+    .tu-nine-nine {
+        width: 100%;
+        height: 80%;
+        position: absolute;
+        top: 5%;
+        text-align: center;
+        display: flex;
+        /*background-position: 100% 40% ;*/
+        margin-top: 8%;
+
+    }
+
+    .tu-nine-nine-flex {
+        width: 33%;
+        height: 100%;
+        border: 1px salmon solid;
     }
 
     .tu-ten {
@@ -486,11 +697,11 @@
 
     .address-title {
         color: #00d8fe;
+        font-size: 1.3vh;
     }
 
     .input {
         width: 15.5%;
-        margin-right: 1%;
     }
 
     .input1 {
@@ -528,9 +739,9 @@
 
     .bj-qeuren {
         display: inline-block;
-        background: url("../assets/PatrolmanStatistics/queren.png") no-repeat;
-        background-size: 90% 90%;
-        width: 69px;
+        background: url("../assets/PatrolmanStatistics/queren.png") no-repeat ;
+        background-size: 85% 85%;
+        width: 6vh;
         height: 37px;
         vertical-align: bottom;
     }
@@ -558,20 +769,20 @@
 
     /deep/ .el-select-dropdown__item.hover,
     /deep/ .el-select-dropdown__item:hover {
-       background: #123a80;
-       color: white;
+        background: #123a80;
+        color: white;
 
     }
 
-    /deep/ .el-select-dropdown{
-       background: #010f5a;
-       border: 1px solid #00d7ff;
-       color: red;
+    /deep/ .el-select-dropdown {
+        background: #010f5a;
+        border: 1px solid #00d7ff;
+        color: red;
 
     }
 
     /deep/ .el-select-dropdown__item {
-      color:#00d7ff
+        color: #00d7ff
     }
 
 

vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
     publicPath: "./",
     devServer: {
       open: true,
-      // host: "10.16.4.5",
+      host: "10.16.4.5",
       port: 8080,
       https: false,
       hotOnly: false,