tvcharts 0.9.16 → 0.9.18

package/lib/component/events/EventsView.js

@@ -45,6 +45,13 @@ import { __extends } from "tslib";
 import ComponentView from "../../view/Component.js";
 import { each } from "tvrender/lib/core/util.js";
 import * as graphic from "../../util/graphic.js";
+import { getIsLightColor } from '../../util/color.js';
+var getRectFill = function (color) {
+  if (typeof color !== 'string') {
+    return '#000';
+  }
+  return getIsLightColor(color) ? '#fff' : '#000';
+};
 var r = 15;
 var optimizeX = function (x, lineWidth) {
   return lineWidth % 2 === 0 ? x : Math.floor(x) + 0.5;
@@ -96,6 +103,7 @@ var EventsView = /** @class */function (_super) {
     var lineStyle = eventsModel.get('lineStyle');
     var z = eventsModel.get('z');
     var selectedEventViewId = eventsModel.get('selectedEventViewId');
+    var backgroundColor = ecModel.get('backgroundColor') || '#fff';
     var hoverEventId = this.hoverEventId;
     var lastPoint = this._lastPoint;
     var mouseMove = this._mouseMove.bind(this);
@@ -143,7 +151,6 @@ var EventsView = /** @class */function (_super) {
           }
         });
         img.setClipPath(clipPath);
-        imgGroup.add(img);
         var rect = new graphic.Rect({
           shape: {
             x: x + 5 - borderWidth / 2,
@@ -154,7 +161,7 @@ var EventsView = /** @class */function (_super) {
           },
           style: {
             stroke: "#ED544F",
-            fill: "none",
+            fill: getRectFill(backgroundColor),
             lineWidth: borderWidth
           },
           z2: z2,
@@ -168,6 +175,7 @@ var EventsView = /** @class */function (_super) {
           }
         }
         imgGroup.add(rect);
+        imgGroup.add(img);
         if (i !== list.length - 1) {
           y = y - 24;
         }

package/lib/component/marker/MarkLabelView.js

@@ -46,7 +46,7 @@ import ComponentView from '../../view/Component.js';
 import { createHashMap, each, isGradientObject } from 'tvrender/lib/core/util.js';
 import { getBoundingRect } from 'tvrender/lib/contain/text.js';
 import { makeInner } from '../../util/model.js';
-import { contrastColor, removeTransparency } from '../../util/color.js';
+import { contrastColor, removeTransparency, getGradientColorByY } from '../../util/color.js';
 import * as formatUtil from '../../util/format.js';
 import * as graphicUtil from '../../util/graphic.js';
 import { getFont } from '../../label/labelStyle.js';
@@ -55,35 +55,58 @@ import { isCandle, isPlot } from '../../util/seriesType.js';
 import { positiveColorQuery, negativeColorQuery, positiveBorderColorQuery, negativeBorderColorQuery } from '../../chart/candlestick/candlestickVisual.js';
 import { getLeftTextX, formatSeconds } from '../../util/axisLabel.js';
 var DefaultColor = 'rgb(41,98,255)';
+var formatTextColor = function (color, height) {
+  if (color && isGradientObject(color) && !color.global && color.type === 'linear') {
+    return __assign(__assign({}, color), {
+      global: true,
+      y2: height
+    });
+  }
+  return color;
+};
+var linePlotTypes = ["linesPlot", "line"];
 var markerTypeCalculator = {
-  dataMin: function (item, seriesModel, backgroundColor) {
+  dataMin: function (item, seriesModel, height, backgroundColor) {
     var seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim)[0]
     };
   },
-  dataMax: function (item, seriesModel, backgroundColor) {
+  dataMax: function (item, seriesModel, height, backgroundColor) {
     var seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim)[1]
     };
   },
-  min: function (item, seriesModel, backgroundColor) {
+  min: function (item, seriesModel, height, backgroundColor) {
     var seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim, true)[0]
     };
   },
-  max: function (item, seriesModel, backgroundColor) {
+  max: function (item, seriesModel, height, backgroundColor) {
     var seriesData = seriesModel.getData();
     return {
       value: seriesData.getDataExtent(item.valueDim, true)[1]
     };
   },
-  rawLast: function (item, seriesModel, backgroundColor) {
+  rawLast: function (item, seriesModel, height, backgroundColor) {
     var _a;
     var seriesData = seriesModel.getData();
     var lastIndex = seriesData.count(true) - 1;
+    var itemFill = item.textStyle.fill;
+    if (item.customColor && itemFill) {
+      return {
+        value: seriesData.getByRawIndex(item.valueDim, lastIndex),
+        labelTextStyle: {
+          fill: typeof itemFill === 'string' ? contrastColor(itemFill) : '#ffffff',
+          // stroke: fill,
+          backgroundColor: removeTransparency(itemFill),
+          // borderColor: fill,
+          borderWidth: 0
+        }
+      };
+    }
     var fill = (_a = seriesData.getItemVisual(lastIndex, 'style')) === null || _a === void 0 ? void 0 : _a.fill;
     if (isCandle(seriesModel.subType)) {
       var dataItem = seriesData.getItemModel(lastIndex, true);
@@ -95,22 +118,22 @@ var markerTypeCalculator = {
         fill = dataItem.get(sign > 0 ? positiveBorderColorQuery : negativeBorderColorQuery);
       }
     } else if (isPlot(seriesModel.subType)) {
-      var isLinesPlot = seriesModel.subType === 'linesPlot';
+      var isLinesPlot = linePlotTypes.includes(seriesModel.subType);
       var dataItem = seriesData.getItemModel(lastIndex, true);
-      fill = dataItem.get([isLinesPlot ? 'lineStyle' : 'itemStyle', 'color']);
+      fill = formatTextColor(dataItem.get([isLinesPlot ? 'lineStyle' : 'itemStyle', 'color']), height);
     }
     return {
       value: seriesData.getByRawIndex(item.valueDim, lastIndex),
       labelTextStyle: {
-        fill: fill ? contrastColor(fill) : '#ffffff',
+        fill: typeof fill === 'string' ? contrastColor(fill) : '#ffffff',
         // stroke: fill,
-        backgroundColor: fill ? removeTransparency(fill) : DefaultColor,
+        backgroundColor: isGradientObject(fill) ? fill : fill ? removeTransparency(fill) : DefaultColor,
         // borderColor: fill,
         borderWidth: 0
       }
     };
   },
-  last: function (item, seriesModel, backgroundColor) {
+  last: function (item, seriesModel, height, backgroundColor) {
     var _a;
     var seriesData = seriesModel.getData();
     var count = seriesData.count(true);
@@ -124,9 +147,9 @@ var markerTypeCalculator = {
     var lastItem = seriesData.count() - 1;
     var fill = (_a = seriesData.getItemVisual(lastItem, 'style')) === null || _a === void 0 ? void 0 : _a.fill;
     if (isPlot(seriesModel.subType)) {
-      var isLinesPlot = seriesModel.subType === 'linesPlot';
+      var isLinesPlot = linePlotTypes.includes(seriesModel.subType);
       var dataItem = seriesData.getItemModel(lastItem);
-      fill = dataItem.get([isLinesPlot ? 'lineStyle' : 'itemStyle', 'color']);
+      fill = formatTextColor(dataItem.get([isLinesPlot ? 'lineStyle' : 'itemStyle', 'color']), height);
     } else if (isCandle(seriesModel.subType)) {
       var dataItem = seriesData.getItemModel(lastItem);
       var closeValue = seriesData.get('close', lastItem);
@@ -148,7 +171,7 @@ var markerTypeCalculator = {
       }
     };
   },
-  allLast: function (item, seriesModel, backgroundColor) {
+  allLast: function (item, seriesModel, height, backgroundColor) {
     var seriesData = seriesModel.getData();
     var count = seriesData.count(true);
     var axisModel = seriesModel.getBaseAxis();
@@ -156,9 +179,9 @@ var markerTypeCalculator = {
     var offset = seriesModel.get('offset') || 0;
     var lastIndex = extent[1] + offset;
     if (lastIndex >= count || lastIndex < 0) {
-      return markerTypeCalculator.rawLast(item, seriesModel, backgroundColor);
+      return markerTypeCalculator.rawLast(item, seriesModel, height, backgroundColor);
     }
-    return markerTypeCalculator.last(item, seriesModel, backgroundColor);
+    return markerTypeCalculator.last(item, seriesModel, height, backgroundColor);
   }
 };
 var inner = makeInner();
@@ -243,7 +266,7 @@ var MarkLabelView = /** @class */function (_super) {
           return;
         }
         var yCalcFn = markerTypeCalculator[item.type];
-        var _a = yCalcFn ? yCalcFn(item, seriesModel, backgroundColor) || {} : {
+        var _a = yCalcFn ? yCalcFn(item, seriesModel, height, backgroundColor) || {} : {
             value: item.value
           },
           value = _a.value,
@@ -686,15 +709,15 @@ function updateText(_a) {
 }
 var mistake = 0;
 function createLabel(_a) {
-  var _b, _c;
+  var _b;
   var x = _a.x,
     y = _a.y,
     labelData = _a.labelData,
     markerModel = _a.markerModel,
     gridRect = _a.gridRect,
     position = _a.position,
-    _d = _a.labelTextStyle,
-    labelTextStyle = _d === void 0 ? {} : _d,
+    _c = _a.labelTextStyle,
+    labelTextStyle = _c === void 0 ? {} : _c,
     fontSize = _a.fontSize;
   var zlevel = markerModel.option.zlevel;
   var lineStyle = labelData.lineStyle,
@@ -703,7 +726,7 @@ function createLabel(_a) {
     showTitle = labelData.showTitle,
     title = labelData.title,
     countDown = labelData.countDown;
-  var textStyle = Object.assign((_b = labelData.textStyle) !== null && _b !== void 0 ? _b : {}, {
+  var textStyle = Object.assign(__assign({}, labelData.textStyle), {
     fontSize: fontSize,
     padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)
   }, labelTextStyle);
@@ -712,7 +735,7 @@ function createLabel(_a) {
   var isLeft = position === 'left';
   var group = new graphicUtil.Group();
   var labelY = y;
-  var borderWidth = (_c = textStyle.borderWidth) !== null && _c !== void 0 ? _c : 0;
+  var borderWidth = (_b = textStyle.borderWidth) !== null && _b !== void 0 ? _b : 0;
   var font = getFont(textStyle, markerModel.ecModel);
   var countDownText = countDown && countDown.show && formatSeconds(countDown.value) || '';
   var renderText = countDownText.length > text.length ? countDownText : text;
@@ -720,6 +743,7 @@ function createLabel(_a) {
   var paddings = formatUtil.normalizeCssArray(textStyle.padding || 0);
   var textElWidth = textRect.width + paddings[1] + paddings[3];
   var textElx = isLeft ? x - textElWidth - borderWidth - 1 : x + borderWidth;
+  var formatLabelFill = getGradientColorByY(textStyle.fill, labelY);
   var textEl = new graphicUtil.Text({
     // x: textElx,
     // y: labelY,
@@ -728,7 +752,9 @@ function createLabel(_a) {
       width: textRect.width,
       x: textElx,
       y: labelY
-    }, textStyle),
+    }, textStyle, {
+      fill: formatLabelFill
+    }),
     z: 101,
     zlevel: zlevel,
     ignore: !showName
@@ -742,7 +768,9 @@ function createLabel(_a) {
       text: labelTitle,
       x: isLeft ? gridRect.x - borderWidth : getLeftTextX(gridRect.x + gridRect.width, labelTitle, textStyle, markerModel.ecModel) + borderWidth,
       y: labelY
-    }, textStyle),
+    }, textStyle, {
+      fill: formatLabelFill
+    }),
     z: 101,
     zlevel: zlevel,
     ignore: !showTitle
@@ -796,7 +824,7 @@ function createLabel(_a) {
   return group;
 }
 function updateLabel(_a) {
-  var _b, _c;
+  var _b;
   var x = _a.x,
     y = _a.y,
     labelData = _a.labelData,
@@ -804,8 +832,8 @@ function updateLabel(_a) {
     gridRect = _a.gridRect,
     position = _a.position,
     el = _a.el,
-    _d = _a.labelTextStyle,
-    labelTextStyle = _d === void 0 ? {} : _d,
+    _c = _a.labelTextStyle,
+    labelTextStyle = _c === void 0 ? {} : _c,
     fontSize = _a.fontSize;
   var lineStyle = labelData.lineStyle,
     showLine = labelData.showLine,
@@ -815,11 +843,11 @@ function updateLabel(_a) {
     countDown = labelData.countDown;
   // const lineStyle = Object.assign({}, labelData.lineStyle);
   // const textStyle = Object.assign(defaultLabelStyle, labelData.textStyle);
-  var textStyle = Object.assign((_b = labelData.textStyle) !== null && _b !== void 0 ? _b : {}, {
+  var textStyle = Object.assign(__assign({}, labelData.textStyle), {
     fontSize: fontSize,
     padding: getPaddingByStyle(fontSize, labelTextStyle.borderWidth)
   }, labelTextStyle);
-  var borderWidth = (_c = textStyle.borderWidth) !== null && _c !== void 0 ? _c : 0;
+  var borderWidth = (_b = textStyle.borderWidth) !== null && _b !== void 0 ? _b : 0;
   var isLeft = position === 'left';
   if (el.ignore) {
     el.ignore = false;
@@ -833,6 +861,7 @@ function updateLabel(_a) {
   var textElWidth = textRect.width + paddings[1] + paddings[3];
   var textElx = isLeft ? x - textElWidth - borderWidth - 1 : x + borderWidth;
   var labelY = y;
+  var formatLabelFill = getGradientColorByY(textStyle.fill, labelY);
   inner(el).y = labelY;
   each(el.children(), function (element) {
     var labelType = inner(element).labelType;
@@ -870,7 +899,9 @@ function updateLabel(_a) {
           width: textRect.width,
           x: textElx,
           y: labelY
-        }, textStyle));
+        }, textStyle, {
+          fill: formatLabelFill
+        }));
         element.ignore = false;
         break;
       case 'nameLabel':
@@ -886,7 +917,9 @@ function updateLabel(_a) {
           text: labelTitle,
           x: nameX,
           y: labelY
-        }, textStyle));
+        }, textStyle, {
+          fill: formatLabelFill
+        }));
         element.ignore = false;
         break;
       case 'countDown':

package/lib/util/color.js

@@ -24,6 +24,7 @@
  */
 
 import { colorToRgba } from 'tvrender/lib/core/util.js';
+var round = Math.round;
 // function parseColor(color: string): [number, number, number] {
 //     // 移除可能存在的#号
 //     if (color.startsWith('#')) {
@@ -199,4 +200,26 @@ function parseColorToRgba(color) {
 function rgbToHex(r, g, b) {
   return "#" + Math.round(r).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0');
 }
-export { colorToRgba, removeTransparency, contrastColor, isColorSimilarManhattan, blendColors, getIsLightColor };
+/**
+ * 获取渐变色中指定比例的颜色
+ */
+function getGradientColorByY(color, y) {
+  if (typeof color === 'string' || color.type !== 'linear') {
+    return color;
+  }
+  var colorStops = color.colorStops,
+    y2 = color.y2;
+  var color1 = colorStops[0].color,
+    color2 = colorStops[1].color;
+  // 限制 ratio 在 [0,1] 区间
+  var t = Math.min(1, Math.max(0, y / y2));
+  var c1 = parseColorToRgba(color1);
+  var c2 = parseColorToRgba(color2);
+  // 线性插值
+  var r = c1.r + (c2.r - c1.r) * t;
+  var g = c1.g + (c2.g - c1.g) * t;
+  var b = c1.b + (c2.b - c1.b) * t;
+  var a = c1.a ? c1.a + (c2.a - c1.a) * t : 1;
+  return "rgba(" + round(r) + ", " + round(g) + ", " + round(b) + ", " + a.toFixed(2) + ")";
+}
+export { colorToRgba, removeTransparency, contrastColor, isColorSimilarManhattan, blendColors, getIsLightColor, getGradientColorByY };

package/lib/util/seriesType.js

@@ -27,7 +27,7 @@ var candleArr = ['candlestick', 'candlePlot', 'barPlot'];
 function isCandle(type) {
   return candleArr.includes(type);
 }
-var plotsArr = ['labels', 'linesPlot', 'charPlot', 'arrowsPlot'];
+var plotsArr = ['labels', 'linesPlot', 'charPlot', 'arrowsPlot', 'line'];
 function isPlot(type) {
   return plotsArr.includes(type);
 }

package/lib/util/states.js

@@ -667,7 +667,7 @@ export function getSeriesPointData(ecModel, payload) {
       if (fill) {
         color = fill;
       }
-    } else if (isPlot(seriesModel.subType)) {
+    } else if (isPlot(seriesModel.subType) && seriesModel.subType !== 'line') {
       var isLinesPlot = seriesModel.subType === 'linesPlot';
       var dataItem = data.getItemModel(index, isRaw);
       var fill = dataItem.get([isLinesPlot ? 'lineStyle' : 'itemStyle', 'color']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tvcharts",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "main": "dist/echarts.js",
   "module": "index.js",
   "jsdelivr": "dist/echarts.min.js",

package/types/dist/echarts.d.ts

@@ -8102,6 +8102,7 @@ interface IMarkLabelData {
     showTitle?: boolean;
     precision?: number;
     $action?: 'remove';
+    customColor?: boolean;
     countDown?: {
         value: number;
         show: boolean;

package/types/dist/shared.d.ts

@@ -8103,6 +8103,7 @@ interface IMarkLabelData {
     showTitle?: boolean;
     precision?: number;
     $action?: 'remove';
+    customColor?: boolean;
     countDown?: {
         value: number;
         show: boolean;

package/types/src/component/marker/MarkLabelModal.d.ts

@@ -22,6 +22,7 @@ export interface IMarkLabelData {
     showTitle?: boolean;
     precision?: number;
     $action?: 'remove';
+    customColor?: boolean;
     countDown?: {
         value: number;
         show: boolean;

package/types/src/util/color.d.ts

@@ -1,4 +1,5 @@
 import { colorToRgba } from 'tvrender/lib/core/util.js';
+import { ZRColor } from './types.js';
 declare function contrastColor(color: string): string;
 declare function getIsLightColor(color: string): boolean;
 declare function removeTransparency(color: string): string;
@@ -18,4 +19,8 @@ declare function isColorSimilarManhattan(rgbas1: number[], rgbas2: number[], thr
  * @returns 混合后的颜色（十六进制格式）
  */
 declare function blendColors(foreground: string, background: string): string;
-export { colorToRgba, removeTransparency, contrastColor, isColorSimilarManhattan, blendColors, getIsLightColor };
+/**
+ * 获取渐变色中指定比例的颜色
+ */
+declare function getGradientColorByY(color: ZRColor, y: number): string | import("tvrender/lib/graphic/Pattern").PatternObject | import("tvrender/lib/graphic/RadialGradient").RadialGradientObject;
+export { colorToRgba, removeTransparency, contrastColor, isColorSimilarManhattan, blendColors, getIsLightColor, getGradientColorByY };