10

src/components/index/1.vue

@@ -1,335 +1,120 @@
-<template>
-  <div id="c1" style="width: 90%;margin-left:5%;height: 100%;"></div>
+<template>
+    <div id="myChartindex1" style="width: 100%; height: 100%; "></div>
 </template>
+
 <script>
-export default {
-  name: "chart",
-  props: {
-    id: {
-      type: String,
-      default: "id"
-    },
-    dataArr: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
-    // 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",
+    //圆角柱状图
+    import echarts from 'echarts'
 
-          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)"
-                  }
+    export default {
+        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'}
                 ],
-                global: false
-              }
+                colorArr: [
+                    {color1: '#9db9ff', color2: '#00f'},
+                    {color1: '#ffe49e', color2: '#ffb300'}
+                ]
             }
-          }
         },
-        title: [
-          {
-            text: "(万元)",
-            left: "2%",
-            bottom: "13%",
-            // textAlign: "center",
-            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
-            },
-            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
-          }
-        ],
+        mounted() {
+            let myChart = this.$echarts.init(document.getElementById('myChartindex1'));
+            myChart.setOption({
+                grid: {
+                  left:'12%',
+                    right:'7%',
+                    top:'15%',
+                    bottom:'15%'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.dataArr.map((item) => item.label),
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: 'white',
+                            fontSize : 14
+                        },
+                    },
 
-        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,
-                  [
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: ['#315070'],
+                            width: 1,
+                            type: 'solid'
+                        }
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+
+                },
+                series: [
                     {
-                      offset: 0,
-                      color: "#fca91f"
+                        data: this.dataArr.map((item) => item.value),
+                        type: 'bar',
+                        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
                     },
                     {
-                      offset: 1,
-                      color: "#4e6b57"
+                        type: 'line',
+                        data: this.dataArr.map((item) => item.value),
+                        symbol: (params, item) => {
+                            return item.dataIndex % 2 == 0 ? `image://${require("../../assets/index/q1.png")}` : `image://${require("../../assets/index/q2.png")}`;
+                        },
+                        symbolSize: [19, 19],
+                        lineStyle: {
+                            color: 'rgba(255, 165, 0, 1)',
+                            width: 1,
+                            type: 'dashed'
+                        },
+                        z: 2
                     }
-                  ],
-                  false
-                )
-              }
-            },
-            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"
-              }
-            }
-          }
-          // {
-          //   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 type="text/css">
+
 </style>

src/components/index/2.vue

@@ -1,378 +1,170 @@
 <template>
-  <div id="oldc2" style="width: 100%;height: 100%;"></div>
+  <div id="myChartindex2" 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("oldc2"));
-      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
-        },
-        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: [
-                  {
-                    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
-              }
-            }
+    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' }
+            ]
           }
         },
-        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"
+        mounted() {
+          const seriesArr = [];
+
+          let maxValue = 0;
+          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) {
+                maxValue = arr[j].value;
               }
-            },
-            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% 处的颜色
+
+          const labelArr = this.dataArr[0].arr.map((item) => item.label).reverse();
+
+          for(let i = 0; i < this.dataArr.length; i++) {
+            const d = this.dataArr[i];
+            console.log(d.label)
+            seriesArr.push({
+              name: d.label,
+              type: 'bar',
+              barWidth: '15%',
+              data: [
+                {
+                  value: d.arr[1].value,
+                  itemStyle: {
+                    normal: {
+                      color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                        offset: 0,
+                        color: this.colorArr[i].color1
+                      }, {
+                        offset: 1,
+                        color: this.colorArr[i].color2
+                      }]),
+                      barBorderRadius: [0, 50, 50, 0]
                     }
-                  ]
-                }
-              }
-            },
-            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% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(10,30,57,0.1)" // 100% 处的颜色
+                  },
+                  label: {
+                    show: true,
+                    position: 'right',
+                    color: this.colorArr[i].color1,
+                    fontSize: 20
+                  },
+                },
+                {
+                  value: d.arr[0].value,
+                  itemStyle: {
+                    normal: {
+                      color:  new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                        offset: 0,
+                        color: this.colorArr[i].color1
+                      }, {
+                        offset: 1,
+                        color: this.colorArr[i].color2
+                      }]),
+                      barBorderRadius: [0, 50, 50, 0]
                     }
-                  ]
+                  },
+                  label: {
+                    show: true,
+                    position: 'right',
+                    color: this.colorArr[i].color1,
+                    fontSize: 20
+                  },
                 }
+              ]
+            });
+
+            const kkArr = new Array(this.dataArr.length).fill({});
+            kkArr[i] = { value: 100, symbolPosition: 'start' };
+
+            seriesArr.push({
+              type: 'pictorialBar',
+              symbol: `image://${require('../../assets/index/label.png')}`,
+              symbolSize: [16, 50],
+              symbolOffset: [-20, 0],
+              data: kkArr,
+              label: {
+                show: true,
+                position: 'left',
+                offset: [-30, 0],
+                distance: 0,
+                color: '#fff',
+                fontSize: 16,
+                formatter: `${ labelArr[i] }`
+              },
+              z: 10
+            });
+          }
+          let myChart = this.$echarts.init(document.getElementById('myChartindex2'));
+          myChart.setOption({
+            color: [this.colorArr[0].color1, this.colorArr[0].color1, this.colorArr[1].color1],
+            legend: {
+              data: ["党员", "群众"],
+              left: 'right',
+              textStyle: {
+                color: "#fff"
               }
             },
-            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"
+            grid: {
+              left: '30%',
+              right: '15%',
+              bottom: '5%',
+              height: '90%',
+              containLabel: true
+            },
+            xAxis: [
+              {
+                type: 'value',
+                max: maxValue,
+                axisTick: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                splitLine: {
+                  show: false
+                }
               }
-            },
-            data: bottomArr
-          },
-          {
-            name: "认证", //这个是Bar图
-            type: "bar",
-            barWidth: "30%",
-            xAxisIndex: 1,
-            label: {
-              show: false
-            },
-            itemStyle: {
-              normal: {
-                color: "#ff7200"
+            ],
+            yAxis: [
+              {
+                type: 'category',
+                nameTextStyle: {
+                  show: false
+                },
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: false
+                },
+                splitLine: {
+                  show: false
+                }
               }
-            },
-            data: bottomArr
-          }
-          // {
-          //   name: "服务", //这个是Bar图
-          //   type: "bar",
-          //   barWidth: "20%",
-          //   xAxisIndex: 1,
-          //   label: {
-          //     show: false
-          //   },
-          //   itemStyle: {
-          //     normal: {
-          //       color: "#ff349d" // 0% 处的颜色
-          //     }
-          //   },
-          //   data: bottomArr
-          // }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+            ],
+            series: seriesArr
+          });
+        }
     }
-  },
-  computed: {}
-};
 </script>
+
 <style scoped>
+
 </style>

src/components/index/3.vue

@@ -1,266 +1,199 @@
 <template>
-  <div id="c3" style="width: 90%;margin-left:5%;height: 100%;"></div>
+  <div id="myChartindex3" 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("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
+    export default {
+        name: "CollectPatrolDataCount",
+        data() {
+          return {
+            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'
+              }
+            ]
           }
         },
-        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
+        mounted() {
+          const valueArr1 = this.dataArr[0].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;
             }
           }
-        },
-        xAxis: [
-          {
-            type: "category",
-            // interVal: 0,
-            axisTick: {
-              show: false
+
+          const yMaxValue = maxValue + Math.floor(maxValue / 5);
+          const barArr = new Array(valueArr2.length).fill(0);
+          barArr[maxValueIndex] = yMaxValue;
+
+          let myChart = this.$echarts.init(document.getElementById('myChartindex3'));
+          myChart.setOption({
+            grid:{
+              left:"12%",
+              right:"6%",
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#363e83"
+            legend: {
+              left: 'right',
+              data: ['采集数据', '巡访数据'],
+              textStyle:{//图例文字的样式
+                color:'#ccc',
+                fontSize:16
               }
             },
-            axisLabel: {
-              interval: 0,
-              textStyle: {
-                color: "#fff",
-                // fontWeight: 900,
-                fontSize: 14
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: this.dataArr[0].data.map((item) => {
+                return item.label;
+              }),
+              splitLine: {
+                show: false
               },
-              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],
+              axisLine: {
+                show: true
+              },
+              axisLabel: {
                 show: true,
-                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#fcf437"
-                  },
-                  {
-                    offset: 1,
-                    color: "#fc9602"
-                  }
-                ])
+                color: '#fff'
+              },
+              axisTick: {
+                show: false
               }
             },
-            // 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"
+            yAxis: {
+              type: 'value',
+              max: yMaxValue,
+              splitLine: {
+                show: false
+              },
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
               }
-            }
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+            },
+            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|5623}', '巡访：{b|5623}'].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'
+              }
+            ]
+          });
+        }
     }
-  },
-  computed: {}
-};
 </script>
+
 <style scoped>
+
 </style>

src/components/index/4.vue

@@ -1,228 +1,172 @@
 <template>
-  <div :id="id" style="width: 100%;height: 100%;"></div>
+  <div id="myChartindex4" 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"
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: true,
-            axisLabel: {
-              show: false,
-              textStyle: {
-                color: "#fff"
-              }
-            },
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            }
-          }
-        ],
-        series: [
-          {
-            name: "yuan",
-            type: "pictorialBar",
-            symbolSize: [12, 12],
-            symbolOffset: [0, 0],
-            zlevel: 10,
-            // z: 100,
-            data: [
+    import echarts from 'echarts'
+
+    export default {
+        name: "Mz_tx_charts",
+        data() {
+          return {
+            dataArr: [
+              {
+                label: '南关区',
+                value: 3000
+              },
               {
-                value: chartData[0],
-                symbolPosition: "end",
-                symbol: `image://${require("../../assets/index/m1.png")}`
+                label: '朝阳区',
+                value: 2000
               },
               {
-                value: chartData[1],
-                symbolPosition: "end",
-                symbol: `image://${require("../../assets/index/m2.png")}`
+                label: '二道区',
+                value: 1000
+              },
+              {
+                label: '绿园区',
+                value: 500
+              },
+              {
+                label: '高薪区',
+                value: 300
               }
             ]
-          },
-          {
-            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] + "}";
-                }
+          }
+        },
+        methods: {
+           getArrByKey(data, k) {
+            let key = k || "value";
+            let res = [];
+            if (data) {
+              data.forEach(function (t) {
+                res.push(t[key]);
+              });
+            }
+            return res;
+          }
+        },
+        mounted() {
+          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 }`
               },
-              rich: {
-                a: {
-                  color: "#ffc636",
-                  fontSize: 20,
-                  fontWeight: 900
-                },
-                b: {
-                  color: "#14cdd5",
-                  fontSize: 20,
-                  fontWeight: 900
-                }
-              }
+              z: 2
+            });
+          }
+
+          let myChart = this.$echarts.init(document.getElementById('myChartindex4'));
+          myChart.setOption({
+            grid: {
+              top: '19%',
+              bottom: '-8%',
+              right: '0%',
+              left: '15%',
+              containLabel: true
             },
-            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% 处的颜色
-                        }
-                      ]
-                    };
-                  }
-                }
-              }
+            xAxis: {
+              show: false,
+              max: 10000
             },
-            barWidth: "40%",
-            // z: 10,
-            data: chartData
-          },
-          {
-            name: "背景",
-            type: "bar",
-            barWidth: "40%",
-            barGap: "-100%",
-            data: [200000, 200000],
-            z: 0,
-            label: {
+            yAxis: [{
+              triggerEvent: true,
               show: true,
-              position: "right",
-              formatter: params => {
-                if (params.dataIndex === 0) {
-                  return "{a|" + chartData[0] + "}";
-                } else {
-                  return "{b|" + chartData[1] + "}";
-                }
+              inverse: true,
+              data: this.getArrByKey(this.dataArr, 'label'),
+              axisLine: {
+                show: false
+              },
+              splitLine: {
+                show: false
               },
-              rich: {
-                a: {
-                  color: "#ffc636",
-                  fontSize: 16,
-                  fontWeight: 900
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              }
+            }, {
+              triggerEvent: true,
+              show: true,
+              inverse: true,
+              data: this.getArrByKey(this.dataArr, 'label'),
+              axisLine: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                interval: 0,
+                shadowOffsetX: '-20px',
+                align: 'right',
+                verticalAlign: 'bottom',
+                lineHeight: 30,
+                fontSize: 16,
+                color: '#fff',
+                formatter: (value, index) => {
+                  return this.dataArr[index].value + '   ';
                 },
-                b: {
-                  color: "#14cdd5",
-                  fontSize: 16,
-                  fontWeight: 900
-                }
               }
-            },
-            itemStyle: {
-              normal: {
-                color: "#17323d",
-                barBorderRadius: 30
+            }],
+            series: [{
+              type: 'bar',
+              showBackground: true,
+              barBorderRadius: 30,
+              yAxisIndex: 0,
+              data: this.dataArr,
+              barWidth: 6,
+              itemStyle: {
+                color: () => {
+                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                    offset: 0,
+                    color: '#0023ff'
+                  }, {
+                    offset: 1,
+                    color: '#75c6ff'
+                  }]);
+                },
+                barBorderRadius: 30,
+              },
+              label: {
+                normal: {
+                  color: '#00b8ff',
+                  show: true,
+                  position: [0, '-20px'],
+                  textStyle: {
+                    fontSize: 15
+                  },
+                  formatter: function(a,) {
+                    return a.name;
+                  }
+                }
               }
-            }
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
+            }, ...seriesArr]
+          });
+        }
     }
-  },
-  computed: {}
-};
 </script>
+
 <style scoped>
+
 </style>

src/components/index/5.vue

@@ -1,221 +1,260 @@
 <template>
-  <div :id="id" style="width: 90%;margin-left:5%;height: 100%;"></div>
+  <div id="myChartindex5" 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
+    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' }
+            ]
+          }
         },
-        title: [
-          {
-            text: value + dw,
-            left: titlePositionArr[0],
-            top: titlePositionArr[1],
-            textStyle: {
-              fontWeight: "800",
-              fontSize: "25",
-              color: colorArr[0],
-              textAlign: "center",
-              fontFamily: "LCD"
+        methods: {
+          handlerData(val) {
+            const length = String(parseInt(val)).length;
+            let r = 1;
+            if(length != 0) {
+              r = r + new Array(length).fill(0).join('');
             }
-          }
-        ],
-        radiusAxis: {
-          type: "category",
-          show: true,
-          axisLabel: {
-            show: false
+            return (parseInt(val) / parseInt(r)).toFixed(2);
           },
-          axisLine: {
-            show: false
+          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%', '50%'],
+                  textStyle: {
+                    fontSize: 24,
+                    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}
+                    ]
+                  )
+                }
+              }
+            };
           },
-          axisTick: {
-            show: false
+          createCircleImage(){
+
           }
         },
-        polar: {
-          radius: "130%",
-          center: centerArr
-        },
-        series: [
-          {
-            type: "bar",
-            roundCap: true,
-            barWidth: "15%",
-            showBackground: true,
-            backgroundStyle: {
-              color: colorArr[1]
+        mounted() {
+          const seriesArr = [];
+
+          const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 14, center_y: 25, text: this.data1.value, value: this.handlerData(this.data1.value) });
+          seriesArr.push(liquidFill1);
+
+          const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 58, center_y: 25, text: this.data2.value, value: this.handlerData(this.data2.value) });
+          seriesArr.push(liquidFill2);
+
+          const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 14, center_y: 75, text: this.data3.value, value: this.handlerData(this.data3.value) });
+          seriesArr.push(liquidFill3);
+
+          const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 58, center_y: 75, text: this.data4.value, value: this.handlerData(this.data4.value) });
+          seriesArr.push(liquidFill4);
+
+          seriesArr.push({
+            type: 'pictorialBar',
+            symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
+            symbolSize: [102, 102],
+            data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, -100] }, {}],
+            label: {
+              show: true,
+              position: 'top',
+              offset: [-55, -80],
+              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: [120, -60] }, {}],
+            label: {
+              show: true,
+              position: 'top',
+              offset: [-70, -50],
+              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, -80],
+              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, -50],
+              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: [10, 30] }, {}],
+            label: {
+              show: true,
+              position: 'top',
+              offset: [-70, 55],
+              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: [120, 70] }, {}],
+            label: {
+              show: true,
+              position: 'top',
+              offset: [-70, 90],
+              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, 55],
+              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, 90],
+              color: this.colorArr[3].color1,
+              fontSize: 16,
+              formatter: `${this.data4.value}`
+            },
+            z: 2
+          });
+
+          let myChart = this.$echarts.init(document.getElementById('myChartindex5'));
+          myChart.setOption({
+            grid:{
+              left:"2%"
             },
-            data: [value],
-            coordinateSystem: "polar",
-            name: "A",
-            itemStyle: {
-              labelLine: {
+            xAxis: {
+              type: 'value',
+              max: 100,
+              splitLine: {
                 show: false
               },
-              normal: {
-                opacity: 1,
-                color: colorArr[0]
-              }
-            }
-          },
-          {
-            name: "第三个圆环",
-            type: "pie",
-            clockWise: false,
-            radius: ["85%", "90%"],
-            center: centerArr,
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false
-                }
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              axisTick: {
+                show: false
               }
             },
-            // hoverAnimation: false,
-            data: [
-              {
-                value: 500 - value,
-                itemStyle: {
-                  normal: {
-                    color: colorArr[0],
-                    labelLine: {
-                      show: false
-                    }
-                  }
-                }
+            yAxis: {
+              type: 'category',
+              splitLine: {
+                show: false
               },
-              {
-                value: value,
-                name: "invisible",
-                itemStyle: {
-                  normal: {
-                    color: colorArr[1],
-                    labelLine: {
-                      show: false
-                    }
-                  }
-                }
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              axisTick: {
+                show: false
               }
-            ]
-          }
-        ]
-      });
-      window.addEventListener("resize", function() {
-        myChart.resize();
-      });
-      // window.onresize = () => {
-      //   return (() => {
-      //     myChart.resize();
-      //   })();
-      // };
+            },
+            series: seriesArr
+          });
+        }
     }
-  }
-};
 </script>
+
+<style scoped>
+
+</style>

src/pages/Home.vue

@@ -11,7 +11,7 @@
                     </router-link>
                 </div>
                 <div class="p1chart bj">
-                    <com1 :dataArr="dataArr1"></com1>
+                    <com1 ></com1>
                 </div>
             </div>
             <!-- 左二 -->
@@ -36,13 +36,13 @@
                     </p>
                 </div>
                 <div class="p2chart bj">
-                    <div class="p2legend">
-                        <span class="span2">群众</span>
-                        <img src="../assets/index/lv.png"/>
-                        <span class="span2">党员</span>
-                        <img src="../assets/index/huang.png"/>
-                    </div>
-                    <com2 :dataArr="dataArr2"></com2>
+<!--                    <div class="p2legend">-->
+<!--                        <span class="span2">群众</span>-->
+<!--                        <img src="../assets/index/lv.png"/>-->
+<!--                        <span class="span2">党员</span>-->
+<!--                        <img src="../assets/index/huang.png"/>-->
+<!--                    </div>-->
+                    <com2 ></com2>
                 </div>
             </div>
             <!-- 左三 -->
@@ -51,13 +51,13 @@
                     <p>采集巡访数据统计</p>
                 </div>
                 <div class="p3chart bj">
-                    <div class="p3legend">
-                        <span class="span1">巡访数据</span>
-                        <img src="../assets/index/huang.png"/>
-                        <span class="span2">采集数据</span>
-                        <img src="../assets/index/lan.png"/>
-                    </div>
-                    <com3 :dataArr="dataArr3"></com3>
+<!--                    <div class="p3legend">-->
+<!--                        <span class="span1">巡访数据</span>-->
+<!--                        <img src="../assets/index/huang.png"/>-->
+<!--                        <span class="span2">采集数据</span>-->
+<!--                        <img src="../assets/index/lan.png"/>-->
+<!--                    </div>-->
+                    <com3 ></com3>
                 </div>
             </div>
         </div>
@@ -120,33 +120,7 @@
                     <span :class="isTure ? 'kaung2': 'kaung1' " @click="right2">地区探访数据</span>
                 </div>
                 <div class="p4chart bj">
-                    <div class="progress">
-                        <el-row
-                                type="flex"
-                                justify="center"
-                                align="middle"
-                                style="height:25%"
-                                v-for="(item,index) in data4.slice(0, 10)"
-                                :key="index"
-                        >
-                            <el-col :span="1">
-                                <img :src="isSrcArr(index)"/>
-                                <span
-
-                                        style="position:absolute;top:30%;left:1.8%;color:#fff;font-size:14px"
-                                >{{index+1}}</span>
-                            </el-col>
-                            <el-col
-                                    :span="9"
-                                    :style="{color:isThree(index)}"
-                                    style="font-size:20px"
-                            >{{item.label}}
-                            </el-col>
-                            <el-col :span="14">
-                                <com4 :id="'d'+index" :data="item.data"></com4>
-                            </el-col>
-                        </el-row>
-                    </div>
+                    <com4></com4>
                 </div>
             </div>
             <!-- 右二 -->
@@ -155,90 +129,7 @@
                     <p>运营分析</p>
                 </div>
                 <div class="p5chart">
-                    <div class="p5box">
-                        <div
-                                style="position:absolute;z-index:100;width:22%;height:90%;"
-                                :style="{left:chart5[0].leftArr5,top:chart5[0].topArr5}"
-                        >
-                        </div>
-                        <div
-                                style="position:absolute;z-index:100;width:20%;height:5%;"
-                                :style="{left:chart5[0].lineleftArr5,top:chart5[0].linetopArr5}"
-                        >
-                        </div>
-                        <com5
-                                id="e0"
-                                :colorArr="chart5[0].colorArr5"
-                                :centerArr="chart5[0].centerArr5"
-                                :titlePositionArr="chart5[0].titlePositionArr5"
-                                :imgPositionArr="chart5[0].imgPositionArr5"
-                                :data1="circledata0"
-                                :dw="chart5[0].dw5"
-                        ></com5>
-                    </div>
-                    <div class="p5box">
-                        <div
-                                style="position:absolute;z-index:100;width:22%;height:90%;"
-                                :style="{left:chart5[1].leftArr5,top:chart5[1].topArr5}"
-                        >
-                        </div>
-                        <div
-                                style="position:absolute;z-index:100;width:20%;height:5%;"
-                                :style="{left:chart5[1].lineleftArr5,top:chart5[1].linetopArr5}"
-                        >
-                        </div>
-                        <com5
-                                id="e1"
-                                :colorArr="chart5[1].colorArr5"
-                                :centerArr="chart5[1].centerArr5"
-                                :titlePositionArr="chart5[1].titlePositionArr5"
-                                :imgPositionArr="chart5[1].imgPositionArr5"
-                                :data1="circledata1"
-                                :dw="chart5[1].dw5"
-                        ></com5>
-                    </div>
-                    <div class="p5box">
-                        <div
-                                style="position:absolute;z-index:100;width:22%;height:90%;"
-                                :style="{left:chart5[2].leftArr5,top:chart5[2].topArr5}"
-                        >
-                        </div>
-                        <div
-                                style="position:absolute;z-index:100;width:20%;height:5%;"
-                                :style="{left:chart5[2].lineleftArr5,top:chart5[2].linetopArr5}"
-                        >
-                        </div>
-                        <com5
-                                id="e2"
-                                :colorArr="chart5[2].colorArr5"
-                                :centerArr="chart5[2].centerArr5"
-                                :titlePositionArr="chart5[2].titlePositionArr5"
-                                :imgPositionArr="chart5[2].imgPositionArr5"
-                                :data1="circledata2"
-                                :dw="chart5[2].dw5"
-                        ></com5>
-                    </div>
-                    <div class="p5box">
-                        <div
-                                style="position:absolute;z-index:100;width:22%;height:90%;"
-                                :style="{left:chart5[3].leftArr5,top:chart5[3].topArr5}"
-                        >
-                        </div>
-                        <div
-                                style="position:absolute;z-index:100;width:20%;height:5%;"
-                                :style="{left:chart5[3].lineleftArr5,top:chart5[3].linetopArr5}"
-                        >
-                        </div>
-                        <com5
-                                id="e3"
-                                :colorArr="chart5[3].colorArr5"
-                                :centerArr="chart5[3].centerArr5"
-                                :titlePositionArr="chart5[3].titlePositionArr5"
-                                :imgPositionArr="chart5[3].imgPositionArr5"
-                                :data1="circledata3"
-                                :dw="chart5[3].dw5"
-                        ></com5>
-                    </div>
+                    <com5></com5>
                 </div>
             </div>
             <!-- 右三 -->
@@ -256,14 +147,15 @@
                                     align="middle"
                                     :class="{'sc0': index%2==0}"
                             >
-                                <el-col :span="4" class="col4">
-                                    <el-image class="img" :src="scrollTextisColor(index)"></el-image>
-                                </el-col>
-                                <el-col :span="8">{{item.time}}</el-col>
+<!--                                <el-col :span="4" class="col4">-->
+<!--                                    <el-image class="img" :src="scrollTextisColor(index)"></el-image>-->
+<!--                                </el-col>-->
+                                <el-col :span="4">{{item.date}}</el-col>
+                                <el-col :span="4">{{item.time}}</el-col>
                                 <!-- <el-col :span="4">
                                   <img src="../assets/index/block.png" alt />
                                 </el-col>-->
-                                <el-col :span="12">{{item.news}}</el-col>
+                                <el-col :span="12">{{item.address}}</el-col>
                             </el-row>
                         </li>
                     </ul>
@@ -280,6 +172,11 @@
     import com4 from "../components/index/4.vue";
     import com5 from "../components/index/5.vue";
     import vueSeamlessScroll from "vue-seamless-scroll";
+    import {
+        fiveNum,
+        mapsec,
+    } from "../api";
+
     export default {
         name: "Home",
         components: {com1, com2, com3, com4, com5, jlMap, vueSeamlessScroll},
@@ -293,15 +190,62 @@
                 isTure2: false,
                 num: 0,
                 zhuce: 0,
-                // 左一
-                dataArr1: [],
-                // 左二
-                dataArr2: [],
-                // 左三
-                dataArr3: [],
                 maptopResult: {},
                 // 右三实时对接数据
-                listData: [],
+                listData: [
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },  {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+                    {
+                        date:'06-09',
+                        time:'08:17',
+                        address:'长春市朝阳区老人张翠芳探访',
+                    },
+
+
+
+                ],
                 step: 20, // 数值越大速度滚动越快
                 limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                 hoverStop: true, // 是否开启鼠标悬停stop
@@ -314,65 +258,6 @@
                 mapdata1: [],
                 mapprodata: [],
                 data4: [],
-                // 右二数据
-                chart5: [
-                    {
-                        dw5: "%",
-                        leftArr5: "10%",
-                        topArr5: "2%",
-                        lineleftArr5: "53.5%",
-                        linetopArr5: "60%",
-                        label: "对接成功率",
-                        colorArr5: ["#7fc549", "#254a39"],
-                        centerArr5: ["65%", "50%"],
-                        titlePositionArr5: ["51%", "38%"],
-                        lineArr5: require("../assets/index/h1.png"),
-                        iamge5: require("../assets/index/q1.png")
-                    },
-                    {
-                        dw5: "%",
-                        leftArr5: "75%",
-                        topArr5: "2%",
-                        lineleftArr5: "26.5%",
-                        linetopArr5: "60%",
-                        label: "融资需求满足率",
-                        colorArr5: ["#ffad26", "#553d2d"],
-                        centerArr5: ["35%", "50%"],
-                        titlePositionArr5: ["22%", "38%"],
-                        lineArr5: require("../assets/index/h2.png"),
-                        iamge5: require("../assets/index/q2.png")
-                    },
-                    {
-                        dw5: "万",
-                        leftArr5: "10%",
-                        topArr5: "0%",
-                        lineleftArr5: "53.5%",
-                        linetopArr5: "60%",
-                        label: "平均办理时长",
-                        colorArr5: ["#59a4f7", "#59a4f7"],
-                        centerArr5: ["65%", "50%"],
-                        titlePositionArr5: ["47%", "40%"],
-                        lineArr5: require("../assets/index/h3.png"),
-                        iamge5: require("../assets/index/q3.png")
-                    },
-                    {
-                        dw5: "%",
-                        leftArr5: "75%",
-                        topArr5: "2%",
-                        lineleftArr5: "26.5%",
-                        linetopArr5: "60%",
-                        label: "平均利率",
-                        colorArr5: ["#a16efc", "#a16efc"],
-                        centerArr5: ["35%", "50%"],
-                        titlePositionArr5: ["18%", "40%"],
-                        lineArr5: require("../assets/index/h4.png"),
-                        iamge5: require("../assets/index/q4.png")
-                    }
-                ],
-                circledata0: 0,
-                circledata1: 0,
-                circledata2: 0,
-                circledata3: 0,
                 mapDataArr: [],
                 mapDide: {
                     //长春
@@ -457,6 +342,7 @@
             this.timer = setInterval(() => {
                 this.ssdj();
             }, 60000);
+            this.fiveNum();
         },
         methods: {
             //  右边第一个  地区探访数据 按钮
@@ -487,9 +373,43 @@
                 this.isleftbtnTure = false;
             },
 
+            // 地图上5个统计
+            async fiveNum() {
+                const response = await fiveNum();
+                this.maptopResult = response;
+                this.circledata0 = Number(((this.maptopResult.ljfknum / this.maptopResult.sqjenum) * 100).toFixed(0));
+            },
+            async mapsec() {
+                const response = await mapsec();
+                // console.log(response);
+                let data = [];
+                for (let arr in response) {
+                    response[arr].forEach((item, index) => {
+                        data.push({
+                            ...item,
+                            value: this.mapDide[arr][index].concat(parseInt(item.intllmoney)),
+                            name: item.company_name
+                        });
+                    });
+                }
+                this.mapDataArr = data;
+                // }
+            },
+
+            scrollTextisColor: function (i) {
+                let inde = i % 3;
+                //console.log(inde)
+                if (inde === 0) {
+                    return require("../assets/index/red.png")
+                } else if (inde === 1) {
+                    return require("../assets/index/lv.png")
+                } else if (inde === 2) {
+                    return require("../assets/index/huang.png")
+                }
+            },
+
         },
         computed: {
-
         }
     };
 </script>
@@ -730,57 +650,10 @@
     .p5chart {
         width: 100%;
         height: 84%;
-        margin-left: 10%;
-
-    }
-
-    .span1box {
-        width: 85%;
-        margin-left: 5%;
-        height: 12%;
-
-        border-bottom: 1px dashed #006273;
-    }
-
-    .progress {
-        width: 85%;
-        margin-left: 5%;
-        height: 84%;
-        margin-top: 4%;
-        overflow-x: hidden;
-        overflow-y: auto;
-        text-align: center;
-    }
+        margin-left:4%;
 
-    .progress .el-row {
-        height: 25%;
-        border-bottom: 1px dashed #006273;
     }
 
-    .progress::-webkit-scrollbar {
-        background-color: #1b1b1b;
-        height: 8px;
-        width: 8px;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-
-    .progress::-webkit-scrollbar-track {
-        opacity: 0;
-        transition: opacity 0.12s ease-out;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
-
-    .progress::-webkit-scrollbar-thumb {
-        background-color: #1391da;
-        transition: background-color 0.3s;
-        -webkit-border-radius: 2em;
-        -moz-border-radius: 2em;
-        border-radius: 2em;
-    }
 
     .topdatabox {
         width: 100%;
@@ -809,41 +682,7 @@
         color: rgba(247, 255, 63, 1);
     }
 
-    .dw {
-        color: #ffc809;
-    }
-
-    .name {
-        color: #fff;
-        font-size: 25px;
-    }
-
-    .sc0 {
-        background-color: #0d274c;
-    }
-
-    .span1 {
-        float: right;
-        color: #fff;
-        font-size: 1em;
-        /*font-size:13px;*/
-    }
-
-    .span2 {
-        float: right;
-        color: #fff;
-        font-size: 1em;
-        margin-right: 2%;
-    }
 
-    .p5box {
-        width: 45%;
-        height: 48%;
-        margin-top: 2%;
-        float: left;
-        position: relative;
-        top: -3%;
-    }
 
     .aa {
         opacity: 0.1;
@@ -897,78 +736,9 @@
     .item {
         font-size: 16px;
     }
+    .sc0 {
+        background-color: #0d274c;
 
-    .left-kaung {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        background: url("../assets/index/leftkuang.png");
-        font-size: 16px;
-    }
-
-    .left-selectkaung {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        background: url("../assets/index/leftselectkuang.png");
-        font-size: 16px;
-    }
-
-    .left-kaung2 {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        background: url("../assets/index/leftkuang2.png");
-        font-size: 16px;
-    }
-
-    .left-selectkaung2 {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        font-size: 16px;
-        background: url("../assets/index/leftselectkuang2.png");
-    }
-
-    .left-kaung3 {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        background: url("../assets/index/leftkuang2.png");
-        font-size: 16px;
-    }
-
-    .left-selectkaung3 {
-        float: right;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        font-size: 16px;
-        background: url("../assets/index/leftselectkuang2.png");
-    }
-
-    .kaung1 {
-        float: right;
-        margin-top: 2%;
-        cursor: pointer;
-        padding: 2px 5px;
-        display: inline-block;
-        background: url("../assets/index/biankuang2.png");
-    }
-
-    .kaung2 {
-        float: right;
-        margin-top: 2%;
-        background: url("../assets/index/biankuang1.png");
-        padding: 2px 5px;
-        display: inline-block;
-        cursor: pointer;
     }
 
-
 </style>