echarts轮播动画添加

main/src/components/custom-echart-pie/index.vue

@@ -33,7 +33,7 @@ export default {
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
-    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
     const option = reactive({
       tooltip: {
         formatter: '{b} ({c})',
@@ -74,6 +74,11 @@ export default {
       }
       option.series[0].data = props.chartData;
       setOptions(option);
+      startAutoPlay({
+        interval: 2000,
+        seriesIndex: 0,
+        showTooltip: true,
+      });
       resize();
       getInstance()?.off('click', onClick);
       getInstance()?.on('click', onClick);

main/src/hooks/useEcharts.js

@@ -6,6 +6,57 @@ import { useBreakpoint } from './useBreakpoint';
 import echarts from '../utils/echarts';
 
 export const useEcharts = (elRef, theme = 'default') => {
+  // 新增轮播相关状态
+  const autoPlayTimer = ref(null);
+  const currentIndex = ref(-1);
+  const dataLength = ref(0);
+
+  // 新增方法 - 启动轮播
+  const startAutoPlay = (options = {}) => {
+    const {
+      interval = 2000, // 轮播间隔(ms)
+      seriesIndex = 0, // 默认操作第一个系列
+      showTooltip = true, // 是否显示提示框
+    } = options;
+
+    stopAutoPlay(); // 先停止已有轮播
+
+    // 获取数据长度
+    const seriesData = unref(getOptions).series?.[seriesIndex]?.data;
+    dataLength.value = seriesData?.length || 0;
+    if (dataLength.value === 0) return;
+
+    autoPlayTimer.value = setInterval(() => {
+      currentIndex.value = (currentIndex.value + 1) % dataLength.value;
+
+      // 执行轮播动作
+      chartInstance?.dispatchAction({
+        type: 'downplay',
+        seriesIndex: seriesIndex,
+      });
+      chartInstance?.dispatchAction({
+        type: 'highlight',
+        seriesIndex: seriesIndex,
+        dataIndex: currentIndex.value,
+      });
+      if (showTooltip) {
+        chartInstance?.dispatchAction({
+          type: 'showTip',
+          seriesIndex: seriesIndex,
+          dataIndex: currentIndex.value,
+        });
+      }
+    }, interval);
+  };
+
+  // 新增方法 - 停止轮播
+  const stopAutoPlay = () => {
+    if (autoPlayTimer.value) {
+      clearInterval(autoPlayTimer.value);
+      autoPlayTimer.value = null;
+    }
+  };
+
   const getDarkMode = computed(() => {
     return theme === 'default' ? 'dark' : theme;
   });
@@ -31,23 +82,39 @@ export const useEcharts = (elRef, theme = 'default') => {
     if (!el || !unref(el)) {
       return;
     }
+    nextTick(() => {
+      if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+        console.warn('图表容器不可见，延迟初始化');
+        useTimeoutFn(() => initCharts(t), 100);
+        return;
+      }
 
-    chartInstance = echarts.init(el, t);
-    const { removeEvent } = useEventListener({
-      el: window,
-      name: 'resize',
-      listener: resizeFn,
+      chartInstance = echarts.init(el, t);
+      const { removeEvent } = useEventListener({
+        el: window,
+        name: 'resize',
+        listener: resizeFn,
+      });
+      removeResizeFn = removeEvent;
+      const { widthRef } = useBreakpoint();
+      if (unref(widthRef) <= 768 || el.offsetHeight === 0) {
+        useTimeoutFn(() => {
+          resizeFn();
+        }, 30);
+      }
     });
-    removeResizeFn = removeEvent;
-    const { widthRef } = useBreakpoint();
-    if (unref(widthRef) <= 768 || el.offsetHeight === 0) {
-      useTimeoutFn(() => {
-        resizeFn();
-      }, 30);
-    }
   }
 
   function setOptions(options = {}, clear = true) {
+    const mergedOptions = {
+      animation: true,
+      animationDuration: 3000,
+      animationEasing: 'cubicOut',
+      ...unref(options),
+      animationThreshold: 2000, // 数据量超过2000自动关闭动画
+      animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
+    };
+    cacheOptions.value = mergedOptions;
     cacheOptions.value = options;
     if (unref(elRef)?.offsetHeight === 0) {
       useTimeoutFn(() => {
@@ -98,6 +165,7 @@ export const useEcharts = (elRef, theme = 'default') => {
   );
 
   tryOnUnmounted(() => {
+    stopAutoPlay(); // 清理定时器
     if (!chartInstance) return;
     removeResizeFn();
     chartInstance.dispose();
@@ -115,7 +183,9 @@ export const useEcharts = (elRef, theme = 'default') => {
     setOptions,
     resize,
     echarts,
-    getInstance,
+    getInstance: () => chartInstance,
     registerMap,
+    startAutoPlay, // 暴露轮播方法
+    stopAutoPlay,
   };
 };