@easyv/charts 1.6.16 → 1.6.18

package/lib/components/Band.js

@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _d3v = require("d3v7");
 var _utils = require("../utils");
+var _excluded = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -80,18 +82,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     paddingInner = _ref3$config$seriesIn === void 0 ? 0 : _ref3$config$seriesIn,
     _ref3$config$paddingI = _ref3$config.paddingInner,
     paddingOuter = _ref3$config$paddingI === void 0 ? 0 : _ref3$config$paddingI,
-    style = _ref3$config.style,
-    fillType = _ref3$config.fillType,
-    url = _ref3$config.url,
-    size = _ref3$config.size,
-    fill = _ref3$config.fill,
-    border = _ref3$config.border,
-    opacity = _ref3$config.opacity,
     _ref3$config$highligh = _ref3$config.highlight,
     showHighlight = _ref3$config$highligh.show,
     extent = _ref3$config$highligh.extent,
     highlightFill = _ref3$config$highligh.fill,
-    headDecorate = _ref3$config.headDecorate,
+    other = (0, _objectWithoutProperties2["default"])(_ref3$config, _excluded),
+    curXLabel = _ref3.curXLabel,
+    selectStyle = _ref3.selectStyle,
     _ref3$bandLength = _ref3.bandLength,
     bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
     data = _ref3.data,
@@ -107,6 +104,18 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     clipValue = _ref3$yAxis.clipValue,
     reverse = _ref3$yAxis.reverse;
   if (!data.length) return null;
+  var selectConfig = other;
+  if (selectStyle) {
+    var show = selectStyle.show,
+      showType = selectStyle.showType,
+      barStyle = selectStyle.barStyle,
+      headDecorate = selectStyle.headDecorate;
+    if (show && showType == "bar") {
+      selectConfig = _objectSpread(_objectSpread({}, barStyle), {}, {
+        headDecorate: headDecorate
+      });
+    }
+  }
   var step = isControlChart ? controlStep : normalStep;
   var xScaler = isControlChart ? controlDragScaler : normalScaler;
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
@@ -120,7 +129,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStart = _getSeriesInfo.seriesStart;
   var _data = showHighlight ? getHighlightData(data, extent) : data;
   var isVertical = direction === "vertical";
-  var borderStr = "".concat(border.borderColor, " solid ").concat(border.borderWidth, "px");
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, _data.map(function (_ref4, i) {
@@ -148,10 +156,20 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       y1 = yScaler(isVertical ? end : start);
       y2 = yScaler(isVertical ? start : end);
     }
+    var _ref5 = x == curXLabel ? selectConfig : other,
+      style = _ref5.style,
+      fillType = _ref5.fillType,
+      url = _ref5.url,
+      size = _ref5.size,
+      fill = _ref5.fill,
+      border = _ref5.border,
+      opacity = _ref5.opacity,
+      headDecorate = _ref5.headDecorate;
+    var borderStr = "".concat(border.borderColor, " solid ").concat(border.borderWidth, "px");
     var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
     if (headDecorate) {
-      showHead = headDecorate.show, headType = headDecorate.headType, headUrl = headDecorate.url, headVideo = headDecorate.video, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
+      showHead = headDecorate.show, headType = headDecorate.type, headUrl = headDecorate.url, headVideo = headDecorate.video, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
     }
     //断轴图相关，将柱形在断轴处切开
     var setClipPath = function setClipPath() {
@@ -184,7 +202,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         cursor: "pointer"
       }
     }, attr, {
-      onClick: triggerClick
+      onClick: function onClick(e) {
+        return triggerClick(e, "setCurrent");
+      }
       //enter和leave事件，用于控制图的提示框
       ,
       onMouseEnter: function onMouseEnter() {
@@ -245,6 +265,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       src: window.appConfig.ASSETS_URL + headVideo
       // controls={true}
       ,
+      loop: true,
       muted: true,
       autoPlay: true,
       style: {
@@ -262,7 +283,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         // position: "fixed",
         clipPath: setClipPath(),
         opacity: fillType == "pattern" ? opacity : 1,
-        background: fillType == "pattern" ? "50% 50% / ".concat(size.width, "px ").concat(size.height, "px repeat ") + "url(" + url + ")" : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
+        background: fillType == "pattern" ? "50% 50% / ".concat(size.width, "px ").concat(size.height, "px repeat ") + "url(" +
+        //@ts-ignore
+        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
         borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
           isVertical: isVertical,
           positive: y > 0,

package/lib/components/CartesianChart.js

@@ -38,6 +38,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     marginBottom = _ref$config$chart$mar.marginBottom,
     animation = _ref$config$chart.animation,
     legend = _ref$config$chart.legend,
+    selectStyle = _ref$config$chart.selectStyle,
     series = _ref$config.series,
     bandLength = _ref$config.bandLength,
     tooltip = _ref$config.tooltip,
@@ -72,11 +73,16 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isHover = _useState2[0],
     setIsHover = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    curXLabel = _useState4[0],
+    setCurXLabel = _useState4[1];
   var isIOS = context.isIOS,
     chartWidth = context.width,
     chartHeight = context.height,
     triggerOnRelative = context.triggerOnRelative,
     onEmit = context.onEmit;
+  var defaultSelected = selectStyle ? selectStyle.defaultSelected : "";
   var xLineRange = chartWidth;
   var yLineRange = chartHeight;
   //获取控制条相关的参数
@@ -101,7 +107,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     controlBarWidth = controlWidth * dragPercent;
     controlX = (controlWidth - controlBarWidth) * start / 100;
   }
-  var _useState3 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       isC: isControl,
       cWidth: controlWidth,
       cHeight: controlHeight,
@@ -109,9 +115,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       cPercent: dragPercent,
       cBarX: controlX
     }),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    controlInfo = _useState4[0],
-    setControlInfo = _useState4[1];
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    controlInfo = _useState6[0],
+    setControlInfo = _useState6[1];
   var cWidth = controlInfo.cWidth,
     cHeight = controlInfo.cHeight,
     cBarWidth = controlInfo.cBarWidth,
@@ -136,6 +142,19 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
   var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo, active);
+  (0, _react.useEffect)(function () {
+    var handleAction = function handleAction(e) {
+      var dynamicData = e.dynamicData;
+      setCurXLabel(dynamicData);
+    };
+    document.addEventListener("setCurrent_".concat(id), handleAction, false);
+    return function () {
+      document.removeEventListener("setCurent_".concat(id), handleAction);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    setCurXLabel(defaultSelected);
+  }, [defaultSelected]);
   (0, _react.useEffect)(function () {
     if (aiData.length) {
       if (!window.aiData) {
@@ -183,10 +202,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     width: indicatorWidth,
     x: position
   };
-  var onInteraction = (0, _react.useCallback)(function (e) {
+  var onInteraction = (0, _react.useCallback)(function (e, type) {
     e.stopPropagation();
     var data = e.currentTarget.dataset.data;
     var _data = JSON.parse(data);
+    if (type == "setCurrent") {
+      setCurXLabel(function (pre) {
+        return pre == _data.x ? "" : _data.x;
+      });
+    }
     triggerOnRelative('click', _data);
     onEmit("click", _data);
   }, [triggerOnRelative, onEmit]);
@@ -347,10 +371,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       })
     };
   };
-  var _useState5 = (0, _react.useState)(initCtlTip),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    ctlTip = _useState6[0],
-    setCtlTip = _useState6[1];
+  var _useState7 = (0, _react.useState)(initCtlTip),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    ctlTip = _useState8[0],
+    setCtlTip = _useState8[1];
   var showCtl = ctlTip.show,
     ctlXName = ctlTip.xName,
     ctlX = ctlTip.x,
@@ -454,6 +478,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       key: index
     }, config, {
       bandLength: bandLength,
+      curXLabel: curXLabel,
+      selectStyle: selectStyle,
       xAxis: axisX,
       yAxis: yAxis
       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
@@ -471,6 +497,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({
       key: index
     }, config, {
+      curXLabel: curXLabel,
+      selectStyle: selectStyle,
       bandLength: bandLength,
       xAxis: axisX,
       yAxis: yAxis,

package/lib/components/Label.js

@@ -8,22 +8,28 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _utils = require("../utils");
 var _context = require("../context");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+var _excluded = ["seriesIntervalWidth", "paddingInner", "showType"];
+/**
  * 轴类图表标签
  */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$config = _ref.config,
     _ref$config$seriesInt = _ref$config.seriesIntervalWidth,
     paddingInner = _ref$config$seriesInt === void 0 ? 0 : _ref$config$seriesInt,
     _ref$config$paddingIn = _ref$config.paddingInner,
     paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
-    label = _ref$config.label,
-    icon = _ref$config.icon,
+    _ref$config$showType = _ref$config.showType,
+    seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
+    other = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
     config = _ref.config,
+    curXLabel = _ref.curXLabel,
+    selectStyle = _ref.selectStyle,
     _ref$bandLength = _ref.bandLength,
     bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
     data = _ref.data,
@@ -36,10 +42,28 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     isClipAxis = _ref$yAxis.isClipAxis,
     clipValue = _ref$yAxis.clipValue,
     triggerClick = _ref.triggerClick;
+  var selectConfig = other;
+  if (selectStyle) {
+    var show = selectStyle.show,
+      showType = selectStyle.showType,
+      icon = selectStyle.icon,
+      label = selectStyle.numlabel;
+    if (show && seriesType == showType) {
+      if (showType == "bar") {
+        selectConfig = {
+          label: label
+        };
+      } else {
+        selectConfig = {
+          icon: icon,
+          label: label
+        };
+      }
+    }
+  }
   var lineType = config.hasOwnProperty("line"); //  堆叠处理
-  var showIcon = icon && icon.show;
-  var showLabel = label && label.show;
-  if (!(data.length && (showIcon || showLabel))) return null;
+
+  if (!data.length) return null;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     width = _useContext.width,
     height = _useContext.height;
@@ -53,8 +77,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesWidth = _getSeriesInfo.seriesWidth,
     seriesStart = _getSeriesInfo.seriesStart;
   var isVertical = direction === "vertical";
-  var _position = label.position,
-    reverse = label.reverse;
   return /*#__PURE__*/React.createElement("g", {
     className: "__easyv-label"
   }, data.map(function (_ref2, i) {
@@ -69,6 +91,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       showY = _ref2$data.showY,
       s = _ref2$data.s;
     var y1, y2;
+    var _ref3 = x == curXLabel ? selectConfig : other,
+      icon = _ref3.icon,
+      label = _ref3.label;
+    var showIcon = icon && icon.show;
+    var showLabel = label && label.show;
+    var _position = label.position,
+      reverse = label.reverse;
     if (isClipAxis) {
       if (end > +clipValue) {
         y1 = yScaler[1](start);
@@ -111,7 +140,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     });
     return /*#__PURE__*/React.createElement("g", {
       key: i,
-      onClick: triggerClick,
+      onClick: function onClick(e) {
+        return triggerClick(e, "setCurrent");
+      },
       style: {
         cursor: "pointer"
       },
@@ -127,29 +158,29 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }, attr)));
   }));
 });
-var Label = function Label(_ref3) {
-  var x = _ref3.x,
-    y = _ref3.y,
-    value = _ref3.value,
-    _ref3$config = _ref3.config,
-    font = _ref3$config.font,
-    _ref3$config$translat = _ref3$config.translate,
-    _ref3$config$translat2 = _ref3$config$translat.x,
-    translateX = _ref3$config$translat2 === void 0 ? 0 : _ref3$config$translat2,
-    _ref3$config$translat3 = _ref3$config$translat.y,
-    translateY = _ref3$config$translat3 === void 0 ? 0 : _ref3$config$translat3,
-    _ref3$config$suffix = _ref3$config.suffix,
-    content = _ref3$config$suffix.content,
-    suffixFont = _ref3$config$suffix.font,
-    _ref3$config$suffix$t = _ref3$config$suffix.translate,
-    suffixX = _ref3$config$suffix$t.x,
-    suffixY = _ref3$config$suffix$t.y,
-    _ref3$textAnchor = _ref3.textAnchor,
-    textAnchor = _ref3$textAnchor === void 0 ? "middle" : _ref3$textAnchor,
-    _ref3$dominantBaselin = _ref3.dominantBaseline,
-    dominantBaseline = _ref3$dominantBaselin === void 0 ? "middle" : _ref3$dominantBaselin,
-    reverse = _ref3.reverse;
-  return /*#__PURE__*/React.createElement("text", (0, _extends2["default"])({
+var Label = function Label(_ref4) {
+  var x = _ref4.x,
+    y = _ref4.y,
+    value = _ref4.value,
+    _ref4$config = _ref4.config,
+    font = _ref4$config.font,
+    _ref4$config$translat = _ref4$config.translate,
+    _ref4$config$translat2 = _ref4$config$translat.x,
+    translateX = _ref4$config$translat2 === void 0 ? 0 : _ref4$config$translat2,
+    _ref4$config$translat3 = _ref4$config$translat.y,
+    translateY = _ref4$config$translat3 === void 0 ? 0 : _ref4$config$translat3,
+    _ref4$config$suffix = _ref4$config.suffix,
+    content = _ref4$config$suffix.content,
+    suffixFont = _ref4$config$suffix.font,
+    _ref4$config$suffix$t = _ref4$config$suffix.translate,
+    suffixX = _ref4$config$suffix$t.x,
+    suffixY = _ref4$config$suffix$t.y,
+    _ref4$textAnchor = _ref4.textAnchor,
+    textAnchor = _ref4$textAnchor === void 0 ? "middle" : _ref4$textAnchor,
+    _ref4$dominantBaselin = _ref4.dominantBaseline,
+    dominantBaseline = _ref4$dominantBaselin === void 0 ? "middle" : _ref4$dominantBaselin,
+    reverse = _ref4.reverse;
+  return /*#__PURE__*/React.createElement("text", {
     x: x,
     y: y,
     transform: (0, _utils.getTranslate2d)({
@@ -157,26 +188,27 @@ var Label = function Label(_ref3) {
       y: translateY * (value < 0 && reverse ? -1 : 1)
     }),
     textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline
-  }, font), /*#__PURE__*/React.createElement("tspan", null, value), /*#__PURE__*/React.createElement("tspan", {
+    dominantBaseline: dominantBaseline,
+    style: _objectSpread({}, font)
+  }, /*#__PURE__*/React.createElement("tspan", null, value), /*#__PURE__*/React.createElement("tspan", {
     dx: suffixX,
     dy: suffixY,
     style: _objectSpread({}, (0, _utils.getFontStyle)(suffixFont, "svg"))
   }, content));
 };
-var Icon = function Icon(_ref4) {
-  var cx = _ref4.cx,
-    cy = _ref4.cy,
-    _ref4$config = _ref4.config,
-    mode = _ref4$config.mode,
-    inner = _ref4$config.inner,
-    outer = _ref4$config.outer,
-    color = _ref4$config.color,
-    radius = _ref4$config.radius,
-    image = _ref4$config.image,
-    _ref4$config$size = _ref4$config.size,
-    width = _ref4$config$size.width,
-    height = _ref4$config$size.height;
+var Icon = function Icon(_ref5) {
+  var cx = _ref5.cx,
+    cy = _ref5.cy,
+    _ref5$config = _ref5.config,
+    mode = _ref5$config.mode,
+    inner = _ref5$config.inner,
+    outer = _ref5$config.outer,
+    color = _ref5$config.color,
+    radius = _ref5$config.radius,
+    image = _ref5$config.image,
+    _ref5$config$size = _ref5$config.size,
+    width = _ref5$config$size.width,
+    height = _ref5$config$size.height;
   return mode == "single" ? /*#__PURE__*/React.createElement(Circle, {
     cx: cx,
     cy: cy,
@@ -196,11 +228,11 @@ var Icon = function Icon(_ref4) {
     xlinkHref: window.appConfig.ASSETS_URL + image
   }));
 };
-var Circle = function Circle(_ref5) {
-  var cx = _ref5.cx,
-    cy = _ref5.cy,
-    color = _ref5.color,
-    radius = _ref5.radius;
+var Circle = function Circle(_ref6) {
+  var cx = _ref6.cx,
+    cy = _ref6.cy,
+    color = _ref6.color,
+    radius = _ref6.radius;
   return /*#__PURE__*/React.createElement("circle", {
     cx: cx,
     cy: cy,
@@ -209,15 +241,15 @@ var Circle = function Circle(_ref5) {
     stroke: "none"
   });
 };
-var getVerticalLabel = function getVerticalLabel(_ref6) {
-  var _ref6$position = _ref6.position,
-    position = _ref6$position === void 0 ? "outerStart" : _ref6$position,
-    width = _ref6.width,
-    y = _ref6.y,
-    y1 = _ref6.y1,
-    y2 = _ref6.y2,
-    _ref6$reverse = _ref6.reverse,
-    reverse = _ref6$reverse === void 0 ? true : _ref6$reverse;
+var getVerticalLabel = function getVerticalLabel(_ref7) {
+  var _ref7$position = _ref7.position,
+    position = _ref7$position === void 0 ? "outerStart" : _ref7$position,
+    width = _ref7.width,
+    y = _ref7.y,
+    y1 = _ref7.y1,
+    y2 = _ref7.y2,
+    _ref7$reverse = _ref7.reverse,
+    reverse = _ref7$reverse === void 0 ? true : _ref7$reverse;
   var needReverse = reverse && y < 0;
   switch (position) {
     case "start":
@@ -247,15 +279,15 @@ var getVerticalLabel = function getVerticalLabel(_ref6) {
       };
   }
 };
-var getHorizontalLabel = function getHorizontalLabel(_ref7) {
-  var _ref7$position = _ref7.position,
-    position = _ref7$position === void 0 ? "outerStart" : _ref7$position,
-    height = _ref7.height,
-    y = _ref7.y,
-    y1 = _ref7.y1,
-    y2 = _ref7.y2,
-    _ref7$reverse = _ref7.reverse,
-    reverse = _ref7$reverse === void 0 ? true : _ref7$reverse;
+var getHorizontalLabel = function getHorizontalLabel(_ref8) {
+  var _ref8$position = _ref8.position,
+    position = _ref8$position === void 0 ? "outerStart" : _ref8$position,
+    height = _ref8.height,
+    y = _ref8.y,
+    y1 = _ref8.y1,
+    y2 = _ref8.y2,
+    _ref8$reverse = _ref8.reverse,
+    reverse = _ref8$reverse === void 0 ? true : _ref8$reverse;
   var needReverse = reverse && y < 0;
   switch (position) {
     case "start":

package/package.json

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

package/src/components/Band.tsx

@@ -75,22 +75,24 @@ export default memo(
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
-      style,
-      fillType,
-      url,
-      size,
-      fill,
-      border,
-      opacity,
       highlight: { show: showHighlight, extent, fill: highlightFill },
-      headDecorate,
+      ...other
     },
+    curXLabel,
+    selectStyle,
     bandLength = 0,
     data,
     xAxis: { scaler: normalScaler, step:normalStep, controlStep, direction, controlDragScaler },
     yAxis: { scaler: yScaler, isClipAxis, clipValue, reverse },
   }: any) => {
     if (!data.length) return null;
+    let selectConfig = other;
+    if(selectStyle){
+      const { show, showType, barStyle, headDecorate } = selectStyle;
+      if(show && showType=="bar"){
+        selectConfig = { ...barStyle, headDecorate };
+      }
+    }
     const step = isControlChart?controlStep:normalStep;
     const xScaler = isControlChart?controlDragScaler:normalScaler;
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
@@ -101,7 +103,7 @@ export default memo(
     });
     const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
-    const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
+    
     return (
       <g className="__easyv-band">
         {_data.map(
@@ -129,12 +131,23 @@ export default memo(
               y1 = yScaler(isVertical ? end : start);
               y2 = yScaler(isVertical ? start : end);
             }
+            const { 
+              style,
+              fillType,
+              url,
+              size,
+              fill,
+              border,
+              opacity,
+              headDecorate
+            } = x==curXLabel?selectConfig:other;
+            const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
             const positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             let showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
             if (headDecorate) {
               (showHead = headDecorate.show),
-              (headType = headDecorate.headType),
+              (headType = headDecorate.type),
               (headUrl = headDecorate.url),
               (headVideo = headDecorate.video),
               (headWidth = headDecorate.size.width),
@@ -175,7 +188,7 @@ export default memo(
                   cursor: "pointer",
                 }}
                 {...attr}
-                onClick={triggerClick}
+                onClick={e=>triggerClick(e,"setCurrent")}
                 //enter和leave事件，用于控制图的提示框
                 onMouseEnter={() => {
                   if(isControlChart){
@@ -227,6 +240,7 @@ export default memo(
                     //@ts-ignore
                     src={window.appConfig.ASSETS_URL + headVideo}
                     // controls={true}
+                    loop={true}
                     muted={true}
                     autoPlay={true}
                     style={{
@@ -250,7 +264,8 @@ export default memo(
                       fillType == "pattern"
                         ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
                           "url(" +
-                          url +
+                          //@ts-ignore
+                          window.appConfig.ASSETS_URL + url +
                           ")"
                         : getBandBackground(
                             pattern,

package/src/components/CartesianChart.js

@@ -43,6 +43,7 @@ const Chart = memo(
         margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
+        selectStyle
       },
       series,
       bandLength,
@@ -68,6 +69,7 @@ const Chart = memo(
   }) => {
     const context = useContext(chartContext);
     const [isHover, setIsHover] = useState(false);
+    const [curXLabel, setCurXLabel] = useState("");
     const {
       isIOS,
       width: chartWidth,
@@ -75,6 +77,7 @@ const Chart = memo(
       triggerOnRelative,
       onEmit,
     } = context;
+    const defaultSelected = selectStyle?selectStyle.defaultSelected:"";
     const xLineRange = chartWidth;
     let yLineRange = chartHeight;
     //获取控制条相关的参数
@@ -121,6 +124,19 @@ const Chart = memo(
       controlInfo,
       active
     );
+    useEffect(()=>{
+      const handleAction=(e)=>{
+        const { dynamicData } = e;
+        setCurXLabel(dynamicData);
+      }
+      document.addEventListener(`setCurrent_${id}`,handleAction,false);
+      return ()=>{
+        document.removeEventListener(`setCurent_${id}`,handleAction);
+      }
+    },[]);
+    useEffect(()=>{
+      setCurXLabel(defaultSelected);
+    },[defaultSelected]);
     useEffect(()=>{
       if(aiData.length){
         if(!window.aiData){ 
@@ -177,10 +193,15 @@ const Chart = memo(
         };
 
     const onInteraction = useCallback(
-      (e) => {
+      (e,type) => {
         e.stopPropagation();
         const { data } = e.currentTarget.dataset;
         const _data = JSON.parse(data);
+        if(type=="setCurrent"){
+          setCurXLabel(pre=>{
+            return pre==_data.x?"":_data.x;
+          });
+        }
         triggerOnRelative('click',_data);
         onEmit("click", _data);
       },
@@ -461,6 +482,8 @@ const Chart = memo(
                       key={index}
                       {...config}
                       bandLength={bandLength}
+                      curXLabel={curXLabel}
+                      selectStyle={selectStyle}
                       xAxis={axisX}
                       yAxis={yAxis}
                       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
@@ -480,6 +503,8 @@ const Chart = memo(
                     <Label
                       key={index}
                       {...config}
+                      curXLabel={curXLabel}
+                      selectStyle={selectStyle}
                       bandLength={bandLength}
                       xAxis={axisX}
                       yAxis={yAxis}

package/src/components/Label.js

@@ -10,21 +10,32 @@ export default memo(
     config: {
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
-      label,
-      icon,
+      showType:seriesType = 'bar',
+      ...other
     },
     config,
+    curXLabel,
+    selectStyle,
     bandLength = 0,
     data,
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
     triggerClick
   }) => {
+    let selectConfig = other;
+    if(selectStyle){
+      const { show, showType, icon, numlabel:label } = selectStyle;
+      if(show && seriesType==showType){
+        if(showType=="bar"){
+          selectConfig = { label };
+        }else{
+          selectConfig = { icon, label };
+        }
+      }
+    }
     const lineType = config.hasOwnProperty("line"); //  堆叠处理
-    const showIcon = icon && icon.show;
-    const showLabel = label && label.show;
-
-    if (!(data.length && (showIcon || showLabel))) return null;
+    
+    if (!data.length) return null;
     const { width, height } = useContext(chartContext);
 
     const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
@@ -34,7 +45,7 @@ export default memo(
       paddingOuter,
     });
     const isVertical = direction === "vertical";
-    const { position:_position, reverse } = label;
+    
     return (
       <g className="__easyv-label">
         {data.map(
@@ -43,6 +54,10 @@ export default memo(
             i
           ) => {
             let y1, y2;
+            const { icon, label } = x==curXLabel?selectConfig:other;
+            const showIcon = icon && icon.show;
+            const showLabel = label && label.show;
+            const { position:_position, reverse } = label;
             if (isClipAxis) {
               if (end > +clipValue) {
                 y1 = yScaler[1](start);
@@ -98,7 +113,7 @@ export default memo(
             return (
               <g
                 key={i}
-                onClick={triggerClick}
+                onClick={e=>triggerClick(e,"setCurrent")}
                 style={{ cursor: "pointer" }}
                 data-data={JSON.stringify(data)}
               >
@@ -140,7 +155,7 @@ const Label = ({
       })}
       textAnchor={textAnchor}
       dominantBaseline={dominantBaseline}
-      {...font}
+      style={{...font}}
     >
       <tspan>{value}</tspan>
       <tspan dx={suffixX} dy={suffixY} style={{