@easyv/charts 1.4.16 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/CartesianChart.js

@@ -151,12 +151,6 @@ const Chart = memo(
               </svg>
             </foreignObject>
           )}
-          {[...axes.values()].reverse().map((item, index) => {         
-            const config = item.axisType == 'x' ? axisX : item;
-            return (
-              <Axis triggerClick={onInteraction} xLineRange={xLineRange} yLineRange={yLineRange} {...config} key={index} />
-            );
-          })}
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
           <foreignObject style={isVertical?{
                width:xLineRange+marginRight+marginLeft,
@@ -203,6 +197,12 @@ const Chart = memo(
               })}
             </svg>
           </foreignObject>
+          {[...axes.values()].reverse().map((item, index) => {         
+            const config = item.axisType == 'x' ? axisX : item;
+            return (
+              <Axis triggerClick={onInteraction} xLineRange={xLineRange} yLineRange={yLineRange} {...config} key={index} />
+            );
+          })}
           {baseLineData &&
             baseLineData.length > 0 &&
             baseLineData.map((item, index) => {

package/src/components/Label.js

@@ -2,7 +2,7 @@
  * 轴类图表标签
  */
 import { memo, useContext } from "react";
-import { getTranslate2d, getSeriesInfo } from "../utils";
+import { getTranslate2d, getSeriesInfo, getFontStyle } from "../utils";
 import { chartContext } from "../context";
 
 export default memo(
@@ -120,6 +120,9 @@ const Label = ({
   config: {
     font,
     translate: { x: translateX = 0, y: translateY = 0 },
+    suffix:{
+      content, font:suffixFont, translate:{ x:suffixX, y:suffixY }
+    }
   },
   textAnchor = "middle",
   dominantBaseline = "middle",
@@ -136,7 +139,10 @@ const Label = ({
       dominantBaseline={dominantBaseline}
       {...font}
     >
-      {value}
+      <tspan>{value}</tspan>
+      <tspan dx={suffixX} dy={suffixY} style={{
+        ...getFontStyle(suffixFont,"svg")
+      }}>{content}</tspan>
     </text>
   );
 };

package/src/components/TextOverflow.tsx

@@ -47,6 +47,9 @@ export default memo(forwardRef((props:flowText, ref:any) => {
     ...getTextOverflow(type),
     ...style
   }
+  const textDom = document.createElement("div");
+  textDom.innerHTML = value;
+  const text = textDom.innerText;
   return type == 'marquee' ? (
     <Marquee
       value={value}
@@ -54,6 +57,6 @@ export default memo(forwardRef((props:flowText, ref:any) => {
       style={styles}
       ref={ref} />
   ) : (
-    <div style={styles} ref={ref} title={type=="ellipsis"?value.replace(/<\/?.+?>/g,"") || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
+    <div style={styles} ref={ref} title={type=="ellipsis"?text || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
   );
 }));