00

src/components/index/2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="c2" style="width: 90%;margin-left:5%;height: 90%;"></div>
+  <div id="oldc2" style="width: 100%;height: 100%;"></div>
 </template>
 <script>
 export default {
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     gatherers() {
-      let myChart = this.$echarts.init(document.getElementById("c2"));
+      let myChart = this.$echarts.init(document.getElementById("oldc2"));
       this.myChart = myChart;
       let dataArr = this.dataArr;
       let chartName = [];

src/components/oldStatistics/1.vue

@@ -1,335 +1,125 @@
-<template>
-  <div id="c1" style="width: 90%;margin-left:5%;height: 100%;"></div>
+<template>
+  <div id="myChartold1" style="width: 100%; height: 100%; "></div>
 </template>
+
 <script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    dataArr: {
-      type: Array,
-      default: () => {
-        return [];
+  export default {
+    //老年人年龄分布统计
+    name: "OldPersonAgeCount",
+    data() {
+      return {
+        dataArr: [
+          { label: '60-70岁', value: 23563, percent: '25%' },
+          { label: '70-80岁', value: 23563, percent: '25%' },
+          { label: '80-85岁', value: 23563, percent: '25%' },
+          { label: '85岁以上', value: 23563, percent: '25%' }
+        ],
+        colorArr: ['rgba(1, 220, 254, 1)', 'rgba(238, 250, 42, 1)', 'rgba(51, 252, 108, 1)', 'rgba(255, 196, 0, 1)']
       }
-    }
-    // colorArr: {
-    //   type: Array,
-    //   default: () => {
-    //     return [];
-    //   }
-    // },
-    // imageArr: {
-    //   type: Array,
-    //   default: () => {
-    //     return [];
-    //   }
-    // }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.gatherers();
-  },
-  watch: {
-    dataArr() {
-      this.myChart.clear();
-      this.gatherers();
-    }
-  },
-  methods: {
-    gatherers() {
-      let myChart = this.$echarts.init(document.getElementById("c1"));
-      this.myChart = myChart;
-      let dataArr = this.dataArr;
-      let chartName = [];
-      let chartData = [];
-      dataArr.forEach(item => {
-        chartName.push(item.label);
-        chartData.push(item.value);
-      });
-      // // 绘制图表
-      myChart.setOption({
-        grid: {
-          top: "10%",
-          left: "5%",
-          right: "5%",
-          bottom: "15%",
-          containLabel: true
-        },
-        tooltip: {
-          trigger: "axis",
+    },
+    mounted() {
+      const seriesArr = [];
+      for(let i = 0; i < this.dataArr.length; i++) {
+        const d = this.dataArr[i];
 
-          formatter: function(params) {
-            // console.log(params)
-            var result = "";
-            var dotHtml =
-              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f9f43b"></span>';
-            // var dotHtml2 =
-            //   '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7800"></span>';
-            result +=
-              dotHtml +
-              "申请金额：" +
-              params[0].data +
-              "</br>"
-              // dotHtml2 +
-              // "整改到位率：" +
-              // params;
-            return result;
-          },
-          // formatter: function(params) {
-          //   //提示框内容
-          //   var value = "";
-          //   for (var i = 0; i < params.length; i++) {
-          //     var data = params[i].data;
-          //     value += "申请金额  "+data + "万元";
-          //   }
-          //   return value;
-          // },
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(0, 255, 233,0)"
-                  },
-                  {
-                    offset: 0.5,
-                    color: "rgba(255, 255, 255,1)"
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(0, 255, 233,0)"
-                  }
-                ],
-                global: false
-              }
-            }
-          }
-        },
-        title: [
-          {
-            text: "(万元)",
-            left: "2%",
-            bottom: "13%",
-            // textAlign: "center",
+        const arr = new Array(this.dataArr.length).fill({});
+        arr[i] = { value: d.value };
+
+        seriesArr.push({
+          type: 'pictorialBar',
+          symbol: `image://${require('../../assets/oldStatistics/age-' + i + '.png')}`,
+          symbolSize: [147, 147],
+          symbolOffset: [0, -50],
+          label: {
+            show: true,
+            position: 'top',
             textStyle: {
-              // fontWeight: 900,
-              fontSize: 18,
-              color: "#fff",
-              textAlign: "center"
-            }
-          }
-          // {
-          //   text: "(日)",
-          //   right: "0%",
-          //   bottom: "13%",
-          //   // textAlign: "center",
-          //   textStyle: {
-          //     fontWeight: 900,
-          //     fontSize: 18,
-          //     color: "#8998aa",
-          //     textAlign: "center"
-          //   }
-          // }
-        ],
-        xAxis: [
-          {
-            type: "category",
-            axisLine: {
-              show: true
+              fontSize: 15
             },
-            splitArea: {
-              color: "#f00",
-              lineStyle: {
-                color: "#f00"
-              }
-            },
-            axisLabel: {
-              color: "#fff",
-              // fontWeight: 900,
-              fontSize: 18,
-              formatter: "{value}日",
-              interval: 0
-            },
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            boundaryGap: true,
-            data: chartName
-          }
-        ],
+            color: this.colorArr[i],
+            fontWeight: 'bold',
+            offset: [0, 100],
+            formatter: d.percent
+          },
+          data: arr
+        });
 
-        yAxis: [
-          {
-            type: "value",
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(255,255,255,0.1)"
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: "#fff",
-                // fontWeight: 900,
-                fontSize: 18
-              }
-            },
-            axisTick: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            name: "申请金额",
-            type: "line",
-            smooth: true, //是否平滑
-            showAllSymbol: true,
-            symbol: `image://${require("../../assets/index/point2.png")}`,
-            symbolSize: 16,
-            lineStyle: {
-              normal: {
-                color: "#f9f43b"
-              }
-            },
-            label: {
-              show: false,
-              position: "top",
-              textStyle: {
-                color: "#6c50f3"
-              }
-            },
-            itemStyle: {
-              color: "#f9f43b"
-            },
-            // tooltip: {
-            //   show: false
-            // },
-            areaStyle: {
-              normal: {
-                color: new this.$echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "#fca91f"
-                    },
-                    {
-                      offset: 1,
-                      color: "#4e6b57"
-                    }
-                  ],
-                  false
-                )
-              }
+        const topArr = new Array(this.dataArr.length).fill({});
+        topArr[i] = { value: d.value };
+
+        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
             },
-            data: chartData,
-            markPoint: {
-              data: [{ type: "max", name: "最大值" }],
-              symbol: `image://${require("../../assets/index/k2.png")}`,
-              symbolSize: [85, 35],
-              symbolOffset: [0, -20],
-              label: {
-                // padding:[100],
-                fontSize: 16,
-                fontWeight: 800,
-                color: "#000"
+            color: this.colorArr[i],
+            fontWeight: 'bold',
+            offset: [0, 70],
+            formatter: `${d.value}人`
+          },
+          data: topArr
+        });
+      }
+
+      let myChart = this.$echarts.init(document.getElementById('myChartold1'));
+      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
               }
-            }
-          }
-          // {
-          //   name: "放款金额",
-          //   type: "line",
-          //   smooth: true, //是否平滑
-          //   showAllSymbol: true,
-          //   symbol: `image://${require("../../assets/index/point1.png")}`,
-          //   // symbol: "circle",
-          //   symbolSize: 16,
-          //   lineStyle: {
-          //     normal: {
-          //       color: "#3aa1d7"
-          //     }
-          //   },
-          //   label: {
-          //     show: false,
-          //     position: "top",
-          //     textStyle: {
-          //       color: "#00ca95"
-          //     }
-          //   },
-          //   itemStyle: {
-          //     color: "#fada31"
-          //   },
-          //   // tooltip: {
-          //   //   show: false
-          //   // },
-          //   areaStyle: {
-          //     normal: {
-          //       color: new this.$echarts.graphic.LinearGradient(
-          //         0,
-          //         0,
-          //         0,
-          //         1,
-          //         [
-          //           {
-          //             offset: 0,
-          //             color: "#1c5076"
-          //           },
-          //           {
-          //             offset: 1,
-          //             color: "#1c5076"
-          //           }
-          //         ],
-          //         false
-          //       )
-          //       // shadowColor: "rgba(0,202,149, 0.9)",
-          //       // shadowBlur: 20
-          //     }
-          //   },
-          //   data: chartData2,
-          //   markPoint: {
-          //     data: [{ type: "max", name: "最大值" }],
-          //     symbol: `image://${require("../../assets/index/k1.png")}`,
-          //     symbolSize: [57, 35],
-          //     symbolOffset: [0, -20],
-          //     label: {
-          //       fontSize: 16,
-          //       fontWeight: 800,
-          //       color: "#fff"
-          //     }
-          //     // color: "#f00"
-          //   }
-          // }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+      );
     }
-  },
-  computed: {}
-};
+  }
 </script>
+
 <style scoped>
+
 </style>

src/components/oldStatistics/10.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="myChartold10" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    export default {
+        //老年人生活经济状况统计
+        name: "OldPersonLivingConditionsCount",
+        data() {
+          return {
+            dataArr: [
+              { label: '建档立卡贫困户', value: 1800 },
+              { label: '一般农户', value: 8023 },
+              { label: '低保', value: 2856 }
+            ]
+          }
+        },
+        mounted() {
+          let myChart = this.$echarts.init(document.getElementById('myChartold10'));
+          myChart.setOption({
+            grid:{
+              left:"16%",
+              right:"5%",
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: true,
+              data: this.dataArr.map((item) => {
+                return item.label;
+              }),
+              splitLine: {
+                show: true,
+                lineStyle:{
+                  color: ['#315070'],
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#5c6ab6'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: 'white',
+                },
+                fontSize: 16
+              },
+              axisTick: {
+                show: false
+              }
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                formatter: '{value}',
+                show: true,
+                fontSize: 16,
+                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
+                }
+              }
+            ]
+          });
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/2.vue

@@ -1,378 +1,156 @@
 <template>
-  <div id="c2" style="width: 90%;margin-left:5%;height: 100%;"></div>
+  <div id="myChartold2" style="width: 100%; height: 100%; "></div>
 </template>
+
 <script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    dataArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.gatherers();
-  },
-  watch: {
-    dataArr() {
-      this.myChart.clear();
-      this.gatherers();
-    }
-  },
-  methods: {
-    gatherers() {
-      let myChart = this.$echarts.init(document.getElementById("c2"));
-      this.myChart = myChart;
-      let dataArr = this.dataArr;
-      let chartName = [];
-      let chartData = [];
-      let chartData2 = [];
-      let bottomArr = [8, 8, 8, 8, 8];
-      if (dataArr.length != 0) {
-        dataArr[0].data1.forEach(function(item) {
-          chartName.push(item.label);
-          chartData.push(item.value);
-        });
-        dataArr[0].data2.forEach(function(item) {
-          chartData2.push(item.value);
-        });
-      }
-      // dataArr[0].data3.forEach(function(item) {
-      //   chartData3.push(item.value);
-      // });
-      // 绘制图表
-      myChart.setOption({
-        // color: ["#59e7eb", "#38e27f", "#2f92ed", "#d0cc6f", "#e47f2e"],
-        // tooltip: {},
-        title: [
-          // {
-          //   text: "(家)",
-          //   left: "7%",
-          //   bottom: "8%",
-          //   // textAlign: "center",
-          //   textStyle: {
-          //     fontWeight: 900,
-          //     fontSize: 18,
-          //     color: "#8998aa",
-          //     textAlign: "center"
-          //   }
-          // },
-          // {
-          //   text: "(日)",
-          //   right: "5%",
-          //   bottom: "8%",
-          //   // textAlign: "center",
-          //   textStyle: {
-          //     fontWeight: 900,
-          //     fontSize: 18,
-          //     color: "#8998aa",
-          //     textAlign: "center"
-          //   }
-          // }
-        ],
-        grid: {
-          top: "12%",
-          left: "7%",
-          right: "7%",
-          bottom: "10%",
-          containLabel: true
+    export default {
+        name: "OldPersonSexCount",
+        data() {
+          return {
+            dataArr: [
+              { label: '老年人男性人数', value: 5896322, percent: '60%' },
+              { label: '老年人女性人数', value: 4896322, percent: '40%' }
+            ],
+            colorArr: [
+              { color1: '#009cff', color2: '#5BB4FF' },
+              { color1: '#ff5b00', color2: '#FF9648' }
+            ]
+          }
         },
-        tooltip: {
-          trigger: "axis",
-          formatter: function(params) {
-            // console.log(params)
-            var result = "";
-            var dotHtml =
-              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#068d9d"></span>';
-            var dotHtml2 =
-              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff7200"></span>';
-            result +=
-              dotHtml +
-              "注册企业：" +
-              params[0].data +
-              "</br>"+
-              dotHtml2 +
-              "认证企业：" +
-              params[1].data;
-            return result;
-          },
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
+        mounted() {
+          const seriesArr = [];
+
+          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: "rgba(0, 255, 233,0)"
-                  },
-                  {
-                    offset: 0.5,
-                    color: "rgba(255, 255, 255,1)"
-                  },
-                  {
+                    color: this.colorArr[i].color1
+                  }, {
                     offset: 1,
-                    color: "rgba(0, 255, 233,0)"
-                  }
-                ],
-                global: false
-              }
-            }
-          }
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: true,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: "#676C7B"
-              }
-            },
-            axisLabel: {
-              formatter: "{value}日",
-              interval: 0,
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: "#fff",
-                // fontWeight: 900,
-                fontSize: 18
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            data: chartName
-          },
-          {
-            type: "category",
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            splitArea: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            data: []
-          }
-        ],
-        yAxis: [
-          {
-            type: "value",
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#676C7B"
-              }
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: "#676C7B"
-              }
-            },
-            axisLabel: {
-              margin: 20,
-              textStyle: {
-                color: "#fff",
-                // fontWeight: 900,
-                fontSize: 18
-              }
-            },
-            axisTick: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            name: "注册企业", //这个是Bar图
-            type: "bar",
-            barWidth: "30%",
-            barGap: "40%",
-            xAxisIndex: 0,
-            label: {
-              show: true,
-              fontWeight: 900,
-              fontSize: 16,
-              color: "#00fcff",
-              position: "top"
-              // distance: -20
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#068d9d" // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(10,30,57,0.1)" // 100% 处的颜色
-                    }
-                  ]
+                    color: this.colorArr[i].color2
+                  }])
+                }
+              },
+              {
+                value: 100 - parseInt(d.percent),
+                itemStyle: {
+                  color: "transparent"
                 }
-              }
-            },
-            data: chartData
-          },
-          {
-            name: "认证企业", //这个是Bar图
-            type: "bar",
-            barWidth: "30%",
-            xAxisIndex: 0,
-            label: {
-              show: true,
-              fontWeight: 900,
-              fontSize: 16,
-              color: "#ff7200",
-              position: "top"
-              // distance: -20
-            },
-            itemStyle: {
-              normal: {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 1,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#85471d" // 0% 处的颜色
+              }],
+              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
                     },
-                    {
-                      offset: 1,
-                      color: "rgba(10,30,57,0.1)" // 100% 处的颜色
+                    b: {
+                      fontSize: 18,
+                      color: '#fff',
+                      padding: [5, 0]
                     }
-                  ]
+                  }
                 }
-              }
-            },
-            data: chartData2
-          },
-          // {
-          //   name: "服务企业", //这个是Bar图
-          //   type: "bar",
-          //   barWidth: "20%",
-          //   xAxisIndex: 0,
-          //   label: {
-          //     show: true,
-          //     //   formatter: "{a|}",
-          //     color: "#ff349d",
-          //     position: "top",
-          //     fontWeight: 900,
-          //     fontSize: 16,
-          //     distance: -20
-          //   },
-          //   itemStyle: {
-          //     normal: {
-          //       color: {
-          //         type: "linear",
-          //         x: 0,
-          //         y: 0,
-          //         x2: 1,
-          //         y2: 1,
-          //         colorStops: [
-          //           {
-          //             offset: 0,
-          //             color: "#84286b" // 0% 处的颜色
-          //           },
-          //           {
-          //             offset: 1,
-          //             color: "rgba(10,30,57,0.1)" // 100% 处的颜色
-          //           }
-          //         ]
-          //       }
-          //     }
-          //   },
-          //   data: chartData3
-          // },
-          //--------------------------
-          {
-            name: "注册", //这个是Bar图
-            type: "bar",
-            barWidth: "30%",
-            barGap: "40%",
-            xAxisIndex: 1,
-            label: {
-              show: false
-            },
-            itemStyle: {
-              normal: {
-                color: "#00fcff"
-              }
-            },
-            data: bottomArr
-          },
-          {
-            name: "认证", //这个是Bar图
-            type: "bar",
-            barWidth: "30%",
-            xAxisIndex: 1,
-            label: {
-              show: false
-            },
-            itemStyle: {
-              normal: {
-                color: "#ff7200"
-              }
-            },
-            data: bottomArr
+              },
+              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: 24,
+                    color: this.colorArr[i].color1
+                  },
+                  formatter: () => {
+                    return `${d.percent}`;
+                  }
+                }
+              },
+              z: 1
+            });
           }
-          // {
-          //   name: "服务", //这个是Bar图
-          //   type: "bar",
-          //   barWidth: "20%",
-          //   xAxisIndex: 1,
-          //   label: {
-          //     show: false
-          //   },
-          //   itemStyle: {
-          //     normal: {
-          //       color: "#ff349d" // 0% 处的颜色
-          //     }
-          //   },
-          //   data: bottomArr
-          // }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+
+
+          let myChart = this.$echarts.init(document.getElementById('myChartold2'));
+          myChart.setOption(
+            {
+              xAxis: {
+                type: 'category',
+                splitLine: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                }
+              },
+              yAxis: {
+                type: 'value',
+                max: 200,
+                splitLine: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                }
+              },
+              series: seriesArr
+            }
+          );
+        }
     }
-  },
-  computed: {}
-};
 </script>
+
 <style scoped>
+
 </style>

src/components/oldStatistics/3.vue

@@ -1,266 +0,0 @@
-<template>
-  <div id="c3" style="width: 90%;margin-left:5%;height: 100%;"></div>
-</template>
-<script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    dataArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.gatherers();
-  },
-  watch: {
-    dataArr() {
-      this.myChart.clear();
-      this.gatherers();
-    }
-  },
-  methods: {
-    gatherers() {
-      let myChart = this.$echarts.init(document.getElementById("c3"));
-      this.myChart = myChart;
-      // let dataArr = this.dataArr;
-      let chartName = [];
-      let chartData = [];
-      let chartData2 = [];
-      if (this.dataArr.length != 0) {
-        this.dataArr[0].data1.forEach(item => {
-          chartData.push(item.value);
-          chartName.push(item.label);
-        });
-        this.dataArr[0].data2.forEach(item => {
-          chartData2.push(item.value);
-        });
-      }
-      // 绘制图表
-      myChart.setOption({
-        grid: {
-          left: "3%",
-          right: "0%",
-          bottom: "15%",
-          top: "8%",
-          containLabel: true
-        },
-        title: [
-          // {
-          //   text: "(条)",
-          //   left: "5%",
-          //   bottom: "13%",
-          //   // textAlign: "center",
-          //   textStyle: {
-          //     fontWeight: 900,
-          //     fontSize: 18,
-          //     color: "#8998aa",
-          //     textAlign: "center"
-          //   }
-          // }
-          // {
-          //   text: "(日)",
-          //   right: "0%",
-          //   bottom: "13%",
-          //   // textAlign: "center",
-          //   textStyle: {
-          //     fontWeight: 900,
-          //     fontSize: 18,
-          //     color: "#8998aa",
-          //     textAlign: "center"
-          //   }
-          // }
-        ],
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(0, 255, 233,0)"
-                  },
-                  {
-                    offset: 0.5,
-                    color: "rgba(255, 255, 255,1)"
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(0, 255, 233,0)"
-                  }
-                ],
-                global: false
-              }
-            }
-          }
-        },
-        yAxis: {
-          type: "value",
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "#363e83"
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "#363e83 "
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: "#fff",
-              // fontWeight: 900,
-              fontSize: 18
-              // fontSize: 14,
-              // fontWeight: 900
-            }
-          }
-        },
-        xAxis: [
-          {
-            type: "category",
-            // interVal: 0,
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#363e83"
-              }
-            },
-            axisLabel: {
-              interval: 0,
-              textStyle: {
-                color: "#fff",
-                // fontWeight: 900,
-                fontSize: 14
-              },
-              inside: false
-            },
-            data: chartName
-          },
-          {
-            type: "category",
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            },
-            splitArea: {
-              show: false
-            },
-            splitLine: {
-              show: false
-            },
-            data: chartName
-          }
-        ],
-        series: [
-          // {
-          //   name: "需求笔数",
-          //   type: "bar",
-          //   itemStyle: {
-          //     normal: {
-          //       show: true,
-          //       barBorderRadius: [20, 20, 0, 0],
-          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //         {
-          //           offset: 0,
-          //           color: "#7fdbf3"
-          //         },
-          //         {
-          //           offset: 1,
-          //           color: "#38a0d6"
-          //         }
-          //       ])
-          //     }
-          //   },
-          //   // zlevel: 2,
-          //   barWidth: "30%",
-          //   data: chartData,
-          //   markPoint: {
-          //     data: [{ type: "max", name: "最大值" }],
-          //     symbol: `image://${require("../../assets/index/k4.png")}`,
-          //     symbolSize: [50, 23],
-          //     symbolOffset: [20, -10],
-          //     z: 100,
-          //     label: {
-          //       fontSize: 16,
-          //       fontWeight: 800,
-          //       color: "#000"
-          //     }
-          //   }
-          // },
-          {
-            name: "放款笔数",
-            type: "bar",
-            barWidth: "30%",
-            itemStyle: {
-              normal: {
-                barBorderRadius: [20, 20, 0, 0],
-                show: true,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#fcf437"
-                  },
-                  {
-                    offset: 1,
-                    color: "#fc9602"
-                  }
-                ])
-              }
-            },
-            // zlevel: 2,
-            barGap: "30%",
-            data: chartData2,
-            markPoint: {
-              data: [{ type: "max", name: "最大值" }],
-              symbol: `image://${require("../../assets/index/k3.png")}`,
-              symbolSize: [50, 23],
-              symbolOffset: [20, -10],
-              label: {
-                fontSize: 16,
-                fontWeight: 800,
-                color: "#000"
-              }
-            }
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-    }
-  },
-  computed: {}
-};
-</script>
-<style scoped>
-</style>

src/components/oldStatistics/4.vue

@@ -1,228 +1,204 @@
 <template>
-  <div :id="id" style="width: 100%;height: 100%;"></div>
+  <div id="myChartold4" style="width: 100%; height: 100%; "></div>
 </template>
+
 <script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    data: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.gatherers();
-  },
-  watch: {
-    data() {
-      this.myChart.clear();
-      this.gatherers();
-    }
-  },
-  methods: {
-    gatherers() {
-      let myChart = this.$echarts.init(document.getElementById(this.id));
-      this.myChart = myChart;
-      let dataArr = this.data;
-      // console.log(dataArr)
-      let chartData = [];
-      // let total = [];
-      dataArr.forEach(function(item) {
-        // console.log(item,index)
-        chartData.push(item.fk, item.sq);
-        
-        // total.push(item.sq);
-        // console.log(chartData);
-      });
-      // var max = total.reduce(function(a, b) {
-      //   return b > a ? b : a;
-      // });
-      // console.log(max)
-      // 绘制图表
-      myChart.setOption({
-        grid: {
-          left: "0%",
-          right: "30%",
-          bottom: "0%",
-          top: "20%",
-          containLabel: true
-        },
-        xAxis: {
-          show: false,
-          type: "value"
+    export default {
+        //老年人能力评估统计
+        name: "OldPersonAbilityCount",
+        data() {
+          return {
+            dataArr: [
+              { label: '完全自理', value: 25 },
+              { label: '半失能', value: 38 },
+              { label: '失能', value: 37 }
+            ],
+            colorArr: [
+              { color1: '#ff0900', color2: '#ff7367' },
+              { color1: '#4625FF', color2: '#6DC0FF' },
+              { color1: '#f6a314', color2: '#f4ff81' }
+            ]
+          }
         },
-        yAxis: [
-          {
-            type: "category",
-            inverse: true,
-            axisLabel: {
-              show: false,
-              textStyle: {
-                color: "#fff"
+        mounted() {
+          const seriesArr = [{
+            type: 'pictorialBar',
+            symbol: `image://${require('../../assets/oldStatistics/r.png')}`,
+            symbolSize: [53, 68],
+            data: [{ value:  200, symbolPosition: 'center', symbolOffset: [0, 0]}],
+            z: 2
+          }];
+
+          seriesArr.push({
+            type: 'pie',
+            radius: [70,85],  //内部经 外半径
+            center: ['30%', '50%'],
+            clockwise: false,
+            labelLine: {
+              show: false
+            },
+            data: [{
+              name: '失能',
+              value: this.dataArr[2].value,
+              label: {
+                show: false
+              },
+              itemStyle: {
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: this.colorArr[2].color1
+                }, {
+                  offset: 1,
+                  color: this.colorArr[2].color2
+                }])
               }
             },
-            splitLine: {
-              show: false
+            {
+              name: '半失能',
+              value: this.dataArr[1].value,
+              label: {
+                show: false
+              },
+              itemStyle: {
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: this.colorArr[1].color1
+                }, {
+                  offset: 1,
+                  color: this.colorArr[1].color2
+                }])
+              }
             },
-            axisTick: {
+            {
+              value: 100 - this.dataArr[1].value - this.dataArr[2].value,
+              itemStyle: {
+                color: "transparent"
+              }
+            }],
+            z: 2
+          });
+
+          seriesArr.push({
+            name: '完全自理',
+            type: 'pie',
+            radius: [70, 85],  //内部经 外半径
+            center: ['30%', '49%'],
+            clockwise: true,
+            labelLine: {
               show: false
             },
-            axisLine: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            name: "yuan",
-            type: "pictorialBar",
-            symbolSize: [12, 12],
-            symbolOffset: [0, 0],
-            zlevel: 10,
-            // z: 100,
-            data: [
-              {
-                value: chartData[0],
-                symbolPosition: "end",
-                symbol: `image://${require("../../assets/index/m1.png")}`
-              },
-              {
-                value: chartData[1],
-                symbolPosition: "end",
-                symbol: `image://${require("../../assets/index/m2.png")}`
+            data: [{
+              value: this.dataArr[0].value,
+              itemStyle: {
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: this.colorArr[0].color1
+                }, {
+                  offset: 1,
+                  color: this.colorArr[0].color2
+                }])
               }
-            ]
-          },
-          {
-            name: "金额",
-            type: "bar",
-            // zlevel: 1,
-            label: {
-              show: false,
-              position: "right",
-              formatter: params => {
-                if (params.dataIndex === 0) {
-                  return "{a|" + chartData[0] + "}";
-                } else {
-                  return "{b|" + chartData[1] + "}";
-                }
-              },
-              rich: {
-                a: {
-                  color: "#ffc636",
-                  fontSize: 20,
-                  fontWeight: 900
-                },
-                b: {
-                  color: "#14cdd5",
-                  fontSize: 20,
-                  fontWeight: 900
-                }
+            },
+            {
+              value: 100 - this.dataArr[0].value,
+              itemStyle: {
+                color: "transparent"
               }
+            }],
+            z: 2
+          });
+
+          seriesArr.push({
+            type: 'pie',
+            radius: [97, 100],  //内部经 外半径
+            center: ['30%', '49%'],
+            clockwise: true,
+            labelLine: {
+              show: false
             },
-            itemStyle: {
-              normal: {
-                barBorderRadius: 30,
-                color: function(params) {
-                  if (params.dataIndex == 0) {
-                    return {
-                      type: "linear",
-                      x: 0,
-                      y: 0,
-                      x2: 1,
-                      y2: 0,
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: "#fea124" // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: "#f9e95d" // 100% 处的颜色
-                        }
-                      ]
-                    };
-                  } else {
-                    return {
-                      type: "linear",
-                      x: 0,
-                      y: 0,
-                      x2: 1,
-                      y2: 0,
-                      colorStops: [
-                        {
-                          offset: 0,
-                          color: "#13c4cf" // 0% 处的颜色
-                        },
-                        {
-                          offset: 1,
-                          color: "#65d97f" // 100% 处的颜色
-                        }
-                      ]
-                    };
-                  }
-                }
+            data: [{
+              name: '完全自理',
+              value: this.dataArr[0].value,
+              label: {
+                show: false
+              },
+              itemStyle: {
+                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: this.colorArr[0].color1
+                }, {
+                  offset: 1,
+                  color: this.colorArr[0].color2
+                }])
               }
             },
-            barWidth: "40%",
-            // z: 10,
-            data: chartData
-          },
-          {
-            name: "背景",
-            type: "bar",
-            barWidth: "40%",
-            barGap: "-100%",
-            data: [200000, 200000],
-            z: 0,
-            label: {
-              show: true,
-              position: "right",
-              formatter: params => {
-                if (params.dataIndex === 0) {
-                  return "{a|" + chartData[0] + "}";
-                } else {
-                  return "{b|" + chartData[1] + "}";
+            {
+              value: 100 - this.dataArr[0].value,
+              itemStyle: {
+                color: "transparent"
+              }
+            }],
+            z: 2
+          });
+
+          let myChart = this.$echarts.init(document.getElementById('myChartold4'));
+          myChart.setOption(
+            {
+              grid:{
+                right:"50%",
+              },
+              color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
+              legend: {
+                show: true,
+                orient: 'vertical',
+                top: 'middle',
+                right: '220',
+                itemGap: 70,
+                itemWidth: 13,
+                itemHeight: 13,
+                data: ['完全自理', '半失能', '失能'],
+                  textStyle: {
+                    color: 'white',
+                  },
+              },
+              xAxis: {
+                type: 'category',
+                splitLine: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                },
+                axisTick: {
+                  show: false
                 }
               },
-              rich: {
-                a: {
-                  color: "#ffc636",
-                  fontSize: 16,
-                  fontWeight: 900
+              yAxis: {
+                type: 'value',
+                max: 200,
+                splitLine: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
                 },
-                b: {
-                  color: "#14cdd5",
-                  fontSize: 16,
-                  fontWeight: 900
+                axisTick: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
                 }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: "#17323d",
-                barBorderRadius: 30
-              }
+              },
+              series: seriesArr
             }
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+          );
+        }
     }
-  },
-  computed: {}
-};
 </script>
+
 <style scoped>
+
 </style>

src/components/oldStatistics/5.vue

@@ -1,221 +1,95 @@
 <template>
-  <div :id="id" style="width: 90%;margin-left:5%;height: 100%;"></div>
+  <div id="myChartold5" style="width: 100%; height: 100%;"></div>
 </template>
+
 <script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    data1: {
-      type: Number,
-      default: 0
-    },
-    text: {
-      type: String,
-      default: "id"
-    },
-    leftArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    topArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    lineleftArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    linetopArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    titlePositionArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    colorArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    centerArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    lineArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    dw: {
-      type: String,
-      default: "%"
-    },
-    iamge: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  mounted() {
-    this.gatherers();
-  },
-  watch: {
-    data1() {
-      this.myChart.clear();
-      this.gatherers();
-    }
-  },
-  methods: {
-    gatherers() {
-      let myChart = this.$echarts.init(document.getElementById(this.id));
-      this.myChart = myChart;
-      let dataArr = this.data1;
-      // console.log(dataArr);
-      let value = 0;
-      if (dataArr) {
-        value = dataArr;
-      }
-      let dw = this.dw;
-      let colorArr = this.colorArr;
-      let centerArr = this.centerArr;
-      let titlePositionArr = this.titlePositionArr;
-      // if(dataArr)
-      // 绘制图表
-      myChart.setOption({
-        angleAxis: {
-          max: 100,
-          show: false
-        },
-        title: [
-          {
-            text: value + dw,
-            left: titlePositionArr[0],
-            top: titlePositionArr[1],
-            textStyle: {
-              fontWeight: "800",
-              fontSize: "25",
-              color: colorArr[0],
-              textAlign: "center",
-              fontFamily: "LCD"
-            }
-          }
-        ],
-        radiusAxis: {
-          type: "category",
-          show: true,
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
+    export default {
+        name: "MzColumnCharts",
+        data() {
+          return {
+            dataArr: [
+              { label: '健康', value: 10000 },
+              { label: '残疾', value: 3965 },
+              { label: '患重特大疾病', value: 5023 },
+              { label: '老年人慢性病', value: 7632 }
+            ],
+            colorArr: [
+              { color1: '#ff2311', color2: 'rgba(255, 128, 125, 0.1)' },
+              { color1: '#2222ff', color2: 'rgba(161, 154, 255, 0.1)' },
+              { color1: '#00c8ff', color2: 'rgba(154, 235, 255, 0.1)' },
+              { color1: '#ff00fd', color2: 'rgba(255, 159, 242, 0.1)' }
+            ]
           }
         },
-        polar: {
-          radius: "130%",
-          center: centerArr
-        },
-        series: [
-          {
-            type: "bar",
-            roundCap: true,
-            barWidth: "15%",
-            showBackground: true,
-            backgroundStyle: {
-              color: colorArr[1]
-            },
-            data: [value],
-            coordinateSystem: "polar",
-            name: "A",
-            itemStyle: {
-              labelLine: {
-                show: false
+        mounted() {
+          let myChart = this.$echarts.init(document.getElementById('myChartold5'));
+          myChart.setOption({
+
+            xAxis: {
+              type: 'category',
+              data: this.dataArr.map((item) => item.label),
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#3075e2'
+                }
               },
-              normal: {
-                opacity: 1,
-                color: colorArr[0]
-              }
-            }
-          },
-          {
-            name: "第三个圆环",
-            type: "pie",
-            clockWise: false,
-            radius: ["85%", "90%"],
-            center: centerArr,
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false
+              splitLine:{
+                show:false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: 'white'
                 }
               }
+
             },
-            // hoverAnimation: false,
-            data: [
-              {
-                value: 500 - value,
-                itemStyle: {
-                  normal: {
-                    color: colorArr[0],
-                    labelLine: {
-                      show: false
-                    }
-                  }
+            yAxis: {
+              type: 'value',
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#3075e2'
                 }
               },
-              {
-                value: value,
-                name: "invisible",
-                itemStyle: {
-                  normal: {
-                    color: colorArr[1],
-                    labelLine: {
-                      show: false
-                    }
-                  }
+              splitLine:{
+                show:false
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: 'white'
                 }
               }
-            ]
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-      // window.onresize = () => {
-      //   return (() => {
-      //     myChart.resize();
-      //   })();
-      // };
+            },
+            series: [{
+              type: 'bar',
+              barWidth:'40',
+              data: this.dataArr.map((item) => item.value),
+              itemStyle: {
+                color: (params) => {
+                  return new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: this.colorArr[ params.dataIndex ].color1},
+                      {offset: 1, color: this.colorArr[ params.dataIndex ].color2}
+                    ]
+                  )
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+                fontSize: 16
+              }
+            }]
+          });
+        }
     }
-  }
-};
 </script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/6.vue

@@ -0,0 +1,119 @@
+<template>
+  <div id="myChartold6" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+  //圆角柱状图
+  import echarts from 'echarts'
+  export default {
+    name: "MzFilletColumnChart2",
+    data() {
+      return {
+        dataArr:[
+          { label: '独居', value: '1000' },
+          { label: '空巢', value: '3600' },
+          { label: '留守', value: '2800' },
+          { label: '特困', value: '2000' },
+          { label: '高龄', value: '3600' },
+          { label: '失能', value: '3000' },
+          { label: '重残', value: '4500' },
+          { label: '失独', value: '4200' },
+          { label: '普通', value: '3700' }
+        ],
+        colorArr: [
+          { color1: '#9db9ff', color2: '#00f' },
+          { color1: '#ffe49e', color2:  '#ffb300'}
+        ]
+      }
+    },
+    mounted() {
+      let myChart = this.$echarts.init(document.getElementById('myChartold6'));
+      myChart.setOption({
+        xAxis: {
+          type: 'category',
+          data: this.dataArr.map((item) => item.label),
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: 'white',
+
+            },
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle:{
+              color: ['#315070'],
+              width: 1,
+              type: 'solid'
+            }
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+        },
+        series: [
+          {
+            data: this.dataArr.map((item) => item.value),
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(11, 43, 84, 0.2)',
+              barBorderRadius: [50, 50, 50, 50]
+            },
+            barWidth: 14,
+            itemStyle: {
+              emphasis: {
+                barBorderRadius: 7
+              },
+              normal: {
+                barBorderRadius: 7,
+                color: (params) => {
+                  return new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color1},
+                      {offset: 1, color: this.colorArr[ params.dataIndex % 2 == 0 ? 0 : 1 ].color2}
+                    ]
+                  )
+                }
+              }
+            },
+            z: 1
+          },
+          {
+            type: 'line',
+            data: this.dataArr.map((item) => item.value),
+
+            symbol: (params, item) => {
+              return item.dataIndex % 2 == 0 ? `image://${require("../../assets/oldStatistics/q1.png")}`  : `image://${require("../../assets/oldStatistics/q2.png")}` ;
+            },
+            symbolSize: [19, 19],
+            lineStyle: {
+              color: 'rgba(255, 165, 0, 1)',
+              width: 1,
+              type: 'dashed'
+            },
+            z: 2
+          }
+        ]
+      });
+    }
+  }
+</script>
+
+<style type="text/css">
+
+</style>
+

src/components/oldStatistics/7.vue

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

src/components/oldStatistics/8.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="myChartold8" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    export default {
+        //老年人收入来源统计
+        name: "OldPersonSourcesOfIncomeCount",
+        data() {
+          return {
+            dataArr: [
+              { label: '家庭经营性', value: 4700 },
+              { label: '工资性', value: 8963 },
+              { label: '转移性', value: 3756 },
+              { label: '财产性', value: 2563 },
+              { label: '其它', value: 8999 }
+            ]
+          }
+        },
+        mounted() {
+          let myChart = this.$echarts.init(document.getElementById('myChartold8'));
+          myChart.setOption({
+            grid:{
+              left:"16%",
+              right:"5%",
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: true,
+              data: this.dataArr.map((item) => {
+                return item.label;
+              }),
+              splitLine: {
+                show: true,
+                lineStyle:{
+                  color: ['#315070'],
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#344db0'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: 'white',
+                  formatter: '{value}',
+                },
+                fontSize: 16
+              },
+              axisTick: {
+                show: false
+              }
+            },
+            yAxis: {
+              type: 'value',
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#5c6ab6'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle:{
+                  color: ['#315070'],
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: 'white',
+                  formatter: '{value}',
+                }
+              },
+              axisTick: {
+                show: false
+              },
+            },
+            series: [
+              {
+                type: 'line',
+                smooth: true,
+                areaStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                      offset: 0, color: '#A79A84' // 0% 处的颜色
+                    }, {
+                      offset: 1, color: 'rgba(255,255,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(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: '#FF6C13'
+                  }, {
+                    offset: 1,
+                    color: '#ffea22'
+                  }]),
+                },
+                lineStyle: {
+                  width: 2
+                }
+              }
+            ]
+          });
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/9.vue

@@ -0,0 +1,171 @@
+<template>
+  <div id="myChartold9" style="width: 100%; height: 100%; "></div>
+</template>
+
+<script>
+    export default {
+        //老年人可支配收入统计
+        name: "OldPersonIncomeControlCount",
+        data() {
+          return {
+            dataArr: [
+              { label: '5000元以下', value: 25 },
+              { label: '5000~10000元', value: 50 },
+              { label: '10000元以上', value: 25 }
+            ],
+            colorArr: [
+              { color1: '#4625FF', color2: '#6DC0FF' },
+              { color1: '#f6a314', color2: '#f4ff81' },
+              { color1: '#45ff00', color2: '#8bffbb' }
+            ]
+          }
+        },
+        mounted() {
+          const seriesArr = [];
+          const offset = 30;
+
+          for(let i = 0; i < this.dataArr.length; i++) {
+            const d = this.dataArr[i];
+
+            // seriesArr.push({
+            //   type: 'pie',
+            //   radius: [0, 50],
+            //   center: [`${50 - offset + i * offset}%`, '50%'],
+            //   labelLine: {
+            //     show: false
+            //   },
+            //   data: [{
+            //     value: d.value,
+            //     // label: {
+            //     //   show: true,
+            //     //   position: 'center',
+            //     //   formatter:() => {
+            //     //     return `${d.value}%`
+            //     //   },
+            //     //   fontSize: '32',
+            //     //   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
+            //       }])
+            //     }
+            //   }],
+            //   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.label}`
+                }
+              },
+              z: 2
+            });
+
+
+            seriesArr.push({
+              type: 'pie',
+              radius: [58, 78],
+              startAngle: '180',
+              clockwise: !(i % 2),
+              center: [`${50 - 29.5 + i * offset}%`, '46%'],
+              labelLine: {
+                show: false
+              },
+              data: [{
+                value: d.value / 2,
+                label: {
+                  show: true,
+                  position: 'center',
+                  formatter:() => {
+                    return `${d.value}%`
+                  },
+                  fontSize: '26',
+                  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
+                  }])
+                }
+              },
+              {
+                value: 50 - (d.value * 50 / 100).toFixed(1),
+                itemStyle: {
+                  color: 'rgba(184, 255, 205, 0.1)'
+                }
+              },
+              {
+                value: 50,
+                itemStyle: {
+                  color: "transparent"
+                }
+              }],
+              z: 2
+            });
+          }
+
+          let myChart = this.$echarts.init(document.getElementById('myChartold9'));
+          myChart.setOption({
+            xAxis: {
+              type: 'category',
+              splitLine: {
+                show: false
+              },
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              }
+            },
+            yAxis: {
+              type: 'value',
+              max: 200,
+              splitLine: {
+                show: false
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              }
+            },
+            series: seriesArr
+          });
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/oldStatistics/jlMap.vue

@@ -1,356 +0,0 @@
-<template>
-  <div id="map1" style="width: 100%;height:100%"></div>
-</template>
-<script>
-import echarts from "echarts";
-import map from "../../util/jilin";
-export default {
-  name: "jlMapChart",
-  props: {
-    data1: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    data2: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-  },
-  data() {
-    return {
-      myChart: null,
-      list: {
-        cc: 0,
-        jl: 1,
-        sp: 2,
-        ly: 3,
-        th: 4,
-        bs: 5,
-        sy: 6,
-        bc: 7,
-        yb: 8
-      }
-    };
-  },
-  watch: {
-    data1() {
-      if (this.myChart) {
-        this.myChart.clear();
-      }
-      this.registerMap1();
-    },
-    data2() {
-      if (this.myChart) {
-        this.myChart.clear();
-      }
-      this.registerMap1();
-    }
-  },
-  methods: {
-    getRandomElements(arr, count) {
-      var shuffled = arr.slice(0),
-        i = arr.length,
-        min = i - count,
-        temp,
-        index;
-      while (i-- > min) {
-        index = Math.floor((i + 1) * Math.random());
-        temp = shuffled[index];
-        shuffled[index] = shuffled[i];
-        shuffled[i] = temp;
-        // console.log(shuffled[i]);
-      }
-      return shuffled.slice(min);
-    },
-    registerMap1() {
-      let myChart = this.$echarts.init(document.getElementById("map1"));
-      this.myChart = myChart;
-      let dd = this.getRandomElements(this.data1, 5);
-      let data2 = this.data2;
-      // console.log(data2[0], "我是data2");
-      let value = [];
-      for (let a in data2[0]) {
-        // console.log(a, "我是aaa");
-        value.push({ ...data2[0][a], index: this.list[a] });
-      }
-      // console.log(value, "我是value");
-      // console.log(data2,"我是data2");
-      echarts.registerMap("jilin", map);
-      // 每个地区的累计疫情数量值
-      var data = [];
-      // 每个地区的新增疫情数量
-      var series = [];
-      [["jilin", data]].forEach(function() {
-        series.push(
-          {
-            type: "map",
-            map: "jilin",
-            zlevel: 0,
-            itemStyle: {
-              normal: {
-                areaColor: "rgba(30,117,187,0.5)",
-                borderColor: "#23b9e8"
-              },
-              emphasis: {
-                areaColor: "#23b9e8"
-              }
-            },
-            label: {
-              normal: {
-                show: true,
-                textStyle: {
-                  color: "#fff",
-                  fontSize: 18
-                }
-              },
-              emphasis: {
-                textStyle: {
-                  fontSize: 16,
-                  color: "#fff"
-                }
-              }
-            },
-            data: data
-          },
-          {
-            name: "点",
-            type: "effectScatter",
-            coordinateSystem: "geo",
-            //symbol: 'pin',
-            tooltip: {
-              padding: 0,
-              enterable: true,
-              backgroundColor: "rgba(50,50,50,0.0)",
-              transitionDuration: 1,
-              textStyle: {
-                fontSize: 16,
-                color: "#fff"
-              },
-              //           company_name: "珲春市森拓工贸有限公司"
-              // intllmoney: "100"
-              // cpname: "云电贷"
-              // bankname: "建设银行"
-              // value: Array(3)
-              // name: "珲春市森拓工贸有限公司"
-              formatter: function(params) {
-                let data = params.data;
-                // console.log(data, "我是data");
-                var tipHtml = "";
-                tipHtml =
-                  '<div class="bag">' +
-                  '<div class="bag_main">' +
-                  '<p style="color:#fff;">' +
-                  "企业名称：" +
-                  '<span style="color:#ffc809;padding-right:10px">' +
-                  data.company_name +
-                  "</span>" +
-                  // "个" +
-                  "</p>" +
-                  '<p style="color:#fff;">' +
-                  // '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
-                  // "</i>" +
-                  "申请金额：" +
-                  '<span style="color:#00d8ff;">' +
-                  data.intllmoney +
-                  "万元" +
-                  "</span>" +
-                  "</p>" +
-                  '<p style="color:#fff;">' +
-                  // '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
-                  // "</i>" +
-                  "推送银行：" +
-                  '<span style="color:#00d8ff;">' +
-                  data.bankname +
-                  "</span>" +
-                  // "个" +
-                  "</p>" +
-                  "</div>" +
-                  "</div>";
-                return tipHtml;
-              }
-            },
-            symbolSize: 20,
-            label: {
-              normal: {
-                show: false,
-                textStyle: {
-                  color: "#fff",
-                  fontSize: 18
-                }
-              },
-              emphasis: {
-                textStyle: {
-                  fontSize: 16,
-                  color: "#fff"
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: "#ffc809" //标志颜色
-              }
-            },
-            zlevel: 6,
-            data: dd
-          }
-        );
-      });
-
-      let option = {
-        tooltip: {
-          padding: 0,
-          enterable: true,
-          backgroundColor: "rgba(50,50,50,0.0)",
-          transitionDuration: 1,
-          textStyle: {
-            fontSize: 16,
-            color: "#fff"
-          },
-          // formatter: function(params) {
-          //   // console.log(params.dataIndex, "我是2222");
-
-          //   let data = "";
-          //   value.forEach(item => {
-          //     if (item.index == params.dataIndex) {
-          //       data = item;
-          //     }
-          //   });
-          //   var tipHtml = "";
-          //   tipHtml =
-          //     '<div style="width:240px;height:100px;background:rgba(22,80,158,0.8);>' +
-          //     '<div style="padding:20px">' +
-          //     '<p style="color:#fff;font-size:12px;">' +
-          //     '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
-          //     "</i>" +
-          //     "认证企业：" +
-          //     '<span style="color:#11ee7d;margin:0 6px;">' +
-          //     data.qynum +
-          //     "</span>" +
-          //     "家" +
-          //     "</p>" +
-          //     '<p style="color:#fff;font-size:12px;">' +
-          //     '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
-          //     "</i>" +
-          //     "融资金额：" +
-          //     '<span style="color:#f48225;margin:0 6px;">' +
-          //     data.money +
-          //     "</span>" +
-          //     "万元" +
-          //     "</p>" +
-          //     "</div>" +
-          //     "</div>";
-          //   return tipHtml;
-          // }
-          formatter: function(params) {
-            let data = "";
-            value.forEach(item => {
-              if (item.index == params.dataIndex) {
-                data = item;
-              }
-            });
-            // console.log(data, "我是data");
-            var tipHtml = "";
-            tipHtml =
-              '<div class="bag1">' +
-              '<div class="bag_main1">' +
-              '<p style="color:#fff;">' +
-              "认证企业：" +
-              "<br/>" +
-              '<span style="color:#ffc809;padding-right:10px;font-family:LCD;font-size:25px">' +
-              data.qynum +
-              "</span>" +
-              "户" +
-              "</p>" +
-              '<p style="color:#fff;">' +
-              // '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
-              // "</i>" +
-              "申请金额：" +
-              "<br/>" +
-              '<span style="color:#00d8ff;font-family:LCD;font-size:25px">' +
-              data.money +
-              "</span>" +
-              "万元" +
-              "</div>" +
-              "</div>";
-            return tipHtml;
-          }
-        },
-        geo: {
-          map: "jilin",
-          label: {
-            show: false,
-            textStyle: {
-              fontSize: 16,
-              color: "#fff"
-            }
-          },
-          itemStyle: {
-            normal: {
-              areaColor: "rgba(30,117,187,0.5)",
-              borderColor: "#23b9e8"
-            },
-            emphasis: {
-              areaColor: "#23b9e8"
-            }
-          }
-          // zlevel:10
-        },
-        series: series
-      };
-      myChart.setOption(option);
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-    }
-  },
-  mounted() {
-    this.registerMap1();
-  }
-};
-</script>
-<style  scoped>
-#map1 >>> .bag {
-  background: url("../../assets/index/mapPop.png") no-repeat;
-  background-size: 100% 100%;
-  /* width:339px; */
-  height: 150px;
-  /* border: orangered solid 1px; */
-  font-size: 16px;
-}
-#map1 >>> .bag_main {
-  /* display: flex; */
-  width: 100%;
-  height: 80%;
-  /* border: orangered solid 1px; */
-  /* margin: 5% auto ; */
-  white-space: normal;
-  padding-top: 40px;
-  padding-left: 20px;
-  padding-right: 20px;
-  font-weight: 900;
-}
-#map1 >>> .bag1 {
-  background: url("../../assets/index/mapPop.png") no-repeat;
-  background-size: 100% 100%;
-  width: 220px;
-  height: 133px;
-  /* border: orangered solid 1px; */
-  font-size: 16px;
-}
-#map1 >>> .bag_main1 {
-  /* display: flex; */
-  width: 80%;
-  height: 80%;
-  /* border: orangered solid 1px; */
-  margin: 5% auto;
-  white-space: normal;
-  padding-top: 20px;
-  padding-left: 10px;
-   font-weight: 900;
-  padding-right: 10px;
-}
-</style>