稳定提交

src/components/ECharts/index.vue

@@ -17,19 +17,28 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import * as echarts from 'echarts'
 import debounce from 'lodash/debounce'
 
-export default {
+// Props 定义
-  name: 'EChartsComponent',
+const props = defineProps({
-  props: {
+  // 图表数据
-    // 图表配置项
+  data: {
-    options: {
+    type: Array,
-      type: Object,
     required: true
   },
+  // 图表类型配置
+  config: {
+    type: Object,
+    default: () => ({})
+  },
+  // 标题
+  title: {
+    type: String,
+    default: ''
+  },
   // 图表主题
   theme: {
     type: String,
@@ -70,73 +79,167 @@ export default {
     type: String,
     default: 'line',
     validator: (value) => ['line', 'bar', 'pie', 'scatter'].includes(value)
-    }
   },
-  emits: ['chartReady', 'click', 'legendselectchanged'],
+  // tooltip 显示的系列名称数组，为空则显示全部
-  setup(props, { emit }) {
+  tooltipSeries: {
+    type: Array,
+    default: () => []
+  },
+  // 自定义 tooltip 格式化函数
+  tooltipFormatter: {
+    type: Function,
+    default: null
+  }
+})
+
+// Emits 定义
+const emit = defineEmits(['chartReady', 'click', 'legendselectchanged'])
+
 const chartRef = ref(null)
 let chartInstance = null
 
-    // 处理配置项
+// 默认配置
-    const processOptions = (options) => {
+const defaultConfig = {
-      const defaultOptions = {
+  xField: 'name',
+  series: [
+    {
+      name: '数值',
+      field: 'value',
+      type: 'bar'
+    }
+  ],
+  yAxis: [
+    {
+      name: '',
+      min: 0
+    }
+  ]
+}
+
+// 合并配置
+const mergedConfig = computed(() => ({
+  ...defaultConfig,
+  ...props.config
+}))
+
+// 生成图表配置
+const generateOptions = computed(() => {
+  if (!props.data?.length) return {}
+
+  const config = mergedConfig.value
+  const categories = props.data.map(item => item[config.xField])
+
+  // 处理系列数据
+  const series = config.series
+    .filter(s => s.show !== false)  // 过滤掉 show: false 的系列
+    .map(s => ({
+      name: s.name,
+      type: s.type,
+      yAxisIndex: s.yAxisIndex || 0,
+      data: props.data.map(item => item[s.field]),
+      color: s.color,
+      barMaxWidth: 50,
+      barGap: '30%',
+      itemStyle: {
+        color: s.color,
+        borderRadius: s.type === 'bar' ? [4, 4, 0, 0] : 0
+      },
+      label: s.showLabel ? {
+        show: true,
+        position: s.type === 'line' ? 'top' : 'inside',
+        formatter: s.labelFormatter || '{c}',
+        fontSize: 12,
+        color: s.type === 'line' ? s.color : '#fff'
+      } : undefined,
+      emphasis: {
+        focus: 'series'
+      }
+    }))
+
+  return {
+    title: props.title ? {
+      text: props.title
+    } : null,
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'cross'
+      },
+      formatter: (params) => {
+        // 找到原始配置中对应的系列配置
+        const validParams = params.filter(param => {
+          const seriesConfig = config.series.find(s => s.name === param.seriesName)
+          return seriesConfig && seriesConfig.tooltip?.show !== false
+        })
+
+        if (validParams.length === 0) return ''
+
+        let result = `${validParams[0].axisValue}<br/>`
+        validParams.forEach(param => {
+          // 找到对应的系列配置
+          const seriesConfig = config.series.find(s => s.name === param.seriesName)
+          // 提取 labelFormatter 中的单位
+          let unit = ''
+          if (seriesConfig?.labelFormatter) {
+            const match = seriesConfig.labelFormatter.match(/\{c\}(.+)/)
+            if (match) {
+              unit = match[1]
+            }
+          }
+          result += `${param.marker}${param.seriesName}: ${param.value}${unit}<br/>`
+        })
+
+        return result
       }
     },
+    legend: {
+      data: series.map(s => s.name)
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      axisLabel: {
+        interval: 0,
+        rotate: categories.length > 5 ? 30 : 0
+      }
+    },
+    yAxis: config.yAxis.map((axis, index) => ({
+      type: 'value',
+      name: axis.name,
+      min: axis.min,
+      max: axis.max,
+      position: index === 0 ? 'left' : 'right',
+      splitLine: {
+        show: index === 0
+      },
+      axisLabel: axis.axisLabel ? {
+        formatter: axis.axisLabel
+      } : undefined
+    })),
+    series,
     grid: {
-          right: '3%',
+      top: '15%',
-          left: '3%',
+      bottom: '15%',
-          bottom: '3%',
+      left: '10%',
-          top: '3%',
+      right: '10%',
       containLabel: true
-        },
-        animation: true,
-        animationDuration: props.animationDuration
-      }
-
-      // 处理折线图的平滑设置
-      if (props.chartType === 'line' && options.series) {
-        options.series = options.series.map(series => ({
-          ...series,
-          smooth: props.smooth
-        }))
-      }
-
-      return {
-        ...defaultOptions,
-        ...options
     }
   }
+})
 
 // 初始化图表
 const initChart = () => {
   if (!chartRef.value) return
 
   chartInstance = echarts.init(chartRef.value, props.theme)
-      
+  chartInstance.setOption(generateOptions.value)
-      // 绑定事件
-      chartInstance.on('click', (params) => {
-        emit('click', params)
-      })
-      
-      chartInstance.on('legendselectchanged', (params) => {
-        emit('legendselectchanged', params)
-      })
-
-      const processedOptions = processOptions(props.options)
-      chartInstance.setOption(processedOptions)
   emit('chartReady', chartInstance)
 }
 
 // 更新图表
 const updateChart = () => {
   if (!chartInstance) return
-      
+  chartInstance.setOption(generateOptions.value)
-      const processedOptions = processOptions(props.options)
-      chartInstance.setOption(processedOptions)
 }
 
 // 调整图表大小
@@ -147,7 +250,7 @@ export default {
 
 // 监听配置变化
 watch(
-      () => props.options,
+  () => [props.data, props.config],
   () => updateChart(),
   { deep: true }
 )
@@ -189,12 +292,6 @@ export default {
     chartInstance = null
   }
 })
-
-    return {
-      chartRef
-    }
-  }
-}
 </script>
 
 <style scoped>

src/views/activity/TestCenter.vue

@@ -60,20 +60,24 @@
       />
     </div>
 
-    <div class="chart-demo">
+    <!-- 图表区域 -->
-      <!-- 柱状图示例 -->
+    <div class="chart-section">
       <ECharts
-        :options="barChartOptions"
+        :data="salesData"
+        :config="chartConfig"
+        title="销量对比"
         height="300px"
-        chartType="bar"
+        :loading="loading"
       />
     </div>
+
   </div>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
 import ECharts from '@/components/ECharts/index.vue'
+import { useSalesChart } from './composables/useSalesChart'
 
 const value = ref('')
 const options = [
@@ -229,166 +233,103 @@ const getLeafIds = (node, visited) => {
   return ids;
 };
 
-// 定义图表数据结构
+// 图表相关
-const chartData = ref({
+const { salesData, chartConfig, loading } = useSalesChart()
-  categories: ['手机', '电脑', '平板', '耳机', '手表'],
+
+// 2. 用户增长趋势数据
+const userGrowthData = ref([
+  { month: '2023-04', newUsers: 1500, activeUsers: 12000, retention: 85 },
+  { month: '2023-05', newUsers: 1800, activeUsers: 13200, retention: 87 },
+  { month: '2023-06', newUsers: 2200, activeUsers: 14800, retention: 88 },
+  { month: '2023-07', newUsers: 2100, activeUsers: 15900, retention: 86 },
+  { month: '2023-08', newUsers: 2600, activeUsers: 17200, retention: 89 },
+  { month: '2023-09', newUsers: 2800, activeUsers: 18900, retention: 90 },
+  { month: '2023-10', newUsers: 3100, activeUsers: 21000, retention: 91 },
+  { month: '2023-11', newUsers: 3400, activeUsers: 23500, retention: 89 },
+  { month: '2023-12', newUsers: 3800, activeUsers: 26000, retention: 92 },
+  { month: '2024-01', newUsers: 4200, activeUsers: 29000, retention: 93 },
+  { month: '2024-02', newUsers: 4500, activeUsers: 32000, retention: 91 },
+  { month: '2024-03', newUsers: 4800, activeUsers: 35000, retention: 92 }
+])
+
+// 用户增长趋势配置
+const userGrowthConfig = {
+  xField: 'month',
   series: [
     {
-      name: '上月销量',
+      name: '新增用户',
+      field: 'newUsers',
       type: 'bar',
-      data: [120, 200, 150, 80, 70],
-      color: '#409EFF',
-      showLabel: true,
-      labelFormatter: '{c}台'
-    },
-    {
-      name: '本月销量',
-      type: 'bar',
-      data: [140, 180, 180, 120, 90],
       color: '#67C23A',
       showLabel: true,
-      labelFormatter: '{c}台'
+      labelFormatter: '{c}人'
     },
     {
-      name: '环比增长',
+      name: '活跃用户',
+      field: 'activeUsers',
       type: 'line',
+      color: '#409EFF',
+      showLabel: true,
       yAxisIndex: 1,
-      data: [16.7, -10, 20, 50, 28.6],
+      labelFormatter: '{c}'
+    },
+    {
+      name: '留存率',
+      field: 'retention',
+      type: 'line',
       color: '#E6A23C',
       showLabel: true,
+      yAxisIndex: 2,
       labelFormatter: '{c}%'
     }
   ],
   yAxis: [
     {
-      name: '销量',
+      name: '新增用户',
-      min: 0,
+      min: 0
-      nameTextStyle: {
-        padding: [0, 0, 0, 50]
-      }
     },
     {
-      name: '增长率',
+      name: '活跃用户',
       min: 0,
+      position: 'right'
+    },
+    {
+      name: '留存率',
+      min: 80,
       max: 100,
-      axisLabel: '{value}%',
+      position: 'right',
-      nameTextStyle: {
+      offset: 80,
-        padding: [0, 0, 0, 50]
+      axisLabel: '{value}%'
+    }
+  ]
+}
+
+// 3. 市场份额数据
+const marketShareData = ref([
+  { category: '手机', value: 35, lastYear: 32 },
+  { category: '电脑', value: 25, lastYear: 28 },
+  { category: '平板', value: 20, lastYear: 18 },
+  { category: '智能手表', value: 12, lastYear: 10 },
+  { category: '耳机', value: 8, lastYear: 12 }
+])
+
+// 市场份额配置
+const marketShareConfig = {
+  series: [
+    {
+      type: 'pie',
+      field: 'value',
+      name: '市场份额',
+      radius: ['50%', '70%'],
+      center: ['50%', '50%'],
+      showLabel: true,
+      labelFormatter: '{b}: {c}%',
+      itemStyle: {
+        borderRadius: 6
       }
     }
   ]
-})
-
-// 生成图表配置的函数
-const generateChartOptions = (chartData) => {
-  const barSeries = chartData.series.filter(item => item.type === 'bar')
-  const lineSeries = chartData.series.filter(item => item.type === 'line')
-  
-  return {
-    title: {
-      text: '各类商品销量对比'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross'
-      },
-      formatter: function(params) {
-        let result = `${params[0].axisValue}<br/>`;
-        // 计算同比增长
-        const currentValue = params.find(p => p.seriesName === '本月销量')?.value || 0;
-        const lastValue = params.find(p => p.seriesName === '上月销量')?.value || 0;
-        const growth = params.find(p => p.seriesName === '环比增长')?.value || 0;
-        
-        // 添加所有系列的数据
-        params.forEach(param => {
-          const marker = param.marker;
-          const seriesName = param.seriesName;
-          const value = param.value;
-          const unit = param.seriesName.includes('增长') ? '%' : '台';
-          result += `${marker}${seriesName}: ${value}${unit}<br/>`;
-        });
-        
-        // 添加额外统计信息
-        if (currentValue && lastValue) {
-          const diff = currentValue - lastValue;
-          result += '<br/>';
-          result += `<span style="color: #666">销量差额: ${diff > 0 ? '+' : ''}${diff}台</span><br/>`;
-          result += `<span style="color: ${growth >= 0 ? '#67C23A' : '#F56C6C'}">环比: ${growth}%</span>`;
 }
-        
-        return result;
-      }
-    },
-    legend: {
-      data: chartData.series.map(item => item.name),
-      selected: chartData.series.reduce((acc, item) => {
-        acc[item.name] = true;
-        return acc;
-      }, {})
-    },
-    xAxis: {
-      type: 'category',
-      data: chartData.categories,
-      axisLabel: {
-        interval: 0,
-        rotate: chartData.categories.length > 5 ? 30 : 0
-      }
-    },
-    yAxis: chartData.yAxis.map((axis, index) => ({
-      type: 'value',
-      name: axis.name,
-      min: axis.min,
-      max: axis.max,
-      position: index === 0 ? 'left' : 'right',
-      splitLine: {
-        show: index === 0
-      },
-      axisLabel: axis.axisLabel ? {
-        formatter: axis.axisLabel
-      } : undefined
-    })),
-    series: chartData.series.map(item => ({
-      name: item.name,
-      type: item.type,
-      yAxisIndex: item.yAxisIndex || 0,
-      data: item.data,
-      barMaxWidth: 50,  // 限制柱子最大宽度
-      barGap: '30%',    // 柱子之间的间距
-      itemStyle: {
-        color: item.color,
-        borderRadius: item.type === 'bar' ? [4, 4, 0, 0] : 0
-      },
-      label: item.showLabel ? {
-        show: true,
-        position: item.type === 'line' ? 'top' : 'inside',
-        formatter: item.labelFormatter,
-        fontSize: 12,
-        color: item.type === 'line' ? item.color : '#fff'
-      } : undefined,
-      emphasis: {
-        focus: 'series',
-        label: {
-          show: true,
-          position: item.type === 'line' ? 'top' : 'inside',
-          formatter: item.labelFormatter || '{c}',
-          fontSize: 12,
-          color: item.type === 'line' ? item.color : '#fff'
-        }
-      }
-    })),
-    grid: {
-      top: '15%',
-      bottom: '15%',
-      left: '10%',
-      right: '10%',
-      containLabel: true
-    }
-  }
-}
-
-// 生成图表配置
-const barChartOptions = computed(() => generateChartOptions(chartData.value))
 </script>
 
 <style lang="scss" scoped>
@@ -451,12 +392,11 @@ const barChartOptions = computed(() => generateChartOptions(chartData.value))
       justify-content: center;
     }
 
-  .chart-demo {
+    .chart-section {
       background-color: #fff;
       padding: 16px;
       border-radius: 4px;
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-    margin-bottom: 12px;
     }
   }
 </style>

src/views/activity/composables/useSalesChart.js

@@ -0,0 +1,109 @@
+import { ref, onMounted } from 'vue'
+
+export function useSalesChart() {
+  // 销量对比数据
+  const salesData = ref([])
+  const loading = ref(true)  // 添加 loading 状态
+
+  // 模拟异步数据加载
+  const fetchData = async () => {
+    loading.value = true
+    try {
+      // 模拟 API 延迟
+      await new Promise(resolve => setTimeout(resolve, 1500))
+      
+      salesData.value = [
+        {
+          productName: '手机',
+          lastMonthSales: 120,
+          currentMonthSales: 140,
+          growthRate: 16.7
+        },
+        {
+          productName: '耳机',
+          lastMonthSales: 120,
+          currentMonthSales: 140,
+          growthRate: 16.7
+        },
+        {
+          productName: '手机',
+          lastMonthSales: 120,
+          currentMonthSales: 140,
+          growthRate: 16.7
+        },
+        {
+          productName: '手机',
+          lastMonthSales: 120,
+          currentMonthSales: 140,
+          growthRate: 16.7
+        },
+        // ... 其他数据
+      ]
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 组件挂载时加载数据
+  onMounted(() => {
+    fetchData()
+  })
+
+  // 图表配置
+  const chartConfig = {
+    xField: 'productName',
+    series: [
+      {
+        name: '上月销量',
+        field: 'lastMonthSales',
+        type: 'bar',
+        color: '#409EFF',
+        showLabel: true,
+        labelFormatter: '{c}台',
+        show: true,
+      },
+      {
+        name: '本月销量',
+        field: 'currentMonthSales',
+        type: 'bar',
+        color: '#67C23A',
+        showLabel: true,
+        labelFormatter: '{c}台',
+        show: true,
+        tooltip: {
+          show: false
+        }
+      },
+      {
+        name: '环比增长',
+        field: 'growthRate',
+        type: 'line',
+        yAxisIndex: 1,
+        color: '#E6A23C',
+        showLabel: true,
+        labelFormatter: '{c}%',
+        tooltip: {
+          show: true
+        }
+      }
+    ],
+    yAxis: [
+      {
+        name: '销量',
+        min: 0
+      },
+      {
+        name: '增长率',
+        min: 0,
+        max: 100,
+        axisLabel: '{value}%'
+      }
+    ]
+  }
+
+  return {
+    salesData,
+    chartConfig,
+    loading
+  }
+}