tvcharts 0.6.43 → 0.6.44

package/dist/echarts.js

@@ -35011,6 +35011,7 @@ var LineView = class extends Chart_default {
     const focus = emphasisModel.get("focus");
     const blurScope = emphasisModel.get("blurScope");
     const emphasisDisabled = emphasisModel.get("disabled");
+    console.log("%c [ polyline ]-829", "font-size:13px; background:pink; color:#bf2c9f;", polyline, visualColor);
     polyline.useStyle(defaults(lineStyleModel.getLineStyle(), {
       fill: "none",
       stroke: visualColor,
@@ -54907,6 +54908,138 @@ var SymbolPath_default = SymbolPath;
 
 // src/chart/linesPlot/LinesPlotView.ts
 var LastZ2 = -1;
+function clipColorStops2(colorStops, maxSize) {
+  const newColorStops = [];
+  const len2 = colorStops.length;
+  let prevOutOfRangeColorStop;
+  let prevInRangeColorStop;
+  function lerpStop(stop0, stop1, clippedCoord) {
+    const coord0 = stop0.coord;
+    const p = (clippedCoord - coord0) / (stop1.coord - coord0);
+    const color2 = lerp2(p, [stop0.color, stop1.color]);
+    return {coord: clippedCoord, color: color2};
+  }
+  for (let i = 0; i < len2; i++) {
+    const stop2 = colorStops[i];
+    const coord = stop2.coord;
+    if (coord < 0) {
+      prevOutOfRangeColorStop = stop2;
+    } else if (coord > maxSize) {
+      if (prevInRangeColorStop) {
+        newColorStops.push(lerpStop(prevInRangeColorStop, stop2, maxSize));
+      } else if (prevOutOfRangeColorStop) {
+        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop2, 0), lerpStop(prevOutOfRangeColorStop, stop2, maxSize));
+      }
+      break;
+    } else {
+      if (prevOutOfRangeColorStop) {
+        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop2, 0));
+        prevOutOfRangeColorStop = null;
+      }
+      newColorStops.push(stop2);
+      prevInRangeColorStop = stop2;
+    }
+  }
+  return newColorStops;
+}
+function calculatebandWidth(seriesModel, data) {
+  const baseAxis = seriesModel.getBaseAxis();
+  let extent3;
+  const bandWidth = baseAxis.type === "category" ? baseAxis.getBandWidth() : (extent3 = baseAxis.getExtent(), Math.abs(extent3[1] - extent3[0]) / data.count());
+  return bandWidth;
+}
+function getVisualGradient2(data, coordSys, api2) {
+  const visualMetaList = data.getVisual("visualMeta");
+  if (!visualMetaList || !visualMetaList.length || !data.count()) {
+    return;
+  }
+  if (coordSys.type !== "cartesian2d") {
+    if (true) {
+      console.warn("Visual map on line style is only supported on cartesian2d.");
+    }
+    return;
+  }
+  let coordDim;
+  let visualMeta;
+  for (let i = visualMetaList.length - 1; i >= 0; i--) {
+    const dimInfo = data.getDimensionInfo(visualMetaList[i].dimension);
+    coordDim = dimInfo && dimInfo.coordDim;
+    if (coordDim === "x" || coordDim === "y") {
+      visualMeta = visualMetaList[i];
+      break;
+    }
+  }
+  if (!visualMeta) {
+    if (true) {
+      console.warn("Visual map on line style only support x or y dimension.");
+    }
+    return;
+  }
+  const axis = coordSys.getAxis(coordDim);
+  const colorStops = map(visualMeta.stops, function(stop2) {
+    return {
+      coord: axis.toGlobalCoord(axis.dataToCoord(stop2.value)),
+      color: stop2.color
+    };
+  });
+  const stopLen = colorStops.length;
+  const outerColors = visualMeta.outerColors.slice();
+  if (stopLen && colorStops[0].coord > colorStops[stopLen - 1].coord) {
+    colorStops.reverse();
+    outerColors.reverse();
+  }
+  const colorStopsInRange = clipColorStops2(colorStops, coordDim === "x" ? api2.getWidth() : api2.getHeight());
+  const inRangeStopLen = colorStopsInRange.length;
+  if (!inRangeStopLen && stopLen) {
+    return colorStops[0].coord < 0 ? outerColors[1] ? outerColors[1] : colorStops[stopLen - 1].color : outerColors[0] ? outerColors[0] : colorStops[0].color;
+  }
+  const tinyExtent = 10;
+  const minCoord = colorStopsInRange[0].coord - tinyExtent;
+  const maxCoord = colorStopsInRange[inRangeStopLen - 1].coord + tinyExtent;
+  const coordSpan = maxCoord - minCoord;
+  if (coordSpan < 1e-3) {
+    return "transparent";
+  }
+  each(colorStopsInRange, function(stop2) {
+    stop2.offset = (stop2.coord - minCoord) / coordSpan;
+  });
+  colorStopsInRange.push({
+    offset: inRangeStopLen ? colorStopsInRange[inRangeStopLen - 1].offset : 0.5,
+    color: outerColors[1] || "transparent"
+  });
+  colorStopsInRange.unshift({
+    offset: inRangeStopLen ? colorStopsInRange[0].offset : 0.5,
+    color: outerColors[0] || "transparent"
+  });
+  const gradient = new LinearGradient_default(0, 0, 0, 0, colorStopsInRange, true);
+  gradient[coordDim] = minCoord;
+  gradient[coordDim + "2"] = maxCoord;
+  return gradient;
+}
+function getAreaGradient(data, seriesModel, api2) {
+  const colorStopsInRange = [];
+  const areaGradient = seriesModel.get("areaGradient");
+  const valueByType = {
+    start: 0,
+    end: 1
+  };
+  if (!areaGradient) {
+    return;
+  }
+  const coordSys = seriesModel.coordinateSystem;
+  const axis = coordSys.getAxis("y");
+  const extent3 = axis.getExtent();
+  const span = extent3[1] - extent3[0];
+  each(areaGradient, function(item) {
+    const offset = valueByType[item.type] ?? axis.toGlobalCoord(axis.dataToCoord(item.value)) / span;
+    colorStopsInRange.push({
+      color: item.color,
+      offset
+    });
+  });
+  const gradient = new LinearGradient_default(0, extent3[0], 0, extent3[1], colorStopsInRange, true);
+  return gradient;
+}
 var LinesPlotView2 = class extends Chart_default {
   constructor() {
     super(...arguments);
@@ -54916,8 +55049,8 @@ var LinesPlotView2 = class extends Chart_default {
   }
   render(seriesModel, ecModel, api2) {
     const data = seriesModel.getData();
-    this._renderLine(data, seriesModel);
-    this._renderArea(data, seriesModel);
+    this._renderLine(data, seriesModel, api2);
+    this._renderArea(data, seriesModel, api2);
     this._renderSymbol(data, seriesModel);
     this._renderHistogram(data, seriesModel);
     this._renderBar(data, seriesModel);
@@ -54936,7 +55069,7 @@ var LinesPlotView2 = class extends Chart_default {
     const coordSys = seriesModel.coordinateSystem;
     return coordSys && coordSys.getArea && coordSys.getArea(0.1);
   }
-  _renderLine(data, seriesModel) {
+  _renderLine(data, seriesModel, api2) {
     const linePointsByKey = data.getLayout("linePointsByKey");
     const lineVisible = seriesModel.get("lineVisible");
     if (lineVisible) {
@@ -54946,6 +55079,7 @@ var LinesPlotView2 = class extends Chart_default {
       } else {
         this._lineGroup.removeAll();
       }
+      const visualColor = getVisualGradient2(data, seriesModel.coordinateSystem, api2);
       const lineGroup = this._lineGroup;
       const z2 = seriesModel.get("z2");
       each(linePointsByKey, function(item, key) {
@@ -54957,7 +55091,7 @@ var LinesPlotView2 = class extends Chart_default {
           },
           style: {
             lineDash,
-            stroke: color2,
+            stroke: visualColor || color2,
             lineWidth: +lineWidth
           },
           z2: isDefaultColor ? LastZ2 : z2
@@ -54970,7 +55104,7 @@ var LinesPlotView2 = class extends Chart_default {
       this._lineGroup = null;
     }
   }
-  _renderArea(data, seriesModel) {
+  _renderArea(data, seriesModel, api2) {
     const areaVisible = seriesModel.get("areaVisible");
     if (areaVisible) {
       if (!this._polygonGroup) {
@@ -54984,6 +55118,7 @@ var LinesPlotView2 = class extends Chart_default {
       const histbase = seriesModel.get("histbase") || 0;
       const z2 = seriesModel.get("z2");
       const baseY = seriesModel.coordinateSystem.dataToPoint([0, histbase])[1];
+      const visualColor = getAreaGradient(data, seriesModel, api2);
       each(linePointsByKey, function(item, key) {
         const [stroke] = key.split(":");
         const {color: color2, isDefaultColor} = getFormatColor(stroke);
@@ -54993,8 +55128,8 @@ var LinesPlotView2 = class extends Chart_default {
             baseY
           },
           style: {
-            stroke: color2,
-            fill: color2
+            stroke: "none",
+            fill: visualColor || color2
           },
           z2: isDefaultColor ? LastZ2 : z2
         });
@@ -55101,7 +55236,7 @@ var LinesPlotView2 = class extends Chart_default {
       const barGroup = this._barGroup;
       const histbase = seriesModel.get("histbase") || 0;
       const z2 = seriesModel.get("z2");
-      const barSpace = seriesModel.coordinateSystem.getAxesByScale("ordinal")[0].scale.barSpace;
+      const barSpace = seriesModel.coordinateSystem.getAxesByScale("ordinal")[0].scale.barSpace || calculatebandWidth(seriesModel, data);
       const width = Math.floor(barSpace * 0.8);
       const baseY = seriesModel.coordinateSystem.dataToPoint([0, histbase])[1];
       if (width <= 1) {
@@ -55572,6 +55707,16 @@ var xCrossMapping = {
     return {w: width * 0.7, h: width * 0.7};
   }
 };
+var shapeXCrossMapping = {
+  huge: () => ({w: 61, h: 65}),
+  large: () => ({w: 46, h: 39}),
+  normal: () => ({w: 27, h: 27}),
+  small: () => ({w: 18, h: 18}),
+  tiny: () => ({w: 11, h: 11}),
+  auto: (width) => {
+    return {w: width * 0.7, h: width * 0.7};
+  }
+};
 var lCrossMapping = {
   huge: () => ({w: 60, h: 50}),
   large: () => ({w: 46, h: 38}),
@@ -55582,6 +55727,16 @@ var lCrossMapping = {
     return {w: width * 0.7, h: width * 0.7};
   }
 };
+var shapeLCrossMapping = {
+  huge: () => ({w: 60, h: 50}),
+  large: () => ({w: 46, h: 38}),
+  normal: () => ({w: 30, h: 26}),
+  small: () => ({w: 18, h: 18}),
+  tiny: () => ({w: 11, h: 11}),
+  auto: (width) => {
+    return {w: width * 0.7, h: width * 0.7};
+  }
+};
 var triangleMapping = {
   huge: () => ({w: 63, h: 51}),
   large: () => ({w: 47, h: 39}),
@@ -55592,6 +55747,16 @@ var triangleMapping = {
     return {w: width, h: Math.max(width - 6, 1)};
   }
 };
+var shapeTriangleMapping = {
+  huge: () => ({w: 63, h: 51}),
+  large: () => ({w: 47, h: 39}),
+  normal: () => ({w: 33, h: 26}),
+  small: () => ({w: 18, h: 18}),
+  tiny: () => ({w: 11, h: 11}),
+  auto: (width) => {
+    return {w: width, h: Math.max(width - 6, 1)};
+  }
+};
 var flagMapping = {
   huge: () => ({w: 61, h: 57}),
   large: () => ({w: 47, h: 43}),
@@ -55602,6 +55767,16 @@ var flagMapping = {
     return {w: width, h: Math.max(width - 2, 1)};
   }
 };
+var shapeFlagMapping = {
+  huge: () => ({w: 61, h: 57}),
+  large: () => ({w: 47, h: 43}),
+  normal: () => ({w: 31, h: 29}),
+  small: () => ({w: 18, h: 19}),
+  tiny: () => ({w: 11, h: 10}),
+  auto: (width) => {
+    return {w: width, h: Math.max(width - 2, 1)};
+  }
+};
 var circleMapping = {
   huge: () => ({w: 61, h: 61}),
   large: () => ({w: 47, h: 47}),
@@ -55612,6 +55787,16 @@ var circleMapping = {
     return {w: width, h: width};
   }
 };
+var shapeCircleMapping = {
+  huge: () => ({w: 61, h: 61}),
+  large: () => ({w: 47, h: 47}),
+  normal: () => ({w: 31, h: 31}),
+  small: () => ({w: 18, h: 18}),
+  tiny: () => ({w: 11, h: 11}),
+  auto: (width) => {
+    return {w: width, h: width};
+  }
+};
 var labelMapping = {
   huge: () => ({w: 33, h: 28, shape: {triangleWidth: 16}}),
   large: () => ({w: 25, h: 21, shape: {triangleWidth: 12}}),
@@ -55643,6 +55828,16 @@ var rectMapping = {
     return {w: width * 0.7, h: width * 0.7};
   }
 };
+var shapeRectMapping = {
+  huge: () => ({w: 51, h: 51}),
+  large: () => ({w: 39, h: 39}),
+  normal: () => ({w: 27, h: 27}),
+  small: () => ({w: 18, h: 18}),
+  tiny: () => ({w: 11, h: 11}),
+  auto: (width) => {
+    return {w: width * 0.7, h: width * 0.7};
+  }
+};
 var getArrowShape = (width, height, baseW) => {
   const w = width * 0.6;
   const rectHeight = Math.max(Math.floor((baseW - w) / 3), 0);
@@ -55681,8 +55876,28 @@ var symbolSizeMapping = {
   arrowUp: arrowMapping,
   arrowDown: arrowMapping
 };
-function getSymbolSize2(type, size, width) {
-  const fn = symbolSizeMapping[type]?.[size];
+var plotShapeSymbolSizeMapping = {
+  xCross: shapeXCrossMapping,
+  lCross: shapeLCrossMapping,
+  triangle: shapeTriangleMapping,
+  triangleDown: shapeTriangleMapping,
+  flag: shapeFlagMapping,
+  circle: shapeCircleMapping,
+  rect: shapeRectMapping,
+  diamond: shapeRectMapping,
+  arrowUp: arrowMapping,
+  arrowDown: arrowMapping,
+  labelUp: labelMapping,
+  labelDown: labelMapping,
+  labelLeft: labelMapping,
+  labelRight: labelMapping,
+  labelLowerLeft: labelAngleMapping,
+  labelLowerRight: labelAngleMapping,
+  labelUpperLeft: labelAngleMapping,
+  labelUpperRight: labelAngleMapping
+};
+function getSymbolSize2(type, size, width, isShape = false) {
+  const fn = (isShape ? plotShapeSymbolSizeMapping : symbolSizeMapping)[type]?.[size];
   return fn ? fn(width) : {w: 1, h: 1};
 }
 var labelFontSizeMapping = {
@@ -55761,6 +55976,7 @@ var labelsLayout = {
     }
     const bandWidth = Math.max(1, Math.round(coordSys.getAxesByScale("ordinal")[0].scale.barSpace * 0.8));
     const location = seriesModel.get("location");
+    const isShape = seriesModel.get("isShape");
     const dims = map(coordSys.dimensions, function(dim) {
       return data.mapDimension(dim);
     }).slice(0, 2);
@@ -55804,7 +56020,8 @@ var labelsLayout = {
           let position2 = labelModel.get("position") || "top";
           if (location === "top" || location === "belowbar") {
             position2 = "bottom";
-          } else if (isLabel || symbol === "textOutline") {
+          }
+          if (isLabel || symbol === "textOutline") {
             position2 = "inside";
           }
           if (textShow) {
@@ -55823,7 +56040,7 @@ var labelsLayout = {
               oldOffset = [textRect.width / 2, 0];
             }
           }
-          const {w, h, shape} = getSymbolSize2(symbol, size, bandWidth);
+          const {w, h, shape} = getSymbolSize2(symbol, size, bandWidth, isShape);
           if (isLabel ? !textShow || !text : true) {
             symbolSize = [w, h];
           }
@@ -56113,48 +56330,6 @@ var FillPolyPath = class extends Path_default {
 };
 var FillPolyPath_default = FillPolyPath;
 
-// src/chart/fills/LargeFillPolyPath.ts
-var LargeFillPolyShape = class {
-  constructor() {
-    this.pointsByColor = {};
-  }
-};
-var LargeFillPolyPath = class extends Path_default {
-  constructor(opts) {
-    super(opts);
-    this.type = "largeFillPoly";
-  }
-  getDefaultStyle() {
-    return {
-      stroke: "transparent"
-    };
-  }
-  getDefaultShape() {
-    return new LargeFillPolyShape();
-  }
-  buildPath(ctx, shape) {
-    const {pointsByColor} = shape;
-    each(pointsByColor, function(points4, color2) {
-      ctx.beginPathFill();
-      for (let index = 0; index < points4.length; index++) {
-        const polyPoints = points4[index];
-        for (let i = 0; i < polyPoints.length; i++) {
-          if (i === 0) {
-            ctx.moveTo(polyPoints[i][0], polyPoints[i][1]);
-            continue;
-          }
-          ctx.lineTo(polyPoints[i][0], polyPoints[i][1]);
-          if (i + 1 === polyPoints.length) {
-            ctx.closePath();
-          }
-        }
-      }
-      ctx.fillStyle(color2);
-    });
-  }
-};
-var LargeFillPolyPath_default = LargeFillPolyPath;
-
 // src/chart/fills/FillsView.ts
 var FillsView2 = class extends Chart_default {
   constructor() {
@@ -56175,54 +56350,40 @@ var FillsView2 = class extends Chart_default {
     const z2 = seriesModel.get("z2");
     const polygonGroup = this._polygonGroup;
     const coordSys = seriesModel.coordinateSystem;
-    const fillLength = Object.keys(pointsByColor).length;
-    if (fillLength >= 8) {
-      const el = new LargeFillPolyPath_default({
+    each(pointsByColor, function(points4, key) {
+      const colors = key.split(":");
+      let fill = key;
+      let isDefaultFill = false;
+      if (colors.length > 1) {
+        const [topColor, topValue, bottomColor, bottomValue] = colors;
+        const tValue = coordSys.dataToPoint([0, topValue])[1];
+        const bValue = coordSys.dataToPoint([0, bottomValue])[1];
+        fill = new LinearGradient_default(0, tValue, 0, bValue, [
+          {
+            offset: 0,
+            color: topColor
+          },
+          {
+            offset: 1,
+            color: bottomColor
+          }
+        ], true);
+      } else {
+        const {color: color2, isDefaultColor} = getFormatColor(fill);
+        fill = color2;
+        isDefaultFill = isDefaultColor;
+      }
+      const el = new FillPolyPath_default({
         shape: {
-          pointsByColor
+          points: points4
         },
         style: {
-          fill: "none"
+          fill
         },
-        z2
+        z2: isDefaultFill ? -1 : z2
       });
       polygonGroup.add(el);
-    } else {
-      each(pointsByColor, function(points4, key) {
-        const colors = key.split(":");
-        let fill = key;
-        let isDefaultFill = false;
-        if (colors.length > 1) {
-          const [topColor, topValue, bottomColor, bottomValue] = colors;
-          const tValue = coordSys.dataToPoint([0, topValue])[1];
-          const bValue = coordSys.dataToPoint([0, bottomValue])[1];
-          fill = new LinearGradient_default(0, tValue, 0, bValue, [
-            {
-              offset: 0,
-              color: topColor
-            },
-            {
-              offset: 1,
-              color: bottomColor
-            }
-          ], true);
-        } else {
-          const {color: color2, isDefaultColor} = getFormatColor(fill);
-          fill = color2;
-          isDefaultFill = isDefaultColor;
-        }
-        const el = new FillPolyPath_default({
-          shape: {
-            points: points4
-          },
-          style: {
-            fill
-          },
-          z2: isDefaultFill ? -1 : z2
-        });
-        polygonGroup.add(el);
-      });
-    }
+    });
     const clipPath = seriesModel.get("clip", true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
     if (clipPath) {
       this.group.setClipPath(clipPath);
@@ -56248,8 +56409,8 @@ var FillsView_default = FillsView;
 // src/chart/fills/fillsLayout.ts
 function getKey(itemModel) {
   let key = itemModel.option?.color;
-  if (!key && itemModel.get("topValue")) {
-    key = `${itemModel.get("topColor") || "transparent"}:${itemModel.get("topValue")}:${itemModel.get("bottomColor") || "transparent"}:${itemModel.get("bottomValue")}`;
+  if (!key && itemModel.get("topValue") !== void 0) {
+    key = `${itemModel.get("topColor") || "rgba(255,255,255,0)"}:${itemModel.get("topValue")}:${itemModel.get("bottomColor") || "rgba(255,255,255,0)"}:${itemModel.get("bottomValue")}`;
   }
   return key || "transparent";
 }
@@ -70449,6 +70610,7 @@ function removeTransparency(color2) {
 }
 
 // src/component/marker/MarkLabelView.ts
+var DefaultColor = "rgb(41,98,255)";
 var markerTypeCalculator2 = {
   dataMin: (item, seriesModel) => {
     const seriesData = seriesModel.getData();
@@ -70492,8 +70654,8 @@ var markerTypeCalculator2 = {
     return {
       value: seriesData.getByRawIndex(item.valueDim, lastIndex),
       labelTextStyle: {
-        fill: contrastColor2(fill),
-        backgroundColor: removeTransparency(fill),
+        fill: fill ? contrastColor2(fill) : "#fff",
+        backgroundColor: fill ? removeTransparency(fill) : DefaultColor,
         borderWidth: 0
       }
     };
@@ -70518,9 +70680,9 @@ var markerTypeCalculator2 = {
     return {
       value: seriesData.getByRawIndex(item.valueDim, lastIndex),
       labelTextStyle: {
-        fill,
+        fill: fill || DefaultColor,
         backgroundColor: backgroundColor2,
-        borderColor: fill,
+        borderColor: fill || DefaultColor,
         borderWidth: 1
       }
     };
@@ -70869,7 +71031,7 @@ function updateText({option, gridRect, position: position2, ecModel, el, y, offs
   el.attr("style", fontSize ? Object.assign(style, {fontSize, padding: getPaddingByStyle(fontSize, style.borderWidth)}) : style);
   inner21(el).y = y;
 }
-function createLabel({x, y, labelData, markerModel, gridRect, position: position2, labelTextStyle, fontSize}) {
+function createLabel({x, y, labelData, markerModel, gridRect, position: position2, labelTextStyle = {}, fontSize}) {
   const {zlevel} = markerModel.option;
   const {lineStyle, showLine, showName, showTitle, title} = labelData;
   const textStyle = Object.assign(labelData.textStyle ?? {}, {fontSize, padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)}, labelTextStyle);
@@ -70896,7 +71058,7 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
     ignore: !showTitle
   });
   const lineEl = new Line_default({
-    style: Object.assign(lineStyle, labelTextStyle ? {stroke: labelTextStyle.backgroundColor} : {}),
+    style: Object.assign(lineStyle, labelTextStyle.backgroundColor ? {stroke: labelTextStyle.backgroundColor} : {}),
     shape: {
       x1: showTitle && isLeft ? gridRect.x + 2 : gridRect.x,
       y1: y,
@@ -70915,7 +71077,7 @@ function createLabel({x, y, labelData, markerModel, gridRect, position: position
   group.add(textNameEl);
   return group;
 }
-function updateLabel({x, y, labelData, markerModel, gridRect, position: position2, el, labelTextStyle, fontSize}) {
+function updateLabel({x, y, labelData, markerModel, gridRect, position: position2, el, labelTextStyle = {}, fontSize}) {
   const {lineStyle, showLine, showName, showTitle, title} = labelData;
   const textStyle = Object.assign(labelData.textStyle ?? {}, {fontSize, padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)}, labelTextStyle);
   const borderWidth = textStyle.borderWidth ?? 0;
@@ -70940,7 +71102,7 @@ function updateLabel({x, y, labelData, markerModel, gridRect, position: position
             x2: showTitle && !isLeft ? gridRect.x + gridRect.width - 2 : gridRect.x + gridRect.width,
             y2: y
           },
-          style: Object.assign(lineStyle, labelTextStyle ? {stroke: labelTextStyle.backgroundColor} : {})
+          style: Object.assign(lineStyle, labelTextStyle.backgroundColor ? {stroke: labelTextStyle.backgroundColor} : {})
         });
         element.ignore = false;
         break;