修改自定义数据

src/api/board/getData.js

@@ -23,7 +23,7 @@ export function getSimulateData(query) {
     isMsg:true,
     url: '/base/customData/list',
     method: 'get',
-    params: {customType: 1, ...query}
+    params: query
   })
 }
 

src/api/board/mixData.js

@@ -8,8 +8,8 @@ let screenData = (e) => {
   }
 }
 
-export function mixData(params) {
+export function mixData(params,customType=1) {
-  getSimulateData({customCode: params?.e || ''}).then(val => {
+  getSimulateData({customCode: params?.e || '',customType}).then(val => {
     if (val && val.rows.length > 0 && val.rows[0].isFlag === 0) {
       let data = JSON.parse(val.rows[0].customData);
       (params?.f || (() => {

src/views/model/dataCentre.vue

@@ -81,11 +81,13 @@
 import Chart from "@/components/board/Chart";
 import chinaMap from "@/views/model/china2.json";
 import * as echarts from "echarts";
+import {mixData} from "@/api/board/mixData";
 
 let getDateIntervalFun = null
 let time1 = () => {
 }
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+let intervalFun = null
 export default {
   name: "Liner",
   components: {
@@ -165,142 +167,152 @@ export default {
         },
       ],
       time: '',
-      date: ''
+      date: '',
-    }
-  },
-  created() {
-    const getDate = () => {
-      let date = new Date()
-      let YYYY = date.getFullYear()
-      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
-      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
-      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
-      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
-      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
-      this.date = `${YYYY} - ${MM} - ${dd}`
-      this.time = `${HH} : ${mm} : ${ss}`
-    }
-    getDate()
-    getDateIntervalFun = setInterval(getDate, 1000)
-  },
-  mounted() {
-    let points = [
-      {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
-      {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
-      {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
-      {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
-      {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
-      {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
-      {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
-      {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
-      {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
-      {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
-      {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
-      {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
-      {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
-      {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
-      {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
-      {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
-      {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
-      {value: [115.179594, 34.647758]},
-    ];
 
 
-    let plantCap = [
+
-      {
+      RequestDataSet: [
-        name: "外观时尚",
+        {
-        value: "24231",
+          e: 'data-01',
+          t: 4,
+          f: (e) => {
+            let data = {
+              yNameOne: [],
+              yData: []
+            }
+            e.forEach((i, k) => {
+              data.yNameOne.push(i.COLUMN_A)
+              data.yData.push(i.COLUMN_B)
+            })
+            const chart1Option = (data, id) => {
+              clearInterval(time1)
+              let bgBar = []
+              data.yData.forEach(() => {
+                bgBar.push(100)
+              })
+              let option = {
+                grid: {
+                  left: "0%",
+                  right: "15%",
+                  bottom: "0%",
+                  top: "0%",
+                  containLabel: true,
                 },
-      {
+                dataZoom: [],
-        name: "低碳环保",
+                xAxis: {
-        value: "36232",
+                  show: false,
                 },
+                yAxis: [
                   {
-        name: "高端智能",
+                    show: true,
-        value: "45423",
+                    data: data.yNameOne,
+                    inverse: true,
+                    axisLine: {
+                      show: false,
                     },
-      {
+                    splitLine: {
-        name: "老品牌",
+                      show: false,
-        value: "24542",
                     },
-    ];
+                    axisTick: {
-
+                      show: false,
-    let datalist = [
-      {
-        offset: [56, 48],
-        symbolSize: 120,
-        opacity: 0.95,
-        color: "#f467ce",
                     },
-      {
+                    axisLabel: {
-        offset: [35, 80],
+                      color: "#fff",
-        symbolSize: 95,
+                      // margin:150,
-        opacity: 0.88,
+                      fontSize: 0.75 * vw,
-        color: "#7aabe2",
+                      textStyle: {
+                        textAlign: 'center'
                       },
-      {
-        offset: [20, 43],
-        symbolSize: 90,
-        opacity: 0.84,
-        color: "#ff7123",
                     },
-      {
-        offset: [83, 30],
-        symbolSize: 90,
-        opacity: 0.8,
-        color: "#ffc400",
                   },
+                ],
+                series: [
                   {
-        offset: [36, 20],
+                    name: "条",
-        symbolSize: 65,
+                    type: "bar",
-        opacity: 0.75,
+                    yAxisIndex: 0,
-        color: "#5e333f",
+                    data: data.yData,
+                    barWidth: '80%',
+                    itemStyle: {
+                      normal: {
+                        barBorderRadius: 30,
+                        color: function (params) {
+                          return 'green'
                         },
-      {
-        offset: [64, 10],
-        symbolSize: 70,
-        opacity: 0.7,
-        color: "#6b3442",
                       },
-      {
-        offset: [75, 75],
-        symbolSize: 60,
-        opacity: 0.68,
-        color: "#8a3647",
                     },
-      {
-        offset: [88, 62],
-        symbolSize: 50,
-        opacity: 0.6,
-        color: "#68333f",
                   },
-    ];
+                  {
-    let datas = [];
+                    name: "框",
-    for (var i = 0; i < plantCap.length; i++) {
+                    type: "bar",
-      var item = plantCap[i];
+                    yAxisIndex: 0,
-      var itemToStyle = datalist[i];
+                    barGap: "-100%",
-      datas.push({
+                    data: bgBar,
-        name: item.value + "\n" + item.name,
+                    barWidth: '80%',
-        value: itemToStyle.offset,
-        symbolSize: itemToStyle.symbolSize,
                     label: {
-          normal: {
+                      show: true,
+                      position: "right",
                       textStyle: {
-              fontSize: 11,
+                        color: "#fff",
-            },
+                        fontSize: 0.75 * vw
                       },
+                      formatter: function (val, index, e) {
+                        return data.yData[val.dataIndex] + '%'
+                      }
                     },
                     itemStyle: {
                       normal: {
-            color: itemToStyle.color,
+                        color: "none",
-            opacity: itemToStyle.opacity,
+                        borderColor: "#00c1de",
+                        borderWidth: 1,
+                        barBorderRadius: 15,
                       },
                     },
-      });
+                  },
+                ],
+              };
+
+              if (data.yNameOne.length > 8) {
+                option.dataZoom.push({
+                  show: false,
+                  type: 'slider',
+                  bottom: '0%',
+                  yAxisIndex: 0,
+                  height: 12,
+                  start: 0,
+                  end: 1 / (data.yNameOne.length / 9) * 100,
+                  textStyle: {
+                    fontSize: 0,
+                    color: 'rgba(0,0,0,0)'
                   }
+                })
+
+                let step = 1 / (data.yNameOne.length / 9) * 100
+                time1 = setInterval(() => {
+                  option.dataZoom[0].end += step
+                  option.dataZoom[0].start += step
+                  if (option.dataZoom[0].start >= 100) {
+                    option.dataZoom[0].start = 0
+                    option.dataZoom[0].end = step
+                  }
+                  if (option.dataZoom[0].end >= 100) {
+                    option.dataZoom[0].end = 100
+                    option.dataZoom[0].start = option.dataZoom[0].end - step
+                  }
+                  this.$refs.chart1 && this.$refs.chart1.setData(option);
+                }, 6000)
+                // time()
+              }
+              return option
+            }
+            this.$refs.chart1 && this.$refs.chart1.setData(chart1Option(data));
+          }
+        },
+        {
+          e: 'data-02',
+          t: 4,
+          f: (e) => {
 
-    echarts.registerMap('china', chinaMap);
-    this.$refs.chart1 && this.$refs.chart1.setData(this.chart1Option());
             this.$refs.chart4.setData({
               tooltip: {},
               grid: {
@@ -340,7 +352,7 @@ export default {
                   axisTick: {
                     show: false,
                   },
-          data: ["预装检漏", "发泡质检", "电检", "低压捡漏", "高压捡漏", "制冷性能"],
+                  data: e.map(v => v.COLUMN_A),
                 },
               ],
               yAxis: [
@@ -416,7 +428,7 @@ export default {
                       color: '#72b3fe'
                     },
                   },
-          data: [315, 309, 311, 311, 311, 313],
+                  data: e.map(v => v.COLUMN_B),
                 },
                 {
                   name: "合格率",
@@ -450,10 +462,16 @@ export default {
                   tooltip: {
                     show: false,
                   },
-          data: [99.74, 99.68, 99.76, 99.75, 99.58, 99.57, 99.43],
+                  data: e.map(v => v.COLUMN_C),
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-03',
+          t: 4,
+          f: (e) => {
             this.$refs.chart5.setData({
               tooltip: {},
               grid: {
@@ -492,7 +510,7 @@ export default {
                   axisTick: {
                     show: false,
                   },
-          data: ["1-10", "1-11", "1-12", "1-13", "1-14", "1-15", "1-16"],
+                  data: e.map(v => v.COLUMN_A),
                 },
               ],
               yAxis: [
@@ -568,7 +586,7 @@ export default {
                       color: '#9fe080'
                     },
                   },
-          data: [200, 350, 400, 350, 450, 500, 343],
+                  data: e.map(v => v.COLUMN_B),
                 },
                 {
                   name: "订单履约率",
@@ -602,10 +620,37 @@ export default {
                   tooltip: {
                     show: false,
                   },
-          data: [100, 100, 100, 100, 100, 100, 46],
+                  data: e.map(v => v.COLUMN_C),
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-04',
+          t: 4,
+          f: (e) => {
+            console.log(e)
+            let points = [
+              {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
+              {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
+              {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
+              {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
+              {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
+              {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
+              {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
+              {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
+              {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
+              {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
+              {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
+              {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
+              {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
+              {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
+              {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
+              {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
+              {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
+              {value: [115.179594, 34.647758]},
+            ];
             this.$refs.chart6.setData({
 
               geo: {
@@ -883,6 +928,104 @@ export default {
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-05',
+          t: 4,
+          f: (e) => {
+            let plantCap = [
+              {
+                name: "外观时尚",
+                value: "24231",
+              },
+              {
+                name: "低碳环保",
+                value: "36232",
+              },
+              {
+                name: "高端智能",
+                value: "45423",
+              },
+              {
+                name: "老品牌",
+                value: "24542",
+              },
+            ];
+
+            let datalist = [
+              {
+                offset: [56, 48],
+                symbolSize: 120,
+                opacity: 0.95,
+                color: "#f467ce",
+              },
+              {
+                offset: [35, 80],
+                symbolSize: 95,
+                opacity: 0.88,
+                color: "#7aabe2",
+              },
+              {
+                offset: [20, 43],
+                symbolSize: 90,
+                opacity: 0.84,
+                color: "#ff7123",
+              },
+              {
+                offset: [83, 30],
+                symbolSize: 90,
+                opacity: 0.8,
+                color: "#ffc400",
+              },
+              {
+                offset: [36, 20],
+                symbolSize: 65,
+                opacity: 0.75,
+                color: "#5e333f",
+              },
+              {
+                offset: [64, 10],
+                symbolSize: 70,
+                opacity: 0.7,
+                color: "#6b3442",
+              },
+              {
+                offset: [75, 75],
+                symbolSize: 60,
+                opacity: 0.68,
+                color: "#8a3647",
+              },
+              {
+                offset: [88, 62],
+                symbolSize: 50,
+                opacity: 0.6,
+                color: "#68333f",
+              },
+            ];
+            let datas = [];
+            for (var i = 0; i < plantCap.length; i++) {
+              var item = plantCap[i];
+              var itemToStyle = datalist[i];
+              datas.push({
+                name: item.value + "\n" + item.name,
+                value: itemToStyle.offset,
+                symbolSize: itemToStyle.symbolSize,
+                label: {
+                  normal: {
+                    textStyle: {
+                      fontSize: 11,
+                    },
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: itemToStyle.color,
+                    opacity: itemToStyle.opacity,
+                  },
+                },
+              });
+            }
             this.$refs.chart7.setData({
               grid: {
                 show: false,
@@ -934,6 +1077,13 @@ export default {
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-06',
+          t: 4,
+          f: (e) => {
+
             this.$refs.chart8.setData({
               tooltip: {
                 trigger: "item",
@@ -1020,51 +1170,17 @@ export default {
                       show: false,
                     },
                   },
-          data:[
+                  data: e
-            {
-              name: "干燥过滤器",
-              value: 1
-            },
-            {
-              name: "压机室外观",
-              value: 1
-            },
-            {
-              name: "箱体外观",
-              value: 3
-            },
-            {
-              name: "集液管",
-              value: 2
-            },
-            {
-              name: "A内胆外观",
-              value: 1
-            },
-            {
-              name: "毛细管",
-              value: 1
-            },
-            {
-              name: "封口",
-              value: 1
-            },
-            {
-              name: "集液管漏",
-              value: 1
-            },
-            {
-              name: "蒸发器缠绕圈数错",
-              value: 1
-            },
-            {
-              name: "少全铜管标",
-              value: 1
-            }
-          ]
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-07',
+          t: 4,
+          f: (e) => {
+
             this.$refs.chart9.setData({
               tooltip: {
                 textStyle: {
@@ -1079,7 +1195,7 @@ export default {
                 containLabel: true,
               },
               xAxis: {
-        data: ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
+                data: e.map(v=>v.COLUMN_A),
                 axisLine: {
                   lineStyle: {
                     color: "#0177d4",
@@ -1145,10 +1261,16 @@ export default {
                       ),
                     },
                   },
-          data: [40631, 71777, 23375, 29402, 32359, 35070, 40360, 52643, 50001, 44100, 54000, 27555,],
+                  data: e.map(v=>v.COLUMN_B),
                 }
               ],
             })
+          }
+        },
+        {
+          e: 'data-08',
+          t: 4,
+          f: (e) => {
             this.$refs.chart10_1.setData({
               series: [
                 {
@@ -1171,7 +1293,7 @@ export default {
                   center: ["50%", "50%"],
                   data: [
                     {
-              value: 102,
+                      value: e?.[0]?.COLUMN_B,
                       label: {
                         normal: {
                           rich: {
@@ -1192,7 +1314,7 @@ export default {
                               "{a|" +
                               params.value +
                               "}" +
-                      "\n{b|在网数量}"
+                              "\n{b|"+ e?.[0]?.COLUMN_A+"}"
                             );
                           },
                           position: "center",
@@ -1250,7 +1372,7 @@ export default {
                   center: ["50%", "50%"],
                   data: [
                     {
-              value: 5.5,
+                      value: e?.[1]?.COLUMN_B,
                       label: {
                         normal: {
                           rich: {
@@ -1271,7 +1393,7 @@ export default {
                               "{a|" +
                               params.value +
                               "}" +
-                      "\n{b|单台能耗}"
+                              "\n{b|"+ e?.[1]?.COLUMN_A+"}"
                             );
                           },
                           position: "center",
@@ -1329,7 +1451,7 @@ export default {
                   center: ["50%", "50%"],
                   data: [
                     {
-              value: 78,
+                      value: e?.[2]?.COLUMN_B,
                       label: {
                         normal: {
                           rich: {
@@ -1350,7 +1472,7 @@ export default {
                               "{a|" +
                               params.value +
                               "%}" +
-                      "\n{b|产线OEE}"
+                              "\n{b|"+ e?.[2]?.COLUMN_A+"}"
                             );
                           },
                           position: "center",
@@ -1386,6 +1508,12 @@ export default {
                 },
               ],
             })
+          }
+        },
+        {
+          e: 'data-09',
+          t: 4,
+          f: (e) => {
             this.$refs.chart11.setData({
               grid: {
                 top: "20%",
@@ -1421,7 +1549,7 @@ export default {
                       color: "#F1F1F3",
                     },
                   },
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                  data: e.map(v=>v.COLUMN_A),
                 }
               ],
               yAxis: [
@@ -1471,7 +1599,7 @@ export default {
                       fontSize: 0.6 * vw
                     },
                   },
-          data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                  data: e.map(v=>v.COLUMN_B),
                 },
                 {
                   name: '闭环数',
@@ -1503,10 +1631,16 @@ export default {
                       color: true ? '#9ce375' : "#4FD3B9",
                     },
                   },
-          data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                  data: e.map(v=>v.COLUMN_C),
                 },
               ]
             })
+          }
+        },
+        {
+          e: 'data-10',
+          t: 4,
+          f: (e) => {
             this.$refs.chart12.setData({
               tooltip: {},
               grid: {
@@ -1547,7 +1681,7 @@ export default {
                   axisTick: {
                     show: false,
                   },
-          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                  data: e.map(v=>v.COLUMN_A),
                 },
               ],
               yAxis: [
@@ -1609,7 +1743,7 @@ export default {
                   tooltip: {
                     show: false,
                   },
-          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
+                  data: e.map(v=>v.COLUMN_B),
                 },
                 {
                   name: "目标市场不良率",
@@ -1642,149 +1776,195 @@ export default {
                   tooltip: {
                     show: false,
                   },
-          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
+                  data: e.map(v=>v.COLUMN_C),
                 },
               ],
             })
+          }
         },
-  methods: {
+      ]
-    exitFun() {
-      this.exit()
-    },
-    chart1Option(data, id) {
-      clearInterval(time1)
-      if (!data) {
-        data = {
-
-          yNameOne: ["11244726", "11244725", "11244695", "11244639", "11244635", "11244634", "11244633", "11244632", "11244311", "11244310"],
-          yData: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
-          xDataName: "达成率",
-          status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
     }
+  },
+  created() {
+    const getDate = () => {
+      let date = new Date()
+      let YYYY = date.getFullYear()
+      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
+      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
+      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
+      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
+      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
+      this.date = `${YYYY} - ${MM} - ${dd}`
+      this.time = `${HH} : ${mm} : ${ss}`
     }
-      let bgBar = []
+    getDate()
-      data.yData.forEach(() => {
+    getDateIntervalFun = setInterval(getDate, 1000)
-        bgBar.push(100)
+  },
+  mounted() {
+
+    this.RequestDataSet.forEach(val => {
+      mixData(val, 2)
     })
-      let option = {
+    intervalFun = setInterval(() => {
+      this.RequestDataSet.forEach(val => {
+        mixData(val, 2)
+      })
+    }, 1000 * 10)
+
+
+
+    echarts.registerMap('china', chinaMap);
+    this.$refs.chart12.setData({
+      tooltip: {},
       grid: {
-          // left: "-10%",
+        top: "25%",
-          left: "0%",
+        left: "5%",
-          right: "15%",
+        right: "1%",
-          bottom: "0%",
+        bottom: "8%",
-          top: "0%",
         containLabel: true,
       },
-        dataZoom: [],
+      legend: {
-        xAxis: {
+        itemGap: 50,
-          show: false,
+        top: "3%",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#f9f9f9",
+          borderColor: "#fff",
         },
-        yAxis: [
+      },
+      xAxis: [
         {
-            show: true,
+          type: "category",
-            data: data.yNameOne,
+          boundaryGap: true,
-            inverse: true,
           axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: "#f9f9f9",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+              fontSize: 0.4 * vw,
+            },
+          },
+          axisTick: {
             show: false,
           },
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+      ],
+      yAxis: [
+        {
+          name: '不良率',
+          type: "value",
+          min: 0,
           splitLine: {
-              show: false,
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
             },
-            axisTick: {
+          },
+          axisLine: {
             show: false,
           },
           axisLabel: {
-              color: "#fff",
+            margin: 5,
-              // margin:150,
-              fontSize: 0.75 * vw,
             textStyle: {
-                textAlign: 'center'
+              color: "#d1e6eb",
+            },
+            fontSize: 0.4 * vw,
+            formatter: '{value}%'
           },
+          axisTick: {
+            show: false,
           },
         },
       ],
       series: [
         {
-            name: "条",
+          name: "当年市场不良率",
-            type: "bar",
+          type: "line",
-            yAxisIndex: 0,
+          // smooth: true, //是否平滑曲线显示
-            data: data.yData,
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-            barWidth: '80%',
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#e8f1ff", // 线条颜色
+            },
+            borderColor: "#28ffb3",
+          },
+          label: {
+            show: true,
+            position: "bottom",
+            fontSize: 0.4 * vw,
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: '{c}%'
+          },
           itemStyle: {
             normal: {
-                barBorderRadius: 30,
+              color: "#28ffb3",
-                color: function (params) {
-                  return 'green'
             },
           },
+          tooltip: {
+            show: false,
           },
+          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
         },
         {
-            name: "框",
+          name: "目标市场不良率",
-            type: "bar",
+          type: "line",
-            yAxisIndex: 0,
+          // smooth: true, //是否平滑曲线显示
-            barGap: "-100%",
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-            data: bgBar,
+          showAllSymbol: true,
-            barWidth: '80%',
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#4268aa", // 线条颜色
+            },
+            borderColor: "#ecf3ff",
+          },
           label: {
             show: true,
-              position: "right",
+            position: "top",
+            fontSize: 0.4 * vw,
             textStyle: {
               color: "#fff",
-                fontSize: 0.75 * vw
             },
-              formatter: function (val, index, e) {
+            formatter: '{c}%'
-                return data.yData[val.dataIndex] + '%'
-              }
           },
           itemStyle: {
             normal: {
-                color: "none",
+              color: "#28ffb3",
-                borderColor: "#00c1de",
-                borderWidth: 1,
-                barBorderRadius: 15,
             },
           },
+          tooltip: {
+            show: false,
+          },
+          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
         },
       ],
-      };
-
-      if (data.yNameOne.length > 8) {
-        option.dataZoom.push({
-          show: false,
-          type: 'slider',
-          bottom: '0%',
-          yAxisIndex: 0,
-          height: 12,
-          start: 0,
-          end: 1 / (data.yNameOne.length / 9) * 100,
-          textStyle: {
-            fontSize: 0,
-            color: 'rgba(0,0,0,0)'
-          }
     })
-
+  },
-        let step = 1 / (data.yNameOne.length / 9) * 100
+  methods: {
-        time1 = setInterval(() => {
+    exitFun() {
-          option.dataZoom[0].end += step
+      this.exit()
-          option.dataZoom[0].start += step
+    },
-          if (option.dataZoom[0].start >= 100) {
-            option.dataZoom[0].start = 0
-            option.dataZoom[0].end = step
-          }
-          if (option.dataZoom[0].end >= 100) {
-            option.dataZoom[0].end = 100
-            option.dataZoom[0].start = option.dataZoom[0].end - step
-          }
-          this.$refs.chart1 && this.$refs.chart1.setData(option);
-        }, 6000)
-        // time()
-      }
-      return option
-    }
   },
   beforeDestroy() {
     getDateIntervalFun = null
+    if (intervalFun) {
+      clearInterval(intervalFun)
+      intervalFun = null
+    }
   }
 }
 </script>