商城数据分析

src/views/mall-portrait/components/line-echarts.vue

@@ -96,7 +96,7 @@ export default {
         series: this.getSeriesData()
       }
       this.chart && this.chart.setOption(option)
-      this.chart && this.handleChartLineLoop(option, this.chart)
+      // this.chart && this.handleChartLineLoop(option, this.chart)
     },
     handleMouseOver(e, callback) {
       if (e) {

src/views/mall-portrait/components/pei-echarts.vue

@@ -3,7 +3,13 @@
     <div class="title">
       <slot name="title"></slot>
     </div>
-    <pie-echart :title="title" :show-emphasis="true" :option-data="optionData1" />
+    <pie-echart
+      :title="title"
+      :show-emphasis="true"
+      :option-data="optionData1"
+      :show-graphic="false"
+      :show-animate="true"
+    />
   </div>
 </template>
 
@@ -38,10 +44,8 @@ export default {
       immediate: true
     }
   },
-  mounted() {
-  },
-  methods: {
-  }
+  mounted() {},
+  methods: {}
 }
 </script>
 

src/views/mall-portrait/components/pie-echart.vue

@@ -55,6 +55,10 @@ export default {
     echartType: {
       type: Number,
       default: () => 1
+    },
+    showAnimate: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -145,7 +149,19 @@ export default {
       this.timeTicket = null
       this.chart = echarts.init(myEchart)
       this.chart && this.chart.setOption(this.c_options)
-      this.chart && this.handleChartPieLoop(this.c_options, this.chart, 'timeTicket', 'currentIndex', this.showTips)
+      this.showAnimate && this.chart && this.handleChartPieLoop(this.c_options, this.chart, 'timeTicket', 'currentIndex', this.showTips)
+    },
+    handleMouseOver(e, callback) {
+      if (e) {
+        const myEchart = this.$refs['echarts']
+        myEchart.addEventListener('mouseover', callback)
+      }
+    },
+    handleMouseOut(e, callback) {
+      if (e) {
+        const myEchart = this.$refs['echarts']
+        myEchart.addEventListener('mouseout', callback)
+      }
     }
   }
 }

src/views/mall-portrait/mixins/index.js

@@ -58,7 +58,7 @@ export default {
         highlightPie()
       }
 
-      this[pieTimeTicket] = setInterval(selectPie, 1500) // 设置自动切换高亮图形的定时器
+      this[pieTimeTicket] = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
 
       // 取消所有高亮并高亮当前图形
       const highlightPie = () => {
@@ -93,7 +93,18 @@ export default {
         if (this[pieTimeTicket]) {
           clearInterval(this[pieTimeTicket])
         }
-        this[pieTimeTicket] = setInterval(selectPie, 1500)
+        this[pieTimeTicket] = setInterval(selectPie, 2000)
+      })
+
+      this.handleMouseOver(myChart, () => {
+        clearInterval(this[pieTimeTicket])
+      })
+
+      this.handleMouseOut(myChart, () => {
+        if (this[pieTimeTicket]) {
+          clearInterval(this[pieTimeTicket])
+        }
+        this[pieTimeTicket] = setInterval(selectPie, 2000)
       })
     },
     /**