@visactor/vchart 1.6.1-alpha.0 → 1.6.2

package/build/index.js

@@ -6889,31 +6889,22 @@
             palette: {
                 backgroundColor: '#ffffff',
                 borderColor: '#e3e5e8',
-                shadowColor: 'rgba(33,37,44,0.1)',
-                hoverBackgroundColor: '#f1f2f5',
-                sliderRailColor: '#f1f3f4',
-                sliderHandleColor: '#ffffff',
-                sliderTrackColor: '#0040ff',
-                popupBackgroundColor: '#ffffff',
+                shadowColor: '#21252c',
                 primaryFontColor: '#21252c',
                 secondaryFontColor: '#606773',
-                tertiaryFontColor: '#89909d',
-                axisLabelFontColor: '#89909d',
+                axisFontColor: '#89909d',
                 disableFontColor: '#bcc1cb',
-                axisMarkerFontColor: '#ffffff',
+                labelReverseFontColor: '#ffffff',
                 axisGridColor: '#f1f2f5',
                 axisDomainColor: '#d9dde4',
-                dataZoomHandleStrokeColor: '#aeb5be',
+                dataZoomHandlerStrokeColor: '#aeb5be',
+                dataZoomHandlerFillColor: '#ffffff',
+                dataZoomBackgroundColor: '#f1f3f4',
                 dataZoomChartColor: '#c9ced8',
-                playerControllerColor: '#0040ff',
+                dataZoomSelectedColor: '#0040ff',
                 scrollBarSliderColor: '#000000',
-                axisMarkerBackgroundColor: '#21252c',
-                markLabelBackgroundColor: '#f1f2f5',
-                markLineStrokeColor: '#606773',
-                dangerColor: '#e33232',
-                warningColor: '#ffc528',
-                successColor: '#07a35a',
-                infoColor: '#3073f2'
+                tooltipBackgroundColor: '#ffffff',
+                markLabelBackgroundColor: '#ffc528'
             }
         }
     };
@@ -13749,13 +13740,12 @@
         };
       }
       onBind() {
-        var _a, _b, _c, _d, _e, _f;
-        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1);
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        this.fromNumber = isNumber$2(null === (_a = this.from) || void 0 === _a ? void 0 : _a.text) ? null === (_b = this.from) || void 0 === _b ? void 0 : _b.text : Number.parseFloat(null === (_c = this.from) || void 0 === _c ? void 0 : _c.text), this.toNumber = isNumber$2(null === (_d = this.to) || void 0 === _d ? void 0 : _d.text) ? null === (_e = this.to) || void 0 === _e ? void 0 : _e.text : Number.parseFloat(null === (_f = this.to) || void 0 === _f ? void 0 : _f.text), Number.isFinite(this.toNumber) || (this.fromNumber = 0), Number.isFinite(this.toNumber) || (this.valid = !1), !1 !== this.valid && (this.decimalLength = null !== (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.fixed) && void 0 !== _h ? _h : Math.max(getDecimalPlaces(this.fromNumber), getDecimalPlaces(this.toNumber)));
       }
       onEnd() {}
       onUpdate(end, ratio, out) {
-        var _a, _b;
-        !1 !== this.valid && (out.text = end ? this.toNumber.toFixed() : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.fixed) && void 0 !== _b ? _b : 0));
+        !1 !== this.valid && (out.text = end ? this.toNumber : (this.fromNumber + (this.toNumber - this.fromNumber) * ratio).toFixed(this.decimalLength));
       }
     }
     var Direction$1;
@@ -31834,7 +31824,7 @@
         var _a;
         this.setAttribute("pickable", !1);
         const markerVisible = null === (_a = this.attribute.visible) || void 0 === _a || _a;
-        !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && (this._container ? (this._updateContainer(), this.updateMarker()) : (this._initContainer(), this.initMarker(this._container)));
+        !1 === this.attribute.interactive && this.setAttribute("childrenPickable", !1), markerVisible && (!this._container && this.isValidPoints() ? (this._initContainer(), this.initMarker(this._container)) : this.isValidPoints() ? (this._updateContainer(), this.updateMarker()) : (this._container = null, this.removeAllChild()));
       }
     }
 
@@ -32093,7 +32083,7 @@
         return this._label;
       }
       constructor(attributes) {
-        super(merge$1({}, MarkLine.defaultAttributes, attributes));
+        super(merge$1({}, MarkLine.defaultAttributes, attributes)), this.name = "markLine";
       }
       setLabelPos() {
         var _a, _b;
@@ -32185,6 +32175,12 @@
           dy: 0
         }, label)), this.setLabelPos();
       }
+      isValidPoints() {
+        const {
+          points: points
+        } = this.attribute;
+        return !(!points || points.length < 2);
+      }
     };
     MarkLine$1.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
@@ -32196,7 +32192,7 @@
         return this._label;
       }
       constructor(attributes) {
-        super(merge$1({}, MarkArea.defaultAttributes, attributes));
+        super(merge$1({}, MarkArea.defaultAttributes, attributes)), this.name = "markArea";
       }
       _getPositionByDirection(area, direction) {
         const {
@@ -32275,12 +32271,18 @@
           dy: 0
         }, label)), this.setLabelPos();
       }
+      isValidPoints() {
+        const {
+          points: points
+        } = this.attribute;
+        return !(!points || points.length < 3);
+      }
     };
     MarkArea$1.defaultAttributes = DEFAULT_MARK_AREA_THEME;
 
     let MarkPoint$1 = class MarkPoint extends Marker {
       constructor(attributes) {
-        super(merge$1({}, MarkPoint.defaultAttributes, attributes));
+        super(merge$1({}, MarkPoint.defaultAttributes, attributes)), this.name = "markPoint";
       }
       setLabelPos() {}
       setItemAttributes(item, itemContent, itemPosition, itemType) {
@@ -32439,6 +32441,9 @@
           };
         this.setItemLineAttr(itemLine, position, itemPosition, null == itemLine ? void 0 : itemLine.visible), this.setDecorativeLineAttr(itemLine, itemPosition, null === (_a = null == itemLine ? void 0 : itemLine.decorativeLine) || void 0 === _a ? void 0 : _a.visible), this.setItemAttributes(this._item, itemContent, itemPosition, type);
       }
+      isValidPoints() {
+        return !0;
+      }
     };
     MarkPoint$1.defaultAttributes = DEFAULT_MARK_POINT_THEME;
 
@@ -33989,8 +33994,8 @@
         } else niceType = "all";
         if (niceType) {
           const niceDomain = nice(originalDomain.slice(), {
-            floor: x => this._pows(Math.floor(this._logs(x))),
-            ceil: x => this._pows(Math.ceil(this._logs(x)))
+            floor: x => Math.floor(x),
+            ceil: x => Math.ceil(x)
           });
           return "min" === niceType ? niceDomain[niceDomain.length - 1] = null !== (_a = niceMinMax[1]) && void 0 !== _a ? _a : niceDomain[niceDomain.length - 1] : "max" === niceType && (niceDomain[0] = null !== (_b = niceMinMax[0]) && void 0 !== _b ? _b : niceDomain[0]), this._niceDomain = niceDomain, this.rescale(), this;
         }
@@ -34185,8 +34190,8 @@
         } else niceType = "all";
         if (niceType) {
           const niceDomain = nice(originalDomain.slice(), {
-            floor: x => this.untransformer(Math.floor(this.transformer(x))),
-            ceil: x => this.untransformer(Math.ceil(this.transformer(x)))
+            floor: x => Math.floor(x),
+            ceil: x => Math.ceil(x)
           });
           return "min" === niceType ? niceDomain[niceDomain.length - 1] = null !== (_a = niceMinMax[1]) && void 0 !== _a ? _a : niceDomain[niceDomain.length - 1] : "max" === niceType && (niceDomain[0] = null !== (_b = niceMinMax[0]) && void 0 !== _b ? _b : niceDomain[0]), this._niceDomain = niceDomain, this.rescale(), this;
         }
@@ -35179,7 +35184,7 @@
           subtextWidth = this._subTitle ? null === (_1 = this._subTitle) || void 0 === _1 ? void 0 : _1.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth),
           titleHeight = maintextHeight + (null !== (_2 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _2 ? _2 : subtextHeight);
-        if (isValid$1(width) && (titleWidth = width, null === (_3 = this._mainTitle) || void 0 === _3 || _3.setAttribute("maxLineWidth", width), null === (_4 = this._subTitle) || void 0 === _4 || _4.setAttribute("maxLineWidth", width)), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && (null === (_5 = this._mainTitle) || void 0 === _5 || _5.setAttribute("maxLineWidth", maxWidth), null === (_6 = this._subTitle) || void 0 === _6 || _6.setAttribute("maxLineWidth", maxWidth), null === (_7 = this._mainTitle) || void 0 === _7 || _7.setAttribute("maxWidth", maxWidth), null === (_8 = this._subTitle) || void 0 === _8 || _8.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && (null === (_9 = this._mainTitle) || void 0 === _9 || _9.setAttribute("maxHeight", maxHeight), null === (_10 = this._subTitle) || void 0 === _10 || _10.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth + parsedPadding[1] + parsedPadding[3], group.attribute.height = titleHeight + parsedPadding[0] + parsedPadding[2], isValid$1(align) || isValid$1(null == textStyle ? void 0 : textStyle.align)) {
+        if (isValid$1(width) && (titleWidth = width, null === (_3 = this._mainTitle) || void 0 === _3 || _3.setAttribute("maxLineWidth", width), null === (_4 = this._subTitle) || void 0 === _4 || _4.setAttribute("maxLineWidth", width)), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && (null === (_5 = this._mainTitle) || void 0 === _5 || _5.setAttribute("maxLineWidth", maxWidth), null === (_6 = this._subTitle) || void 0 === _6 || _6.setAttribute("maxLineWidth", maxWidth), null === (_7 = this._mainTitle) || void 0 === _7 || _7.setAttribute("maxWidth", maxWidth), null === (_8 = this._subTitle) || void 0 === _8 || _8.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && (null === (_9 = this._mainTitle) || void 0 === _9 || _9.setAttribute("maxHeight", maxHeight), null === (_10 = this._subTitle) || void 0 === _10 || _10.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, isValid$1(align) || isValid$1(null == textStyle ? void 0 : textStyle.align)) {
           const mainTitleAlign = (null == textStyle ? void 0 : textStyle.align) ? null == textStyle ? void 0 : textStyle.align : align,
             mainTitleWidth = null !== (_11 = null == textStyle ? void 0 : textStyle.width) && void 0 !== _11 ? _11 : maintextWidth;
           "left" === mainTitleAlign ? (null === (_12 = this._mainTitle) || void 0 === _12 || _12.setAttribute("x", 0), null === (_13 = this._mainTitle) || void 0 === _13 || _13.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (null === (_14 = this._mainTitle) || void 0 === _14 || _14.setAttribute("x", mainTitleWidth / 2), null === (_15 = this._mainTitle) || void 0 === _15 || _15.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (null === (_16 = this._mainTitle) || void 0 === _16 || _16.setAttribute("x", mainTitleWidth), null === (_17 = this._mainTitle) || void 0 === _17 || _17.setAttribute("textAlign", "right"));
@@ -38175,7 +38180,7 @@
         return 0;
       }
       getStaticCanvasCount() {
-        return 1;
+        return 999;
       }
       loadJson(url) {
         const jsonPromise = fetch(url).then(data => data.json());
@@ -48404,7 +48409,7 @@
             offset: 5,
             position: 'inside',
             style: {
-                fill: { type: 'palette', key: 'axisMarkerFontColor' }
+                fill: { type: 'palette', key: 'labelReverseFontColor' }
             },
             minLabel: {
                 position: minMaxPositionEnum.end
@@ -48635,7 +48640,7 @@
             visible: false,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisLabelFontColor' },
+                fill: { type: 'palette', key: 'axisFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48655,7 +48660,7 @@
             visible: false,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisLabelFontColor' },
+                fill: { type: 'palette', key: 'axisFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48712,7 +48717,7 @@
             space: 10,
             style: {
                 fontSize: THEME_CONSTANTS.l5FontSize,
-                fill: { type: 'palette', key: 'axisLabelFontColor' },
+                fill: { type: 'palette', key: 'axisFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1
             }
@@ -48788,7 +48793,7 @@
         visible: false,
         style: {
             fontWeight: 'normal',
-            fill: { type: 'palette', key: 'axisMarkerFontColor' },
+            fill: { type: 'palette', key: 'labelReverseFontColor' },
             fontSize: THEME_CONSTANTS.l5FontSize
         },
         labelBackground: {
@@ -48799,9 +48804,9 @@
                 right: 2
             },
             style: {
-                fill: { type: 'palette', key: 'axisMarkerBackgroundColor' },
+                fill: { type: 'palette', key: 'primaryFontColor' },
                 outerBorder: {
-                    stroke: { type: 'palette', key: 'axisMarkerBackgroundColor' },
+                    stroke: { type: 'palette', key: 'primaryFontColor' },
                     distance: 0,
                     lineWidth: 3
                 },
@@ -48828,7 +48833,7 @@
             type: 'line',
             visible: true,
             style: {
-                stroke: { type: 'palette', key: 'markLineStrokeColor' },
+                stroke: { type: 'palette', key: 'secondaryFontColor' },
                 opacity: 0.7,
                 lineDash: [2, 3]
             }
@@ -48854,15 +48859,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             background: {
                 size: 6,
                 style: {
-                    stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
+                    stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
                     cornerRadius: 2
                 }
             },
             icon: {
                 style: {
                     size: 4,
-                    fill: { type: 'palette', key: 'sliderHandleColor' },
-                    stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
+                    fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
+                    stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
                     symbolType: 'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
                     lineWidth: 0.5
                 }
@@ -48871,16 +48876,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         background: {
             size: 20,
             style: {
-                fill: { type: 'palette', key: 'sliderRailColor' },
+                fill: { type: 'palette', key: 'dataZoomBackgroundColor' },
                 lineWidth: 0
             }
         },
         selectedBackground: {
             style: {
-                fill: { type: 'palette', key: 'sliderTrackColor' },
+                fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                 fillOpacity: 0.1,
                 outerBorder: {
-                    stroke: { type: 'palette', key: 'sliderTrackColor' },
+                    stroke: { type: 'palette', key: 'dataZoomSelectedColor' },
                     strokeOpacity: 0.2,
                     distance: -0.5,
                     lineWidth: 1
@@ -48906,10 +48911,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         startHandler: {
             style: {
                 symbolType: DataZoomHandlerSymbolType,
-                fill: { type: 'palette', key: 'sliderHandleColor' },
+                fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
                 scaleX: 1.2,
                 scaleY: 1.2,
-                stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
+                stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
                 lineWidth: 1,
                 zIndex: 100
             }
@@ -48917,10 +48922,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         endHandler: {
             style: {
                 symbolType: DataZoomHandlerSymbolType,
-                fill: { type: 'palette', key: 'sliderHandleColor' },
+                fill: { type: 'palette', key: 'dataZoomHandlerFillColor' },
                 scaleX: 1.2,
                 scaleY: 1.2,
-                stroke: { type: 'palette', key: 'dataZoomHandleStrokeColor' },
+                stroke: { type: 'palette', key: 'dataZoomHandlerStrokeColor' },
                 lineWidth: 1,
                 zIndex: 100
             }
@@ -48975,7 +48980,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             visible: true,
             style: {
                 fontSize: THEME_CONSTANTS.l2FontSize,
-                fill: { type: 'palette', key: 'tertiaryFontColor' },
+                fill: { type: 'palette', key: 'secondaryFontColor' },
                 fontWeight: 'normal',
                 fillOpacity: 1,
                 textBaseline: 'top',
@@ -49043,7 +49048,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             shadowBlur: 12,
             shadowOffsetX: 0,
             shadowOffsetY: 4,
-            shadowColor: { type: 'palette', key: 'shadowColor' }
+            shadowColor: { type: 'palette', key: 'shadowColor', a: 0.3 }
         }
     };
     const colorLegend$1 = {
@@ -49051,14 +49056,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 width: 200,
                 height: 8,
                 style: {
-                    fill: { type: 'palette', key: 'sliderRailColor' }
+                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
                 }
             }, handler: handlerTheme$2 }),
         vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { rail: {
                 width: 8,
                 height: 200,
                 style: {
-                    fill: { type: 'palette', key: 'sliderRailColor' }
+                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
                 }
             }, handler: handlerTheme$2 })
     };
@@ -49086,10 +49091,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             background: {
                 state: {
                     selectedHover: {
-                        fill: { type: 'palette', key: 'hoverBackgroundColor' }
+                        fill: { type: 'palette', key: 'axisGridColor' }
                     },
                     unSelectedHover: {
-                        fill: { type: 'palette', key: 'hoverBackgroundColor' }
+                        fill: { type: 'palette', key: 'axisGridColor' }
                     }
                 }
             },
@@ -49133,9 +49138,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             outerBorder: {
                 lineWidth: 2,
                 distance: 0.8,
-                stroke: { type: 'palette', key: 'sliderTrackColor' }
+                stroke: { type: 'palette', key: 'dataZoomSelectedColor' }
             },
-            fill: { type: 'palette', key: 'sliderHandleColor' }
+            fill: { type: 'palette', key: 'dataZoomHandlerFillColor' }
         }
     };
     const sizeLegend$1 = {
@@ -49143,26 +49148,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fill: { type: 'palette', key: 'dataZoomChartColor' }
             }, track: {
                 style: {
-                    fill: { type: 'palette', key: 'sliderTrackColor', a: 0.8 }
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.8 }
                 }
             }, rail: {
                 width: 200,
                 height: 4,
                 style: {
-                    fill: { type: 'palette', key: 'sliderRailColor' }
+                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
                 }
             }, handler: handlerTheme$1 }),
         vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { sizeBackground: {
                 fill: { type: 'palette', key: 'dataZoomChartColor' }
             }, track: {
                 style: {
-                    fill: { type: 'palette', key: 'sliderTrackColor', a: 0.8 }
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.8 }
                 }
             }, rail: {
                 width: 4,
                 height: 200,
                 style: {
-                    fill: { type: 'palette', key: 'sliderRailColor' }
+                    fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
                 }
             }, handler: handlerTheme$1 })
     };
@@ -49241,7 +49246,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         line: {
             style: {
                 lineDash: [3, 3],
-                stroke: { type: 'palette', key: 'markLineStrokeColor' }
+                stroke: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         startSymbol: {
@@ -49249,9 +49254,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             symbolType: 'triangle',
             size: 10,
             style: {
-                fill: { type: 'palette', key: 'markLineStrokeColor' },
                 stroke: null,
-                lineWidth: 0
+                lineWidth: 0,
+                fill: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         endSymbol: {
@@ -49259,9 +49264,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             symbolType: 'triangle',
             size: 10,
             style: {
-                fill: { type: 'palette', key: 'markLineStrokeColor' },
                 stroke: null,
-                lineWidth: 0
+                lineWidth: 0,
+                fill: { type: 'palette', key: 'primaryFontColor' }
             }
         },
         label: {
@@ -49296,21 +49301,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 size: 5,
                 visible: true,
                 style: {
-                    fill: { type: 'palette', key: 'markLineStrokeColor' },
-                    stroke: null,
-                    lineWidth: 0
-                }
-            },
-            endSymbol: {
-                style: {
-                    fill: { type: 'palette', key: 'markLineStrokeColor' },
-                    stroke: null,
-                    lineWidth: 0
+                    fill: { type: 'palette', key: 'primaryFontColor' }
                 }
             },
             line: {
                 style: {
-                    stroke: { type: 'palette', key: 'markLineStrokeColor' }
+                    stroke: { type: 'palette', key: 'primaryFontColor' }
                 }
             }
         },
@@ -49329,17 +49325,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         slider: {
             space: 10,
             trackStyle: {
-                fill: { type: 'palette', key: 'sliderTrackColor' },
+                fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                 fillOpacity: 0.8
             },
             railStyle: {
-                fill: { type: 'palette', key: 'sliderRailColor' }
+                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
             },
             handlerStyle: {
                 size: 15,
                 stroke: { type: 'palette', key: 'backgroundColor' },
                 lineWidth: 2,
-                fill: { type: 'palette', key: 'playerControllerColor' }
+                fill: { type: 'palette', key: 'dataZoomSelectedColor' }
             }
         },
         controller: {
@@ -49348,7 +49344,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 space: 0,
                 style: {
                     size: 25,
-                    fill: { type: 'palette', key: 'playerControllerColor' },
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49357,7 +49353,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 space: 0,
                 style: {
                     size: 25,
-                    fill: { type: 'palette', key: 'playerControllerColor' },
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49367,7 +49363,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 position: 'start',
                 style: {
                     size: 12,
-                    fill: { type: 'palette', key: 'playerControllerColor' },
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                     fillOpacity: 0.8
                 }
             },
@@ -49377,7 +49373,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 position: 'end',
                 style: {
                     size: 12,
-                    fill: { type: 'palette', key: 'playerControllerColor' },
+                    fill: { type: 'palette', key: 'dataZoomSelectedColor' },
                     fillOpacity: 0.8
                 }
             }
@@ -49397,7 +49393,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         subtextStyle: {
             fontSize: THEME_CONSTANTS.l4FontSize,
             lineHeight: THEME_CONSTANTS.l4LineHeight,
-            fill: { type: 'palette', key: 'tertiaryFontColor' }
+            fill: { type: 'palette', key: 'secondaryFontColor' }
         }
     };
 
@@ -49413,9 +49409,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 right: 10,
                 bottom: 10
             },
-            backgroundColor: { type: 'palette', key: 'popupBackgroundColor' },
+            backgroundColor: { type: 'palette', key: 'tooltipBackgroundColor' },
             border: {
-                color: { type: 'palette', key: 'popupBackgroundColor' },
+                color: { type: 'palette', key: 'tooltipBackgroundColor' },
                 width: 0,
                 radius: 3
             },
@@ -49424,7 +49420,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: 4,
                 blur: 12,
                 spread: 0,
-                color: { type: 'palette', key: 'shadowColor' }
+                color: { type: 'palette', key: 'shadowColor', a: 0.1 }
             }
         },
         spaceRow: 6,
@@ -49470,17 +49466,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         },
         contentStyle: {
             fontSize: THEME_CONSTANTS.l5FontSize,
-            fill: { type: 'palette', key: 'primaryFontColor' }
+            fill: { type: 'palette', key: 'secondaryFontColor' }
         },
         panel: {
             visible: true,
-            fill: { type: 'palette', key: 'popupBackgroundColor' },
+            fill: { type: 'palette', key: 'tooltipBackgroundColor' },
             cornerRadius: 3,
             lineWidth: 0,
             shadowBlur: 12,
             shadowOffsetX: 0,
             shadowOffsetY: 4,
-            shadowColor: { type: 'palette', key: 'shadowColor' },
+            shadowColor: { type: 'palette', key: 'shadowColor', a: 0.1 },
             size: 0,
             space: 12
         }
@@ -49505,7 +49501,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         slider: {
             style: {
                 fill: { type: 'palette', key: 'scrollBarSliderColor' },
-                fillOpacity: 0.3
+                fillOpacity: 0.5
             }
         }
     };
@@ -49817,6 +49813,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return (_b = spec.direction) !== null && _b !== void 0 ? _b : 'vertical';
     }
 
+    const newTokenToLegacyToken = {
+        primaryFontColor: 'titleFontColor',
+        secondaryFontColor: 'labelFontColor'
+    };
+    const legacyTokenToNewToken = {
+        titleFontColor: 'primaryFontColor',
+        labelFontColor: 'secondaryFontColor'
+    };
+    function getUpgradedTokenValue(palette, key) {
+        const legacyKey = newTokenToLegacyToken[key];
+        if (legacyKey && palette[legacyKey]) {
+            return palette[legacyKey];
+        }
+        if (palette[key]) {
+            return palette[key];
+        }
+        const newKey = legacyTokenToNewToken[key];
+        if (newKey) {
+            return palette[newKey];
+        }
+        return undefined;
+    }
+
     function getDataScheme(colorScheme, seriesSpec) {
         var _a;
         if (!colorScheme) {
@@ -49879,12 +49898,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let color;
         const { palette } = scheme;
         if (isObject$2(palette)) {
-            color = (_a = palette[colorKey.key]) !== null && _a !== void 0 ? _a : colorKey.default;
+            color = (_a = getUpgradedTokenValue(palette, colorKey.key)) !== null && _a !== void 0 ? _a : colorKey.default;
         }
         if (!color) {
             return undefined;
         }
-        if ((!isValid$1(colorKey.a) && !isValid$1(colorKey.l)) || !isString$1(color)) {
+        if ((isNil$1(colorKey.a) && isNil$1(colorKey.l)) || !isString$1(color)) {
             return color;
         }
         let c = new Color(color);
@@ -49935,7 +49954,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         var _a, _b;
         const { type: seriesType } = seriesSpec !== null && seriesSpec !== void 0 ? seriesSpec : {};
         let scheme;
-        if (!seriesSpec || !isValid$1(seriesType)) {
+        if (!seriesSpec || isNil$1(seriesType)) {
             scheme = colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.default;
         }
         else {
@@ -49996,31 +50015,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             palette: {
                 backgroundColor: '#202226',
                 borderColor: '#404349',
-                shadowColor: 'rgba(0,0,0,0.1)',
-                hoverBackgroundColor: '#404349',
-                sliderRailColor: '#404349',
-                sliderHandleColor: '#202226',
-                sliderTrackColor: '#4284FF',
-                popupBackgroundColor: '#404349',
+                shadowColor: '#000000',
                 primaryFontColor: '#fdfdfd',
-                secondaryFontColor: '#bbbdc3',
-                tertiaryFontColor: '#888c93',
-                axisLabelFontColor: '#888c93',
+                secondaryFontColor: '#888c93',
+                axisFontColor: '#bbbdc3',
                 disableFontColor: '#55595f',
-                axisMarkerFontColor: '#202226',
+                labelReverseFontColor: '#202226',
                 axisGridColor: '#404349',
                 axisDomainColor: '#4b4f54',
-                dataZoomHandleStrokeColor: '#bbbdc3',
+                dataZoomHandlerStrokeColor: '#888c93',
+                dataZoomHandlerFillColor: '#202226',
+                dataZoomBackgroundColor: '#404349',
                 dataZoomChartColor: '#55595F',
-                playerControllerColor: '#4284FF',
+                dataZoomSelectedColor: '#4284FF',
                 scrollBarSliderColor: '#ffffff',
-                axisMarkerBackgroundColor: '#fdfdfd',
-                markLabelBackgroundColor: '#404349',
-                markLineStrokeColor: '#bbbdc3',
-                dangerColor: '#eb4b4b',
-                warningColor: '#f0bd30',
-                successColor: '#14b267',
-                infoColor: '#4284ff'
+                tooltipBackgroundColor: '#404349',
+                markLabelBackgroundColor: '#f0bd30'
             }
         }
     };
@@ -57791,7 +57801,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.6.1-alpha.0";
+    const version = "1.6.2";
 
     class ChartData {
         get dataList() {
@@ -82863,7 +82873,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             maxKeyWidth -
                             keyStyle.spacing -
                             valueStyle.spacing;
-                    value.multiLine = true;
                     if (!value.maxWidth) {
                         value.maxWidth = Math.ceil(value.width);
                     }
@@ -83434,7 +83443,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         styleObj.lineHeight = getPixelPropertyStr(lineHeight);
         styleObj.fontWeight = fontWeight;
         styleObj.whiteSpace = multiLine ? 'initial' : 'nowrap';
-        styleObj.wordBreak = wordBreak;
+        styleObj.wordBreak = multiLine ? wordBreak !== null && wordBreak !== void 0 ? wordBreak : 'break-word' : 'normal';
         styleObj.maxWidth = getPixelPropertyStr(maxWidth);
         return styleObj;
     }
@@ -83759,7 +83768,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let childStyle = {};
                 if (this.className === 'key-box') {
                     const { key, isKeyAdaptive } = line;
-                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height), overflowWrap: 'normal' }, tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
                     const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$2(key);
                     if (!hasContent && !childStyle.visibility) {
                         childStyle.visibility = 'hidden';
@@ -83770,7 +83779,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'value-box') {
-                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
+                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height), overflowWrap: 'normal' }, tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'shape-box') {
@@ -90511,13 +90520,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return result;
         }
         getSizeFromUser(spec, type) {
-            var _a;
+            var _a, _b;
             const sizeList = type === 'col' ? this._colSize : this._rowSize;
-            if (!sizeList[spec[type]].isUserSetting) {
+            if (!((_a = sizeList[spec[type]]) === null || _a === void 0 ? void 0 : _a.isUserSetting)) {
                 return undefined;
             }
             let result = 0;
-            for (let index = spec[type]; index < spec[type] + ((_a = spec[`${type}Span`]) !== null && _a !== void 0 ? _a : 1); index++) {
+            for (let index = spec[type]; index < spec[type] + ((_b = spec[`${type}Span`]) !== null && _b !== void 0 ? _b : 1); index++) {
                 if (!sizeList[index].isUserSetting) {
                     return undefined;
                 }
@@ -90595,7 +90604,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chartViewBox = chartViewBox;
             this.clearLayoutSize();
             items.sort((a, b) => b.layoutLevel - a.layoutLevel);
-            const normalItems = items.filter(item => item.layoutType === 'normal');
+            const normalItems = items.filter(item => item.layoutType === 'normal' && item.getVisible() !== false);
             const normalItemsCol = normalItems.filter(item => isColItem(item));
             const normalItemsRow = normalItems.filter(item => !isColItem(item));
             normalItems.forEach(item => {