热门产品前端页面

klp-ui/src/views/wms/order/components/HotProducts.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="hot-products-chart">
-    <el-card shadow="hover">
-      <div v-if="!hotProducts || hotProducts.length === 0" class="no-data-placeholder">
-        暂无热门产品数据
-      </div>
-      <div v-show="hotProducts && hotProducts.length > 0" ref="chart" class="chart-container"></div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-
-export default {
-  name: 'HotProducts',
-  props: {
-    hotProducts: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      chartInstance: null
-    }
-  },
-  watch: {
-    hotProducts: {
-      deep: true,
-      handler(newVal) {
-        if (newVal && newVal.length > 0) {
-          this.$nextTick(() => {
-            this.renderChart(newVal)
-          })
-        }
-      }
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize)
-  },
-  beforeDestroy() {
-    if (this.chartInstance) {
-      this.chartInstance.dispose()
-      this.chartInstance = null
-    }
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    renderChart(data) {
-      const chartDom = this.$refs.chart
-      if (!chartDom) return
-
-      if (!this.chartInstance) {
-        this.chartInstance = echarts.init(chartDom)
-      }
-
-      this.chartInstance.resize()
-
-      const productNames = data.map(item => item.productName)
-      const visitCounts = data.map(item => item.visitCount)
-
-      const option = {
-        title: {
-          text: '热门产品排行（访问频率）',
-          left: 'center',
-          textStyle: {
-            color: '#333',
-            fontWeight: 'bold',
-            fontSize: 18
-          }
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          formatter: function(params) {
-            const data = params[0]
-            const rank = data.dataIndex + 1
-            return `${rank}. ${data.name}<br/>访问次数: ${data.value}次`
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: productNames,
-          axisLabel: {
-            interval: 0,
-            rotate: 30,
-            color: '#666'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            show: true
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed'
-            }
-          }
-        },
-        series: [
-          {
-            name: '访问次数',
-            type: 'bar',
-            data: visitCounts,
-            barWidth: '60%',
-            label: {
-              show: true,
-              position: 'top',
-              color: '#333',
-              formatter: function(params) {
-                return params.value + '次'
-              }
-            },
-            itemStyle: {
-              color: function(params) {
-                const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9']
-                return colors[params.dataIndex % colors.length]
-              }
-            }
-          }
-        ]
-      }
-
-      this.chartInstance.setOption(option)
-    },
-    handleResize() {
-      if (this.chartInstance) {
-        this.chartInstance.resize()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hot-products-chart {
-  height: 400px;
-}
-
-.chart-container {
-  height: 350px;
-}
-
-.no-data-placeholder {
-  height: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #999;
-  font-size: 14px;
-}
-</style>