柱状图动态

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="map">
-<!--      <img src="@/assets/images/sprh-map.png"/>-->
+      <!--      <img src="@/assets/images/sprh-map.png"/>-->
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
                 :yxtSltProps="sltProps"></supermap>
     </div>
@@ -317,15 +317,15 @@ export default {
     regionTop() {
       //便民服务
       var myChart = echarts.init(document.getElementById('jczl-bmfw'));
-      let data = ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6']
       let valueData = [];
-      let labelData = []
-      for (var i = 0; i < data.length; i++) {
-        labelData.push(data[i]);
-        var lineNumber = Math.floor(Math.random() * 2000);
+      let labelData = [];
+      for (var i = 1; i <= 6; i++) {
+        labelData.push("类型" + i);
+        var lineNumber = Math.floor(Math.random() * 1000);
         valueData.push(lineNumber);
       }
       var option = {
+        "backgroundColor": "rgba(0, 0, 0, 0)",
         title: {
           show: true,
           text: '',
@@ -396,47 +396,56 @@ export default {
             },
           },
         },
-        series: [{
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(39, 234, 244, 1.0)'
-            }, {
-              offset: 1,
-              color: 'rgba(19, 102, 191, 1.0)'
-            }], false),
-            barBorderRadius: 8,
-            opacity: 0.8
-          },
-          barWidth: 14,
-          label: {
-            show: true,
-            position: ['0', '-12'],
-            color: '#fff',
+        // 切片
+        series: [
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: valueData.map((item, index) => {
+              return {
+                coords: [
+                  [index, 0],
+                  [index, item - 4]
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 3.5,// 周期 速度 2.5
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: 25, // ⭐⭐星星大小
+              symbol:
+                'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
+              loop: true,
+              color: '#ffffff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 999
           },
-          data: valueData,
-          type: 'bar',
-        }]
+          {
+            type: 'bar',
+            data: valueData,
+            barWidth: '20px',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                }], false),
+                barBorderRadius: [30, 30, 30, 30],
+                shadowColor: 'rgba(0,160,221,1)',
+                shadowBlur: 4,
+              }
+            },
+          }]
       };
-      var currentIndex = -1;
-      var timer = setInterval(function () {
-        // 生成新的随机数据
-        currentIndex++;
-        if (currentIndex >= 6) {
-          currentIndex = 0;
-          for (var i = 0; i < valueData.length; i++) {
-            valueData[i] = Math.floor(Math.random() * 800);
-          }
-        } else {
-          valueData[currentIndex] = Math.floor(Math.random() * 800);
-        }
-
-        // 更新 option 中的数据
-        option.series[0].data = valueData;
-
-        // 重新渲染图表
-        myChart.setOption(option);
-      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }
@@ -992,14 +1001,14 @@ export default {
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                 {
-                   offset: 0,
-                   color: 'rgba(28, 88, 177, 1.0)',
-                 },
-                 {
-                   offset: 1,
-                   color: 'rgba(17, 224, 255, 1.0)',
-                 },
+                  {
+                    offset: 0,
+                    color: 'rgba(28, 88, 177, 1.0)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(17, 224, 255, 1.0)',
+                  },
                 ]),
               },
             },

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

@@ -30,10 +30,10 @@
           <a class="on">单屏</a>
           <a>电视墙</a>
         </div>
-        <div class="clear"></div>
-		<form class="qkq_ss">
-			<input type="text" placeholder="请输入搜索词" class="inp_ss"/>
-			<input type="button" class="inp_btn" value="搜索"/>
+        <div class="clear"></div>
+		<form class="qkq_ss">
+			<input type="text" placeholder="请输入搜索词" class="inp_ss"/>
+			<input type="button" class="inp_btn" value="搜索"/>
 		</form>
         <div class="tab_cont">
           <div class="qkq_tdzy">
@@ -41,23 +41,23 @@
             <div class="selectDate">
               <span class="_selectData">锦程街道</span>
               <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
-              <div class="_moreMenu" v-if="dropdownVisible">
-				  
+              <div class="_moreMenu" v-if="dropdownVisible">
+
                 <ul>
                   <li class="change">东风街道</li>
                   <li>锦程街道</li>
-                </ul>
-			
+                </ul>
+
               </div>
             </div>
-          </div>
+          </div>
 		  <div class="scrollbar" style="height: 510px;">
-          <ul id="accordion" class="accordion">
+          <ul id="accordion" class="accordion">
 			  <!-- lx_on 离线      zx_on在线 -->
             <li v-for="(camera, index) in cameras" :key="index" class="lx_on">
               <div class="link">{{ camera.cameraName }}</div>
             </li>
-          </ul>
+          </ul>
 		  	</div>
         </div>
         <div class="tab_cont"></div>
@@ -625,10 +625,11 @@ export default {
       let labelData = []
       for (var i = 0; i < data.length; i++) {
         labelData.push(data[i]);
-        var lineNumber = Math.floor(Math.random() * 2000);
+        var lineNumber = Math.floor(Math.random() * 1000);
         valueData.push(lineNumber);
       }
       var option = {
+        "backgroundColor": "rgba(0, 0, 0, 0)",
         title: {
           show: true,
           text: '',
@@ -642,7 +643,7 @@ export default {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow'
+            type: 'shadow',
           }
         },
         grid: {
@@ -651,12 +652,12 @@ export default {
           right: '5%',
           buttom: '0',
         },
-        xAxis: {
+        xAxis: [{
           type: 'category',
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(255,255,255,0.12)',
-            },
+          data: labelData,
+          axisTick: {
+            show: false, //隐藏X轴刻度
+            alignWithLabel: true
           },
           axisLabel: {
             margin: 10,
@@ -665,11 +666,12 @@ export default {
               fontSize: 14
             },
           },
-          axisTick: {
-            show: false,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,0.12)',
+            },
           },
-          data: labelData
-        },
+        }],
         yAxis: {
           name: '',
           nameTextStyle: {
@@ -698,47 +700,56 @@ export default {
             },
           },
         },
-        series: [{
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(18, 215, 236, 1.0)'
-            }, {
-              offset: 1,
-              color: 'rgba(10, 58, 161, 1.0)'
-            }], false),
-            barBorderRadius: 8,
-            opacity: 0.8
-          },
-          barWidth: 14,
-          label: {
-            show: true,
-            position: ['0', '-12'],
-            color: '#fff',
+        // 切片
+        series: [
+          {
+            type: 'lines',
+            coordinateSystem: 'cartesian2d',
+            data: valueData.map((item, index) => {
+              return {
+                coords: [
+                  [index, 0],
+                  [index, item - 4]
+                ]
+              };
+            }),
+            effect: {
+              show: true,
+              period: 3.5,// 周期 速度 2.5
+              trailLength: 0.5, //控制拖尾长度
+              symbolSize: 25, // ⭐⭐星星大小
+              symbol:
+                'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
+              loop: true,
+              color: '#ffffff' //流光颜色
+            },
+            lineStyle: {
+              width: 0,
+              opacity: 0.6,
+              curveness: 0
+            },
+            z: 999
           },
-          data: valueData,
-          type: 'bar',
-        }]
+          {
+            type: 'bar',
+            data: valueData,
+            barWidth: '20px',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                }], false),
+                barBorderRadius: [30, 30, 30, 30],
+                shadowColor: 'rgba(0,160,221,1)',
+                shadowBlur: 4,
+              }
+            },
+          }]
       };
-      var currentIndex = -1;
-      var timer = setInterval(function () {
-        // 生成新的随机数据
-        currentIndex++;
-        if (currentIndex >= 2) {
-          currentIndex = 0;
-          for (var i = 0; i < valueData.length; i++) {
-            valueData[i] = Math.floor(Math.random() * 2000);
-          }
-        } else {
-          valueData[currentIndex] = Math.floor(Math.random() * 2000);
-        }
-
-        // 更新 option 中的数据
-        option.series[0].data = valueData;
-
-        // 重新渲染图表
-        myChart.setOption(option);
-      }, 1000); // 每秒更新一次数据
       if (option) {
         myChart.setOption(option);
       }