一些简单的动态效果

src/views/dashboard/components/mapdata/mapchart.vue

@@ -58,7 +58,7 @@ let wuzi = [{
 
       axios.get(uploadedDataURL).then(geoJson => { 
       // fetch(uploadedDataURL, (geoJson) => {
-        console.log("数据："+JSON.stringify(geoJson.data))
+        // console.log("数据："+JSON.stringify(geoJson.data))
         //  that.$echarts.registerMap('chongq', geoJson);
         that.$echarts.registerMap('chongq', geoJson.data);
 

src/views/dashboard/components/misdata/yearbasis.vue

@@ -7,161 +7,189 @@
 
 <script>
 export default {
-  name: 'yearbasis',
+  name: "yearbasis",
   data() {
     return {
-      seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
-      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8]
-    }
-  },
-  components: {
-  },
-  created(){
+      seriesData1: [1, 2, 4, 5, 6, 2, 2, 9, 2, 11, 2, 5],
+      seriesData2: [4, 2, 4, 5, 4, 7, 5, 9, 2, 5, 4, 8],
+      isLine: true,
+      timer: "",
+    };
   },
+  components: {},
+  created() {},
   mounted() {
-    this.drawChart()
+    this.drawChart();
+    this.timer && clearInterval(this.timer);
+    this.timer = setInterval(this.drawChart, 3500);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
   },
   methods: {
     drawChart() {
-      const chartReady = this.$echarts.init(this.$refs.chart)
+      this.isLine = !this.isLine;
+      const chartReady = this.$echarts.init(this.$refs.chart);
       const options = {
         tooltip: {
-          trigger: 'axis',
-          axisPointer: {           
-              type: 'shadow'        
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
           },
-          formatter: '{b0}<br />{a0}: {c0} m³<br />{a1}: {c1} m³'
+          formatter: "{b0}<br />{a0}: {c0} m³<br />{a1}: {c1} m³",
         },
         grid: {
-          top:'15%',
-          left: '2%',
-          right: '2%',
-          bottom: '5%',
-          containLabel: true
+          top: "15%",
+          left: "2%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
-            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+            type: "category",
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
             boundaryGap: false,
             axisLine: {
               lineStyle: {
-                 color: "rgba(255, 255, 255, 0.24)"
-              }
+                color: "rgba(255, 255, 255, 0.24)",
+              },
             },
             axisLabel: {
-              color: '#A4D9F9'
-            }
-          }
+              color: "#A4D9F9",
+            },
+          },
         ],
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             axisLine: {
-              show:false,
+              show: false,
               lineStyle: {
-                color: "rgba(255, 255, 255, 0.24)"
-              }
+                color: "rgba(255, 255, 255, 0.24)",
+              },
             },
-            splitLine:{
-              lineStyle:{
-                color: "rgba(255, 255, 255, 0.24)"
-              }
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255, 255, 255, 0.24)",
+              },
             },
             axisLabel: {
-              color: '#A4D9F9'
+              color: "#A4D9F9",
             },
-          }
+          },
         ],
-        color: ['#20AEFF','#D7CB69'],
+        color: ["#20AEFF", "#D7CB69"],
         legend: {
-          data: ['今年','去年'],
-          right:'0',
-          textStyle:{
-            color:'#A4D9F9'
-          }
+          data: ["今年", "去年"],
+          right: "0",
+          textStyle: {
+            color: "#A4D9F9",
+          },
         },
         series: [
           {
-            name: '今年',
-            type: 'bar',
+            name: "今年",
+            type: "bar",
             data: this.seriesData2,
             // smooth: true,
-            barWidth:'36%',
+            barWidth: "36%",
             itemStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#20AEFF' },
-                { offset: 0.5, color: '#148DF9' },
-                { offset: 1, color: '#0373F1' }
-              ])
+                { offset: 0, color: "#20AEFF" },
+                { offset: 0.5, color: "#148DF9" },
+                { offset: 1, color: "#0373F1" },
+              ]),
             },
           },
           {
-            name: '去年',
-            type: 'line',
+            name: "去年",
+            type: "line",
             data: this.seriesData1,
             smooth: true,
-          }
-        ]
+          },
+        ],
+      };
+      if(this.isLine){
+        options.series[0].type='line'
+        options.series[0].smooth=true
+      }else{
+        options.series[0].type='bar'
       }
-      chartReady.setOption(options)
+      // options.series.forEach((item) => {
+      //     item.type = this.isLine ? "bar" : "line";
+      // });
+      chartReady.setOption(options);
 
       //自定义缩放
       window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
+        if (chartReady) {
+          chartReady.resize();
         }
-      })
+      });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
- .yearbasis{
-    width: calc(100% - 16px);
-    height: calc(100% - 16px);
-    position: relative;
-    padding: 8px;
-    // border: 1px red solid;
+.yearbasis {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  position: relative;
+  padding: 8px;
+  // border: 1px red solid;
 
-    .title{
-      width: 150px;
-      height: 16px;
-      font-size: 16px;
-      font-weight: 400;
-      padding-left: 20px;
-      color: #22AFFF;
-      line-height: 16px;
-      text-shadow: 0px 4px 5px rgba(1, 18, 32, 0.7);
-      position:absolute;
-      // border: 1px red solid;
+  .title {
+    width: 150px;
+    height: 16px;
+    font-size: 16px;
+    font-weight: 400;
+    padding-left: 20px;
+    color: #22afff;
+    line-height: 16px;
+    text-shadow: 0px 4px 5px rgba(1, 18, 32, 0.7);
+    position: absolute;
+    // border: 1px red solid;
 
-      &::after {
-        content: '';
-          // height: 2px;
-          // background-color: #fe0000;
-          // // width: 50px;
-          // position: absolute;
-          // bottom: 0;
-          // left: 0px;
-          // right: 0px;
-          content:"";
-          width: 14px;
-          height: 14px;
-          background: #28ACFF;
-          box-shadow: 0px 5px 5px 0px rgba(0, 9, 16, 0.76);
-          position:absolute;
-          top:0;
-          left:0;
-          transform: rotateZ(45deg);
-      }
+    &::after {
+      content: "";
+      // height: 2px;
+      // background-color: #fe0000;
+      // // width: 50px;
+      // position: absolute;
+      // bottom: 0;
+      // left: 0px;
+      // right: 0px;
+      content: "";
+      width: 14px;
+      height: 14px;
+      background: #28acff;
+      box-shadow: 0px 5px 5px 0px rgba(0, 9, 16, 0.76);
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: rotateZ(45deg);
     }
+  }
 
-    .line{
-      width: 100%;
-      height: 100%;
-      // border: 1px red solid;
-    }
+  .line {
+    width: 100%;
+    height: 100%;
+    // border: 1px red solid;
   }
+}
 </style>

src/views/dashboard/components/pipenets/pipeInspection.vue

@@ -31,7 +31,8 @@ export default {
   data() {
     return {
       seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
-      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8]
+      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8],
+      timer:''
     }
   },
   components: {
@@ -41,6 +42,9 @@ export default {
   mounted() {
     this.drawChart()
   },
+  beforeDestroy(){
+    clearInterval(this.timer)
+  },
   methods: {
     drawChart() {
       const chartReady = this.$echarts.init(this.$refs.chart)
@@ -144,8 +148,12 @@ var leftCenter = ['50%', '50%'],
           
         ]
     };
-
       chartReady.setOption(options)
+      this.timer=setInterval(()=>{
+        chartReady.clear();
+        chartReady.setOption(options)
+      },3000)
+      
 
       //自定义缩放
       window.addEventListener("resize", () => {

src/views/dashboard/components/pipenets/pipelength.vue

@@ -13,7 +13,8 @@ export default {
   name: 'pipelength',
   data() {
     return {
-      seriesData1:[9,2,22,2,5]
+      seriesData1:[9,2,22,2,5],
+      timer:''
     }
   },
   components: {
@@ -24,6 +25,9 @@ export default {
     this.drawChart()
     this.drawPieChart()
   },
+  beforeDestroy(){
+    clearInterval(this.timer)
+  },
   methods: {
     drawChart() {
       const chartReady = this.$echarts.init(this.$refs.chartLine)
@@ -126,6 +130,10 @@ export default {
         ]
       };
       chartPieReady.setOption(options)
+      this.timer=setInterval(()=>{
+        chartPieReady.clear();
+        chartPieReady.setOption(options)
+      },3000)
 
       //自定义缩放
       window.addEventListener("resize", () => {

src/views/dashboard/components/scadadata/waterLine.vue

@@ -12,7 +12,9 @@ export default {
   data() {
     return {
       seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
-      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8]
+      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8],
+      isLine: true,
+      timer: "",
     }
   },
   components: {
@@ -20,10 +22,16 @@ export default {
   created(){
   },
   mounted() {
-    this.drawChart()
+    this.drawChart();
+    this.timer && clearInterval(this.timer);
+    this.timer = setInterval(this.drawChart, 3500);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
   },
   methods: {
     drawChart() {
+      this.isLine = !this.isLine;
       const chartReady = this.$echarts.init(this.$refs.chart)
       const options = {
         title: {
@@ -135,8 +143,11 @@ export default {
           }
         ]
       }
+      
+      options.series.forEach((item) => {
+          item.type=this.isLine?'bar':'line'
+      });
       chartReady.setOption(options)
-
       //自定义缩放
       window.addEventListener("resize", () => {
         if(chartReady){