echart动态

src/views/sensingDevice/components/carLarge.vue

@@ -9,9 +9,12 @@
     </div>
   </div>
 </template>
+<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script>
+<script src="./libs/tooltip-auto-show.js"></script>
 
 <script>
 import { vehicleTrafficStatistics } from '@/api/sensingDevice/resource'
+
 import * as echarts from 'echarts'
 export default {
   name: 'CarLarge',
@@ -38,6 +41,7 @@ export default {
     },
     init_charts() {
       console.log(123)
+      var tootipTimer = null
       var chartDom = document.getElementById('carMain')
       var myChart = echarts.init(chartDom)
       var option
@@ -123,6 +127,23 @@ export default {
       }
 
       option && myChart.setOption(option)
+      var faultByHourIndex = 0 //播放所在下标
+      var faultByHourTime = setInterval(function () {
+        //使得tootip每隔三秒自动显示
+        myChart.dispatchAction({
+          type: 'showTip', // 根据 tooltip 的配置项显示提示框。
+          seriesIndex: 0,
+          dataIndex: faultByHourIndex
+        })
+        faultByHourIndex++
+        // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
+        if (faultByHourIndex >= option.series[0].data.length) {
+          faultByHourIndex = 0
+        }
+        if (faultByHourIndex >= option.series[1].data.length) {
+          faultByHourIndex = 0
+        }
+      }, 3000)
     }
   }
 }

src/views/sensingDevice/components/peopleLarge.vue

@@ -9,7 +9,7 @@
     </div>
   </div>
 </template>
-
+<script src="path/to/echarts.js"></script>
 <script>
 import * as echarts from 'echarts'
 import { humanTrafficStatistics } from '@/api/sensingDevice/resource'
@@ -37,6 +37,7 @@ export default {
       this.list1 = Object.values(res.data)
     },
     //
+
     echarts_icon() {
       console.log('hza')
       var chartDom = document.getElementById('people_chart')
@@ -44,14 +45,11 @@ export default {
       var option
       option = {
         color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-
+        autoTooltip: true,
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'cross',
+            type: 'cross'
-            label: {
-              backgroundColor: '#6a7985'
-            }
           }
         },
 
@@ -72,8 +70,8 @@ export default {
               Interval: '0',
               textStyle: {
                 width: '1',
-                fontSize: '7',
+                fontSize: '7'
-                color: '#fff'
+                // color: '#fff'
               }
             }
           }
@@ -90,6 +88,7 @@ export default {
             }
           }
         ],
+
         series: [
           {
             name: '人流量',
@@ -122,6 +121,21 @@ export default {
       }
 
       option && myChart.setOption(option)
+      //动态
+      var faultByHourIndex = 0 //播放所在下标
+      var faultByHourTime = setInterval(function () {
+        //使得tootip每隔三秒自动显示
+        myChart.dispatchAction({
+          type: 'showTip', // 根据 tooltip 的配置项显示提示框。
+          seriesIndex: 0,
+          dataIndex: faultByHourIndex
+        })
+        faultByHourIndex++
+        // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
+        if (faultByHourIndex >= option.series[0].data.length) {
+          faultByHourIndex = 0
+        }
+      }, 3000)
     }
   }
 }

src/views/sensingDevice/utils/initEcharts.js

@@ -1,195 +0,0 @@
-// // * echarts 初始化方法
-// import * as echarts from 'echarts'
-// import EleResize from '@/utils/esresize'
-// export const init_echarts = () => {
-//   // * echarts 实例
-//   const myChart = echarts.init(document.getElementById('people_chart'))
-//   let resize_div = document.getElementById('people_chart')
-//   // *echarts表自适应
-//   EleResize.on(resize_div, () => {
-//     myChart.resize()
-//   })
-//   // * echarts 选项
-//   myChart.setOption({
-//     color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'],
-//     title: {
-//       // text: '标题'
-//     },
-//     tooitip: {
-//       trigger: 'axis',
-//       axisPointer: {
-//         type: 'cross',
-//         label: {
-//           backgroundColor: '#6a7985'
-//         }
-//       }
-//     },
-//     legend: {
-//       // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
-//     },
-//     toolbox: {
-//       feature: {
-//         saveAsImage: {}
-//       }
-//     },
-//     grid: {
-//       left: '3%',
-//       right: '4%',
-//       bottom: '3%',
-//       containLabel: true
-//     },
-//     xAxis: [
-//       {
-//         type: 'category',
-//         boundaryGap: false,
-//         data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02']
-//       }
-//     ],
-//     yAxis: [
-//       {
-//         type: 'value'
-//       }
-//     ],
-//     series: [
-//       {
-//         // name: 'Line 1',
-//         type: 'line',
-//         stack: 'Total',
-//         smooth: true,
-//         lineStyle: {
-//           width: 0
-//         },
-//         showSymbol: false,
-//         areaStyle: {
-//           opacity: 0.8,
-//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-//             {
-//               offset: 0,
-//               color: 'rgb(128, 255, 165)'
-//             },
-//             {
-//               offset: 1,
-//               color: 'rgb(1, 191, 236)'
-//             }
-//           ])
-//         },
-//         emphasis: {
-//           focus: 'series'
-//         },
-//         data: [140, 232, 101, 264, 90, 340, 250]
-//       },
-//       {
-//         // name: 'Line 2',
-//         type: 'line',
-//         stack: 'Total',
-//         smooth: true,
-//         lineStyle: {
-//           width: 0
-//         },
-//         showSymbol: false,
-//         areaStyle: {
-//           opacity: 0.8,
-//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-//             {
-//               offset: 0,
-//               color: 'rgb(0, 221, 255)'
-//             },
-//             {
-//               offset: 1,
-//               color: 'rgb(77, 119, 255)'
-//             }
-//           ])
-//         },
-//         emphasis: {
-//           focus: 'series'
-//         },
-//         data: [120, 282, 111, 234, 220, 340, 310]
-//       },
-//       {
-//         // name: 'Line 3',
-//         type: 'line',
-//         stack: 'Total',
-//         smooth: true,
-//         lineStyle: {
-//           width: 0
-//         },
-//         showSymbol: false,
-//         areaStyle: {
-//           opacity: 0.8,
-//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-//             {
-//               offset: 0,
-//               color: 'rgb(55, 162, 255)'
-//             },
-//             {
-//               offset: 1,
-//               color: 'rgb(116, 21, 219)'
-//             }
-//           ])
-//         },
-//         emphasis: {
-//           focus: 'series'
-//         },
-//         data: [320, 132, 201, 334, 190, 130, 220]
-//       },
-//       {
-//         // name: 'Line 4',
-//         type: 'line',
-//         stack: 'Total',
-//         smooth: true,
-//         lineStyle: {
-//           width: 0
-//         },
-//         showSymbol: false,
-//         areaStyle: {
-//           opacity: 0.8,
-//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-//             {
-//               offset: 0,
-//               color: 'rgb(255, 0, 135)'
-//             },
-//             {
-//               offset: 1,
-//               color: 'rgb(135, 0, 157)'
-//             }
-//           ])
-//         },
-//         emphasis: {
-//           focus: 'series'
-//         },
-//         data: [220, 402, 231, 134, 190, 230, 120]
-//       },
-//       {
-//         // name: 'Line 5',
-//         type: 'line',
-//         stack: 'Total',
-//         smooth: true,
-//         lineStyle: {
-//           width: 0
-//         },
-//         showSymbol: false,
-//         label: {
-//           show: true,
-//           position: 'top'
-//         },
-//         areaStyle: {
-//           opacity: 0.8,
-//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-//             {
-//               offset: 0,
-//               color: 'rgb(255, 191, 0)'
-//             },
-//             {
-//               offset: 1,
-//               color: 'rgb(224, 62, 76)'
-//             }
-//           ])
-//         },
-//         emphasis: {
-//           focus: 'series'
-//         },
-//         data: [220, 302, 181, 234, 210, 290, 150]
-//       }
-//     ]
-//   })
-// }