@easyv/charts 1.8.24 → 1.8.26

package/src/components/CartesianChart.js

@@ -9,7 +9,7 @@ import React, {
   useContext,
   useCallback,
   useEffect,
-  useLayoutEffect
+  useLayoutEffect,
 } from "react";
 import { useAxes, useTooltip, useCarouselAxisX, useAiData } from "../hooks";
 import { chartContext } from "../context";
@@ -33,7 +33,8 @@ import {
 
 const Chart = memo(
   ({
-    width, height,
+    width,
+    height,
     seriesData,
     config: {
       axes: axesConfig,
@@ -42,7 +43,7 @@ const Chart = memo(
         margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
-        selectStyle
+        selectStyle,
       },
       series,
       bandLength,
@@ -64,21 +65,23 @@ const Chart = memo(
     originData,
     filterData,
     aiFormatter,
-    id
+    id,
   }) => {
     const context = useContext(chartContext);
     const [isHover, setIsHover] = useState(false);
     const [curXLabel, setCurXLabel] = useState("");
-    
+
     const {
       isIOS,
+      scale,
+      screenPos,
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative,
       onEmit,
     } = context;
-    const defaultSelected = selectStyle?selectStyle.defaultSelected:"";
-    const { zIndex="bottom" } = indicator;
+    const defaultSelected = selectStyle ? selectStyle.defaultSelected : "";
+    const { zIndex = "bottom" } = indicator;
     const xLineRange = chartWidth;
     let yLineRange = chartHeight;
     //获取控制条相关的参数
@@ -88,37 +91,50 @@ const Chart = memo(
     let dragPercent = 1;
     let controlHeight = 0;
     let controlX = 0;
-    if(control){
-      const { height, margin:{ left, right }, drag:{ start, width:dragWidth } } = control;
+    if (control) {
+      const {
+        height,
+        margin: { left, right },
+        drag: { start, width: dragWidth },
+      } = control;
       isControl = true;
       controlHeight = height;
-      controlWidth = width-left-right;
-      dragPercent = dragWidth/100;
-      controlBarWidth = controlWidth*dragPercent;
-      controlX = (controlWidth-controlBarWidth)*start/100;
+      controlWidth = width - left - right;
+      dragPercent = dragWidth / 100;
+      controlBarWidth = controlWidth * dragPercent;
+      controlX = ((controlWidth - controlBarWidth) * start) / 100;
     }
-    const [controlInfo, setControlInfo] = useState({ isC:isControl, cWidth:controlWidth, cHeight:controlHeight, cBarWidth:controlBarWidth, cPercent:dragPercent, cBarX:controlX });
+    const [controlInfo, setControlInfo] = useState({
+      isC: isControl,
+      cWidth: controlWidth,
+      cHeight: controlHeight,
+      cBarWidth: controlBarWidth,
+      cPercent: dragPercent,
+      cBarX: controlX,
+    });
     const { cWidth, cHeight, cBarWidth, cPercent, cBarX } = controlInfo;
 
     yLineRange -= cHeight;
-    useEffect(()=>{
+    useEffect(() => {
       setControlInfo({
-        isC:isControl,
-        cWidth:controlWidth,
-        cHeight:controlHeight, 
-        cBarWidth:controlBarWidth, 
-        cPercent:dragPercent,
-        cBarX:controlX
+        isC: isControl,
+        cWidth: controlWidth,
+        cHeight: controlHeight,
+        cBarWidth: controlBarWidth,
+        cPercent: dragPercent,
+        cBarX: controlX,
       });
-    },[JSON.stringify(control)]);
+    }, [JSON.stringify(control)]);
 
     const svg = useRef();
     const axes = useAxes({
       axes: axesConfig,
       context,
-      controlInfo
+      controlInfo,
     });
-    const aiData = aiFormatter?aiFormatter(originData, axes, series):useAiData(originData, axes, series);
+    const aiData = aiFormatter
+      ? aiFormatter(originData, axes, series)
+      : useAiData(originData, axes, series);
     const axisX = useCarouselAxisX(
       axes.get("x"),
       animation,
@@ -128,52 +144,52 @@ const Chart = memo(
     );
 
     //初始化控制图提示框状态的函数
-    const initCtlTip = ()=>{
+    const initCtlTip = () => {
       return {
-        show:false,
-        xName:"",
-        x:undefined,
-        indicatorList:axisX.ticks.map((tick) => {
+        show: false,
+        xName: "",
+        x: undefined,
+        indicatorList: axisX.ticks.map((tick) => {
           return {
             tick: tick,
             isShow: false,
           };
-        })
-      }
-    }
-    const [ctlTip, setCtlTip] = useState(initCtlTip);   //控制图的提示框
+        }),
+      };
+    };
+    const [ctlTip, setCtlTip] = useState(initCtlTip); //控制图的提示框
 
-    useEffect(()=>{
-      const handleAction=(e)=>{
+    useEffect(() => {
+      const handleAction = (e) => {
         const { dynamicData } = e;
         setCurXLabel(dynamicData);
-      }
-      document.addEventListener(`setCurrent_${id}`,handleAction,false);
-      return ()=>{
-        document.removeEventListener(`setCurrent_${id}`,handleAction);
-      }
-    },[]);
-    useEffect(()=>{
+      };
+      document.addEventListener(`setCurrent_${id}`, handleAction, false);
+      return () => {
+        document.removeEventListener(`setCurrent_${id}`, handleAction);
+      };
+    }, []);
+    useEffect(() => {
       setCtlTip(initCtlTip);
-    },[JSON.stringify(axisX.ticks)]);
-    useEffect(()=>{
+    }, [JSON.stringify(axisX.ticks)]);
+    useEffect(() => {
       setCurXLabel(defaultSelected);
-    },[defaultSelected]);
-    useEffect(()=>{
-      if(aiData.length){
-        if(!window.aiData){ 
-          window.aiData={};
+    }, [defaultSelected]);
+    useEffect(() => {
+      if (aiData.length) {
+        if (!window.aiData) {
+          window.aiData = {};
         }
-        window.aiData[id]={
-          getAI:()=>{
+        window.aiData[id] = {
+          getAI: () => {
             return aiData;
-          }
-        }
+          },
+        };
       }
-      return ()=>{
+      return () => {
         window.aiData && window.aiData[id] && delete window.aiData[id];
-      }
-    },[JSON.stringify(aiData),id]);
+      };
+    }, [JSON.stringify(aiData), id]);
 
     const {
       x: tooltipX,
@@ -188,39 +204,41 @@ const Chart = memo(
       axisX,
       isHover,
       config: tooltipConfig,
-      active
+      active,
     });
-    const setTouchIndex = (e)=>{
+    const setTouchIndex = (e) => {
       e.preventDefault();
       const touch = e.touches[0];
-      if(isControl){
-        const target = document.elementFromPoint(touch.clientX,touch.clientY);
+      if (isControl) {
+        const target = document.elementFromPoint(touch.clientX, touch.clientY);
         const { mobile } = target.dataset;
-        if(mobile){
+        if (mobile) {
           const { x, xName } = JSON.parse(mobile);
-          setCtlTip((pre)=>({
-            show:true, x, xName,
-            indicatorList:pre.indicatorList.map((item)=>{
+          setCtlTip((pre) => ({
+            show: true,
+            x,
+            xName,
+            indicatorList: pre.indicatorList.map((item) => {
               if (item.tick === xName) {
                 return { ...item, isShow: true };
               } else {
                 return item;
               }
-            })
-          }))
-        }else{
+            }),
+          }));
+        } else {
           setCtlTip(initCtlTip);
         }
-      }else{
+      } else {
         setIndex(touch);
       }
-    }
+    };
     const tooltipData = useMemo(
       () =>
         tickName !== undefined && originData.filter((d) => d.x === tickName),
       [tickName, JSON.stringify(originData)]
     );
-    
+
     const showTooltip = !!(
       tooltipData &&
       tooltipData.length &&
@@ -229,7 +247,8 @@ const Chart = memo(
 
     const isVertical = axisX.direction === "vertical";
 
-    const indicatorWidth = (indicator.width * (control?axisX.controlStep:axisX.step)) / 100;
+    const indicatorWidth =
+      (indicator.width * (control ? axisX.controlStep : axisX.step)) / 100;
     const position = axisX.scaler(tickName) - indicatorWidth / 2;
     const indicatorAttr = isVertical
       ? { width: chartWidth, height: indicatorWidth, y: position }
@@ -240,19 +259,30 @@ const Chart = memo(
         };
 
     const onInteraction = useCallback(
-      (e,type) => {
+      (e, type) => {
         e.stopPropagation();
+        const { pageX, pageY } = e.nativeEvent;
         const { data } = e.currentTarget.dataset;
         const _data = JSON.parse(data);
-        if(type=="setCurrent"){
-          setCurXLabel(pre=>{
-            return pre==_data.x?"":_data.x;
+        const [scaleX, scaleY] = scale.current;
+        const { left, top } = screenPos.current;
+        const eventData = {
+          ..._data,
+          xPos: (pageX - left) * scaleX,
+          yPos: (pageY - top) * scaleY,
+        };
+        if (type == "setCurrent") {
+          setCurXLabel((pre) => {
+            return pre == _data.x ? "" : _data.x;
           });
+          triggerOnRelative("click", eventData);
+          onEmit("click", eventData);
+        } else {
+          triggerOnRelative(type, eventData);
+          onEmit(type, eventData);
         }
-        triggerOnRelative('click',_data);
-        onEmit("click", _data);
       },
-      [triggerOnRelative, onEmit]
+      [triggerOnRelative, onEmit, scale]
     );
 
     /**
@@ -262,16 +292,16 @@ const Chart = memo(
     const seriesEl = useRef(null);
     const axisElList = useRef([]);
     const curControlPercent = useRef(0);
-    const controlTimer = useRef();  //控制条的动画计时器
-    const ctlBarX = useRef(0);      //控制条的滑块偏移值
-    const isWorking = useRef(false);  //控制条是否正在进行各种操作
+    const controlTimer = useRef(); //控制条的动画计时器
+    const ctlBarX = useRef(0); //控制条的滑块偏移值
+    const isWorking = useRef(false); //控制条是否正在进行各种操作
 
     const range = (num, ignoreMax) => {
       let _num = num;
       const min = 0;
       const max = cWidth - cBarWidth;
       _num = Math.max(_num, min);
-      if(ignoreMax){
+      if (ignoreMax) {
         return _num;
       }
       _num = Math.min(_num, max);
@@ -280,94 +310,101 @@ const Chart = memo(
     //设置滑块和图表主体的偏移值
     const setControlTranslate = (x, needSave) => {
       const moveLen = range(x);
-      if(needSave) ctlBarX.current = moveLen;
-      setControlInfo(pre=>{
+      if (needSave) ctlBarX.current = moveLen;
+      setControlInfo((pre) => {
         return {
           ...pre,
-          cBarX:moveLen
-        }
+          cBarX: moveLen,
+        };
       });
     };
-    const setControlWidth = (fn,ignoreMax=false)=>{
-      setControlInfo(pre=>{
+    const setControlWidth = (fn, ignoreMax = false) => {
+      setControlInfo((pre) => {
         const x = pre.cBarX;
         const moveLen = range(x, ignoreMax);
         ctlBarX.current = moveLen;
         return fn(pre);
       });
-    }
+    };
     //设置控制条是否正在进行拖拽/缩放操作
-    const setWorking=(bool)=>{
+    const setWorking = (bool) => {
       isWorking.current = bool;
-    }
+    };
     //cBarX变化后，修改图表的偏移值
-    useLayoutEffect(()=>{
+    useLayoutEffect(() => {
       const { controlEnd, start } = axisX;
-      if(controlEl.current){
+      if (controlEl.current) {
         controlEl.current.style.transform = `translate(${cBarX}px,0)`;
         //计算出当前位移的百分比
         let percent = cBarX / (cWidth - cBarWidth);
-        percent = isNaN(percent)?1:percent;
-        const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
+        percent = isNaN(percent) ? 1 : percent;
+        const translateX =
+          -(controlEnd + start / cPercent - chartWidth) * percent;
         curControlPercent.current = percent;
         seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
-      },[controlInfo]);
+    }, [controlInfo]);
     //控制条轮播动画
     useEffect(() => {
       if (controlEl.current && control) {
-        let isEnter = false;   //控制条轮播动画是否处于暂停状态
+        let isEnter = false; //控制条轮播动画是否处于暂停状态
         const { show, duration, interval, hover } = animation;
-        const startAnimate=()=>{
-          const loopInterval = interval*1000, tranDuration = duration*1000; 
-          let loopTime, timeGap, toRight=true;
-          const transition=(timeStamp)=>{
-            if(!loopTime)loopTime=timeStamp;
-            if(!isEnter && !isWorking.current){
-              if(timeStamp-loopTime<tranDuration){
-                const percent = Math.min(1,(timeStamp-loopTime)/tranDuration);
-                if(toRight){
-                  setControlTranslate(cBarWidth*percent+ctlBarX.current);
-                }else{
-                  setControlTranslate(ctlBarX.current*(1-percent));
+        const startAnimate = () => {
+          const loopInterval = interval * 1000,
+            tranDuration = duration * 1000;
+          let loopTime,
+            timeGap,
+            toRight = true;
+          const transition = (timeStamp) => {
+            if (!loopTime) loopTime = timeStamp;
+            if (!isEnter && !isWorking.current) {
+              if (timeStamp - loopTime < tranDuration) {
+                const percent = Math.min(
+                  1,
+                  (timeStamp - loopTime) / tranDuration
+                );
+                if (toRight) {
+                  setControlTranslate(cBarWidth * percent + ctlBarX.current);
+                } else {
+                  setControlTranslate(ctlBarX.current * (1 - percent));
                 }
                 controlTimer.current = requestAnimationFrame(transition);
-              }else{
+              } else {
                 loopTime = timeStamp;
-                if(toRight){
-                  setControlTranslate(cBarWidth+ctlBarX.current, true);
-                }else{
-                  setControlTranslate(0,true);
+                if (toRight) {
+                  setControlTranslate(cBarWidth + ctlBarX.current, true);
+                } else {
+                  setControlTranslate(0, true);
                 }
                 controlTimer.current = requestAnimationFrame(loop);
               }
-            }else{
-              loopTime = timeStamp-timeGap;
+            } else {
+              loopTime = timeStamp - timeGap;
               controlTimer.current = requestAnimationFrame(transition);
             }
             timeGap = timeStamp - loopTime;
-          }
-          
-          const loop=(timeStamp)=>{
-            if(!loopTime)loopTime=timeStamp;
-            if(!isEnter && !isWorking.current){
-              if(timeStamp-loopTime<loopInterval){
+          };
+
+          const loop = (timeStamp) => {
+            if (!loopTime) loopTime = timeStamp;
+            if (!isEnter && !isWorking.current) {
+              if (timeStamp - loopTime < loopInterval) {
                 controlTimer.current = requestAnimationFrame(loop);
-              }else{
+              } else {
                 loopTime = timeStamp;
-                if(ctlBarX.current==cWidth - cBarWidth) toRight=false;
-                else toRight=true;
+                if (ctlBarX.current == cWidth - cBarWidth) toRight = false;
+                else toRight = true;
                 controlTimer.current = requestAnimationFrame(transition);
               }
-            }else{
-              loopTime = timeStamp-timeGap;
+            } else {
+              loopTime = timeStamp - timeGap;
               controlTimer.current = requestAnimationFrame(loop);
             }
             timeGap = timeStamp - loopTime;
-          }
+          };
           controlTimer.current = requestAnimationFrame(loop);
-        }
+        };
         const mouseenter = () => {
           isEnter = true;
         };
@@ -376,72 +413,94 @@ const Chart = memo(
         };
         const svgDom = svg.current;
         const controlDom = controlEl.current;
-        if(hover){
-          svgDom && svgDom.addEventListener("mouseenter",mouseenter);
-          svgDom && svgDom.addEventListener("mouseleave",mouseleave);
-          controlDom && controlDom.addEventListener("mouseenter",mouseenter);
-          controlDom && controlDom.addEventListener("mouseleave",mouseleave);
+        if (hover) {
+          svgDom && svgDom.addEventListener("mouseenter", mouseenter);
+          svgDom && svgDom.addEventListener("mouseleave", mouseleave);
+          controlDom && controlDom.addEventListener("mouseenter", mouseenter);
+          controlDom && controlDom.addEventListener("mouseleave", mouseleave);
         }
-        if(show){
+        if (show) {
           startAnimate();
         }
         return () => {
-          svgDom && svgDom.removeEventListener("mouseenter",mouseenter);
-          svgDom && svgDom.removeEventListener("mouseleave",mouseleave);
-          controlDom && controlDom.removeEventListener("mouseenter",mouseenter);
-          controlDom && controlDom.removeEventListener("mouseleave",mouseleave);
+          svgDom && svgDom.removeEventListener("mouseenter", mouseenter);
+          svgDom && svgDom.removeEventListener("mouseleave", mouseleave);
+          controlDom &&
+            controlDom.removeEventListener("mouseenter", mouseenter);
+          controlDom &&
+            controlDom.removeEventListener("mouseleave", mouseleave);
           cancelAnimationFrame(controlTimer.current);
         };
       }
-    }, [JSON.stringify(animation), control, cWidth, cHeight, cBarWidth, cPercent]);
-    
-    const { show:showCtl, xName:ctlXName, x:ctlX, indicatorList:ctlIndicatorList } = ctlTip;
-    const controlChartTooltipData = ctlXName && originData.filter((d) => d.x === ctlXName);
-    const bodyWidth = isVertical?xLineRange + 100 + marginRight + marginLeft:xLineRange,
-      bodyHeight = isVertical?yLineRange:yLineRange + marginTop + marginBottom;
-      const hasDuplicateX = (data) => {
-        const xValues = new Set(); 
-        for (const item of data) {
-          // 跳过空数据项
-          if (!item.data || !item.data.length) continue;
-          
-          // 关键修改：遍历当前item.data的所有项（不再只取第1项）
-          for (const subItem of item.data) { 
-            // 确保subItem有data和x属性（兜底防错）
-            if (!subItem.data || subItem.data.x === undefined) continue;
-            const x = subItem.data.x;
-            if (xValues.has(x)) return true; // 任意x重复就返回true
-            xValues.add(x);
-          }
+    }, [
+      JSON.stringify(animation),
+      control,
+      cWidth,
+      cHeight,
+      cBarWidth,
+      cPercent,
+    ]);
+
+    const {
+      show: showCtl,
+      xName: ctlXName,
+      x: ctlX,
+      indicatorList: ctlIndicatorList,
+    } = ctlTip;
+    const controlChartTooltipData =
+      ctlXName && originData.filter((d) => d.x === ctlXName);
+    const bodyWidth = isVertical
+        ? xLineRange + 100 + marginRight + marginLeft
+        : xLineRange,
+      bodyHeight = isVertical
+        ? yLineRange
+        : yLineRange + marginTop + marginBottom;
+    const hasDuplicateX = (data) => {
+      const xValues = new Set();
+      for (const item of data) {
+        // 跳过空数据项
+        if (!item.data || !item.data.length) continue;
+
+        // 关键修改：遍历当前item.data的所有项（不再只取第1项）
+        for (const subItem of item.data) {
+          // 确保subItem有data和x属性（兜底防错）
+          if (!subItem.data || subItem.data.x === undefined) continue;
+          const x = subItem.data.x;
+          if (xValues.has(x)) return true; // 任意x重复就返回true
+          xValues.add(x);
         }
-        return false;
-      };
-      useEffect(()=>{
-      setCtlTip(pre=>{
+      }
+      return false;
+    };
+    useEffect(() => {
+      setCtlTip((pre) => {
         return {
-          show:!!tickName, x:tooltipX, xName:tickName,
-          indicatorList:pre.indicatorList.map((item)=>{
+          show: !!tickName,
+          x: tooltipX,
+          xName: tickName,
+          indicatorList: pre.indicatorList.map((item) => {
             if (item.tick === tickName) {
-              return { ...item, isShow:true };
+              return { ...item, isShow: true };
             } else {
-              return { ...item, isShow:false };
+              return { ...item, isShow: false };
             }
-          })
-        }
-      })
-    },[tooltipX, tickName]);
-    useEffect(()=>{
+          }),
+        };
+      });
+    }, [tooltipX, tickName]);
+    useEffect(() => {
       const svgDom = svg.current;
-      svgDom && svgDom.addEventListener("touchmove", setTouchIndex, {passive:false});
-      return ()=>{
+      svgDom &&
+        svgDom.addEventListener("touchmove", setTouchIndex, { passive: false });
+      return () => {
         svgDom && svgDom.removeEventListener("touchmove", setTouchIndex);
-      }
-    },[control]);
+      };
+    }, [control]);
 
     return (
       <>
         <ChartContainer
-          style={{...style,position:"absolute"}}
+          style={{ ...style, position: "absolute" }}
           width={width}
           height={height}
           marginLeft={marginLeft}
@@ -449,7 +508,7 @@ const Chart = memo(
           onMouseEnter={() => {
             setIsHover(true);
           }}
-          onMouseMove={!control?setIndex:null}
+          onMouseMove={!control ? setIndex : null}
           onMouseLeave={(e) => {
             setIsHover(false);
             setIndex(e);
@@ -478,21 +537,21 @@ const Chart = memo(
             const { axisType } = item;
             let dataUnit = "";
             const config = axisType == "x" ? axisX : item;
-            const target = series.find(d=>d.yOrZ==axisType);
-            if(target && target.data[0]){
+            const target = series.find((d) => d.yOrZ == axisType);
+            if (target && target.data[0]) {
               dataUnit = target.data[0].data.__unit__;
             }
             //如果纵坐标没有对应的值，则不显示
-            return axisType!="x" && !target?null:(
+            return axisType != "x" && !target ? null : (
               <Axis
                 ref={(d) => {
                   axisElList.current[index] = d;
                 }}
-                triggerClick={onInteraction}
+                triggerEvents={onInteraction}
                 xLineRange={xLineRange}
                 yLineRange={yLineRange}
                 controlInfo={controlInfo}
-                margin={{marginLeft,marginTop}}
+                margin={{ marginLeft, marginTop }}
                 dataUnit={dataUnit}
                 {...config}
                 key={index}
@@ -500,17 +559,22 @@ const Chart = memo(
             );
           })}
           {/* 非控制图下的指示器 */}
-          {showTooltip && !control && zIndex=="bottom" && (
-            <Indicator {...indicator} manual= {manual} auto={auto} {...indicatorAttr} />
+          {showTooltip && !control && zIndex == "bottom" && (
+            <Indicator
+              {...indicator}
+              manual={manual}
+              auto={auto}
+              {...indicatorAttr}
+            />
           )}
           <foreignObject
-            style={
-              {
-                width:bodyWidth,
-                height:bodyHeight,
-                transform:isVertical?`translateX(${-marginRight}px)`:`translateY(${-marginTop}px)`
-              }
-            }
+            style={{
+              width: bodyWidth,
+              height: bodyHeight,
+              transform: isVertical
+                ? `translateX(${-marginRight}px)`
+                : `translateY(${-marginTop}px)`,
+            }}
           >
             <svg
               width="100%"
@@ -520,13 +584,14 @@ const Chart = memo(
                 overflow: "visible",
                 position: "absolute",
                 transform: isVertical
-                  ? `translate(${marginRight}px,${isIOS?marginTop:0}px)`
-                  : `translate(${isIOS?marginLeft:0}px,${marginTop}px)`,
+                  ? `translate(${marginRight}px,${isIOS ? marginTop : 0}px)`
+                  : `translate(${isIOS ? marginLeft : 0}px,${marginTop}px)`,
               }}
             >
               {/* 控制图指示器部分 */}
               <g>
-                {control && zIndex=="bottom" &&
+                {control &&
+                  zIndex == "bottom" &&
                   ctlIndicatorList.map((item, index) => {
                     const x = axisX.scaler(item.tick);
                     return (
@@ -542,7 +607,7 @@ const Chart = memo(
                         xName={item.tick}
                         setCtlTip={setCtlTip}
                         ctlIndicatorList={ctlIndicatorList}
-                        manual= {manual}
+                        manual={manual}
                       />
                     );
                   })}
@@ -550,7 +615,7 @@ const Chart = memo(
               {/**绘制图表主体 */}
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
-                const isXRepeat=hasDuplicateX(series);//x项有重复项判断
+                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
                 return (
                   yAxis &&
                   Component && (
@@ -566,7 +631,7 @@ const Chart = memo(
                       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
                       isControlChart={!!control}
                       indicatorWidth={indicatorWidth}
-                      triggerClick={onInteraction}
+                      triggerEvents={onInteraction}
                       setCtlTip={setCtlTip}
                       isXRepeat={isXRepeat}
                     />
@@ -576,11 +641,11 @@ const Chart = memo(
               {/* 图表数值标签 */}
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
-                const isXRepeat=hasDuplicateX(series);//x项有重复项判断
+                const isXRepeat = hasDuplicateX(series); //x项有重复项判断
                 return (
                   yAxis && (
                     <Label
-                    isXRepeat={isXRepeat}
+                      isXRepeat={isXRepeat}
                       key={index}
                       {...config}
                       curXLabel={curXLabel}
@@ -588,13 +653,15 @@ const Chart = memo(
                       bandLength={bandLength}
                       xAxis={axisX}
                       yAxis={yAxis}
-                      triggerClick={onInteraction}
+                      triggerEvents={onInteraction}
+                      isControlChart={!!control}
                     />
                   )
                 );
               })}
               <g>
-                {control && zIndex!="bottom" &&
+                {control &&
+                  zIndex != "bottom" &&
                   ctlIndicatorList.map((item, index) => {
                     const x = axisX.scaler(item.tick);
                     return (
@@ -610,7 +677,7 @@ const Chart = memo(
                         xName={item.tick}
                         setCtlTip={setCtlTip}
                         ctlIndicatorList={ctlIndicatorList}
-                        manual= {manual}
+                        manual={manual}
                       />
                     );
                   })}
@@ -622,14 +689,19 @@ const Chart = memo(
                 isVertical={isVertical}
                 {...tooltip}
                 data={controlChartTooltipData}
-                x={ ctlX - marginLeft -(axisX.controlEnd + axisX.start/cPercent - chartWidth) * curControlPercent.current}
+                x={
+                  ctlX -
+                  marginLeft -
+                  (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
+                    curControlPercent.current
+                }
                 marginLeft={marginLeft}
                 marginTop={marginTop}
                 tickName={ctlXName}
                 series={series}
                 width={width}
                 height={height}
-                manual= {manual}
+                manual={manual}
               />
             )}
           </foreignObject>
@@ -657,8 +729,13 @@ const Chart = memo(
               );
             })}
           {/* 非控制图下的指示器 */}
-          {showTooltip && !control && zIndex!="bottom" && (
-            <Indicator {...indicator} manual= {manual} auto={auto} {...indicatorAttr} />
+          {showTooltip && !control && zIndex != "bottom" && (
+            <Indicator
+              {...indicator}
+              manual={manual}
+              auto={auto}
+              {...indicatorAttr}
+            />
           )}
         </ChartContainer>
         {/* 控制条逻辑 */}
@@ -666,16 +743,16 @@ const Chart = memo(
           <Control
             ref={controlEl}
             actions={{
-              setX:setControlTranslate,
+              setX: setControlTranslate,
               setWorking,
-              setControlWidth
+              setControlWidth,
             }}
             props={{
               control,
               controlInfo,
               axes,
               series,
-              top:chartHeight+marginTop,
+              top: chartHeight + marginTop,
               bandLength,
             }}
           ></Control>
@@ -694,7 +771,7 @@ const Chart = memo(
             series={series}
             width={width}
             height={height}
-            manual= {manual}
+            manual={manual}
           />
         )}
         {brush && <Brush config={brush} width={width} />}