动态效果

zhsq_qk-ui/src/store/index.js

@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import common from './modules/common'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    common
   },
   getters
 })

zhsq_qk-ui/src/store/modules/common.js

@@ -0,0 +1,21 @@
+const state = {
+    echarts_baseStreamer : 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+
+}
+
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}
+  

zhsq_qk-ui/src/views/fusion/jczl.vue

@@ -928,7 +928,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [15,2],
-              symbol:'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol:this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff' //流光颜色
             },
@@ -1037,7 +1037,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [15,2],
-              symbol:'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol:this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff' //流光颜色
             },

zhsq_qk-ui/src/views/fusion/jtzl.vue

@@ -331,7 +331,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [20, 2],
-              symbol: 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol: this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff'   //流光颜色
             },

zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -330,7 +330,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [20, 2],
-              symbol: 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol: this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff'   //流光颜色
             },

zhsq_qk-ui/src/views/fusion/yshj.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="map">
       <!--            <img src="@/assets/images/qkq_mapbg.png"/>-->
-<!--      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"-->
-<!--                :yxtSltProps="sltProps"></supermap>-->
+      <!--      <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"-->
+      <!--                :yxtSltProps="sltProps"></supermap>-->
       <qkmap ref="qkmap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"></qkmap>
     </div>
     <!-- 阴影背景 -->
@@ -13,10 +13,10 @@
     <!--头部开始-->
     <div class="header">
       <h1>城市运行一网统管指挥中心</h1>
-<!--      <div class="map_tab_zw">-->
-<!--        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>-->
-<!--        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>-->
-<!--      </div>-->
+      <!--      <div class="map_tab_zw">-->
+      <!--        <button @click="sltHandle" :class="{ 'on': btnOne }">矢量图</button>-->
+      <!--        <button @click="yxtHandle" :class="{ 'on': btnTwo }">影像图</button>-->
+      <!--      </div>-->
     </div>
     <!--头部结束-->
     <!-- 中间开始 -->
@@ -190,7 +190,7 @@ import qkmap from "@/views/supermap/qkmap";
 
 export default {
   name: "yshj",
-  components: {supermap,qkmap},
+  components: {supermap, qkmap},
   data() {
     return {
       sltProps: null,
@@ -342,7 +342,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [20, 2],
-              symbol: 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol: this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff'   //流光颜色
             },
@@ -368,7 +368,7 @@ export default {
           },
         ]
       };
-        myChart.setOption(option);
+      myChart.setOption(option);
     },
 
     trend() {
@@ -679,23 +679,51 @@ export default {
             data: datas.map(item => item.value)
           }
         ],
-        series: [{
-          name: '值',
-          type: 'bar',
-          zlevel: 1,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5,
-              color: '#3196fa',
+        series: [
+          {
+            name: '值',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: '#3196fa',
+              },
+              emphasis: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
             },
-            emphasis: {
-              shadowBlur: 10,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
+            barWidth: 10,
+            data: datas
+          },
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: datas.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item.value, index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15, 2],
+              symbol: this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
           },
-          barWidth: 10,
-          data: datas
-        },
           {
             name: '背景',
             type: 'bar',
@@ -741,47 +769,47 @@ export default {
     },
     matterTop() {
       var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
-      var datas = [{
-        "value": 0,
-        "name": "民办学校的举办.."
-      },
+      var datas = [
+        {
+          "value": 85,
+          "name": "民办学校的举办.."
+        },
         {
-          "value": 0,
+          "value": 84,
           "name": "失业登记.."
         },
         {
-          "value": 0,
+          "value": 58,
           "name": "民办学校的终止.."
         },
         {
-          "value": 0,
+          "value": 70,
           "name": "医师执业注册(.."
         },
         {
-          "value": 0,
+          "value": 44,
           "name": "一孩、二孩、三孩.."
         },
         {
-          "value": 0,
+          "value": 74,
           "name": "药品零售企业许.."
         },
         {
-          "value": 0,
+          "value": 76,
           "name": "护士执业注册"
         },
         {
-          "value": 0,
+          "value": 90,
           "name": "残疾人证新办"
         },
         {
-          "value": 0,
+          "value": 71,
           "name": "医疗广告审查"
         },
         {
-          "value": 0,
+          "value": 47,
           "name": "变更施工单位项.."
         },
-
       ]
       var maxArr = (new Array(datas.length)).fill(100);
       let option = {
@@ -805,89 +833,120 @@ export default {
           show: false,
           type: 'value'
         },
-        yAxis: [{
-          type: 'category',
-          inverse: true,
-          axisLabel: {
-            show: true,
-            align: 'right',
-            textStyle: {
-              fontSize: 14,
-              color: '#ffffff',
-              rich: {
-                index: {
-                  color: '#9d9d9d',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index1: {
-                  color: '#f8777b',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index2: {
-                  color: '#ffa145',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                index3: {
-                  color: '#6ade8d',
-                  fontWeight: 'bold',
-                  fontStyle: 'italic'
-                },
-                name: {
-                  width: 7 * 14,
-                  align: 'left',
-                  textAlign: 'left'
+        yAxis: [
+          {
+            type: 'category',
+            inverse: true,
+            axisLabel: {
+              show: true,
+              align: 'right',
+              textStyle: {
+                fontSize: 14,
+                color: '#ffffff',
+                rich: {
+                  index: {
+                    color: '#9d9d9d',
+                    fontWeight: 'bold',
+                    fontStyle: 'italic'
+                  },
+                  index1: {
+                    color: '#f8777b',
+                    fontWeight: 'bold',
+                    fontStyle: 'italic'
+                  },
+                  index2: {
+                    color: '#ffa145',
+                    fontWeight: 'bold',
+                    fontStyle: 'italic'
+                  },
+                  index3: {
+                    color: '#6ade8d',
+                    fontWeight: 'bold',
+                    fontStyle: 'italic'
+                  },
+                  name: {
+                    width: 7 * 14,
+                    align: 'left',
+                    textAlign: 'left'
+                  }
                 }
+              },
+              formatter: (name) => {
+                var index = (datas.map(item => item.name)).indexOf(name) + 1;
+                return [
+                  '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+                  '{name|' + name + '}'
+                ].join(' ')
               }
             },
-            formatter: (name) => {
-              var index = (datas.map(item => item.name)).indexOf(name) + 1;
-              return [
-                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
-                '{name|' + name + '}'
-              ].join(' ')
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: datas.map(item => item.name)
           },
-          data: datas.map(item => item.name)
-        }, {
-          type: 'category',
-          inverse: true,
-          axisTick: 'none',
-          axisLine: 'none',
-          show: true,
-          axisLabel: {
-            textStyle: {
-              color: '#3196fa',
-              fontSize: '12'
+          {
+            type: 'category',
+            inverse: true,
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#3196fa',
+                fontSize: '12'
+              },
+              formatter: '{value}%'
             },
-            formatter: '{value}%'
+            data: datas.map(item => item.value)
+          }
+        ],
+        series: [
+          {
+            name: '值',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: '#3196fa',
+              },
+            },
+            barWidth: 10,
+            data: datas
           },
-          data: datas.map(item => item.value)
-        }],
-        series: [{
-          name: '值',
-          type: 'bar',
-          zlevel: 1,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5,
-              color: '#3196fa',
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: datas.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item.value , index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15,2],
+              symbol:this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
             },
+            z: 99
           },
-          barWidth: 10,
-          data: datas
-        },
           {
             name: '背景',
             type: 'bar',
@@ -907,28 +966,6 @@ export default {
       if (option) {
         myChart.setOption(option);
       }
-      // 设置定时器，每隔一段时间更新数据并重绘图表
-      setInterval(function () {
-        // 更新数据和名字，并重新渲染图表
-        datas.forEach(function (item) {
-          item.value = Math.floor(Math.random() * 100); // 随机生成新的值
-        });
-
-        myChart.setOption({
-          yAxis: [{
-            data: datas.map(item => item.name)
-          }, {
-            data: datas.map(item => item.value)
-          }],
-          series: [{
-            data: datas
-          },
-            {
-              data: maxArr
-            }
-          ]
-        });
-      }, 1000); // 每隔3秒钟更新一次数据
     },
     sxyql() {
       var myChart = echarts.init(document.getElementById('sxyql'));
@@ -1096,6 +1133,33 @@ export default {
             },
           },
           {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: data.map((item, index) => {
+              return {
+                coords: [
+                  [0, index],
+                  [item.value , index],
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 2.5,
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: [15,2],
+              symbol:this.$store.state.common.echarts_baseStreamer,
+              loop: true,
+              color: '#fff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 99
+          },
+          {
             name: '背景',
             type: 'bar',
             barWidth: 10,
@@ -1153,26 +1217,6 @@ export default {
           },
         ],
       };
-
-      // 更新数据并重新设置图表选项
-      function updateData() {
-        let newData = [];
-        for (var i = 0; i < data.length; i++) {
-          let object = {};
-          object.name = data[i].name;
-          object.value = Math.floor(Math.random() * 1000);
-          newData.push(object);
-        }
-        option.series[2].data = newData;
-        myChart.setOption(option);
-      }
-
-// 每隔一段时间更新数据
-      setInterval(function () {
-        updateData();
-      }, 1000);
-
-
       if (option) {
         myChart.setOption(option);
       }
@@ -1467,7 +1511,7 @@ export default {
     },
     bmyql() {
       var myChart = echarts.init(document.getElementById('bmyql'));
-      let data = ['xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门','xx部门']
+      let data = ['xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门', 'xx部门']
       let valueData = [];
       let labelData = []
       for (var i = 0; i < data.length; i++) {
@@ -1595,7 +1639,7 @@ export default {
               period: 2.5,
               trailLength: 0.5, //控制拖尾长度
               symbolSize: [10, 2],
-              symbol: 'path://M891.733333 554.666667H132.266667a4.266667 4.266667 0 0 1-4.266667-4.266667v-76.8a4.266667 4.266667 0 0 1 4.266667-4.266667h759.466666a4.266667 4.266667 0 0 1 4.266667 4.266667v76.8a4.266667 4.266667 0 0 1-4.266667 4.266667z',
+              symbol: this.$store.state.common.echarts_baseStreamer,
               loop: true,
               color: '#fff' //流光颜色
             },

zhsq_qk-ui/src/views/supermap/supermap.vue

@@ -107,7 +107,7 @@ export default {
         this.map_jilinShiLiang = window.L.supermap.tiledMapLayer(this.workspace_qk, {
           noWrap: true
         });
-        this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qkyxt + '/经开影像 ', {
+        this.map_qikaiYingXiang = window.L.supermap.tiledMapLayer(this.workspace_qkyxt, {
           noWrap: true
         });
         this.initSlt();