tvcharts 0.6.11 → 0.6.13

package/index.js

@@ -51,7 +51,7 @@ export * from './lib/export/core.js';
 // not included in this list.
 // ----------------------------------------------
 import { SVGRenderer, CanvasRenderer } from './lib/export/renderers.js';
-import { LineChart, BarChart, PieChart, ScatterChart, RadarChart, MapChart, TreeChart, TreemapChart, GraphChart, GaugeChart, FunnelChart, ParallelChart, SankeyChart, BoxplotChart, CandlestickChart, EffectScatterChart, LinesChart, LinesPlotChart, HLinesChart, BgColorChart, HeatmapChart, PictorialBarChart, ThemeRiverChart, SunburstChart, CustomChart } from './lib/export/charts.js';
+import { LineChart, BarChart, PieChart, ScatterChart, RadarChart, MapChart, TreeChart, TreemapChart, GraphChart, GaugeChart, FunnelChart, ParallelChart, SankeyChart, BoxplotChart, CandlestickChart, EffectScatterChart, LinesChart, LinesPlotChart, LabelsChart, HLinesChart, BgColorChart, HeatmapChart, PictorialBarChart, ThemeRiverChart, SunburstChart, CustomChart } from './lib/export/charts.js';
 import { GridComponent, PolarComponent, GeoComponent, SingleAxisComponent, ParallelComponent, CalendarComponent, GraphicComponent, ToolboxComponent, TooltipComponent, AxisPointerComponent, BrushComponent, TitleComponent, TimelineComponent, MarkPointComponent, MarkLineComponent, MarkAreaComponent, MarkLabelComponent, LegendComponent, DataZoomComponent, DataZoomInsideComponent, DataZoomSliderComponent, VisualMapComponent, VisualMapContinuousComponent, VisualMapPiecewiseComponent, AriaComponent, DatasetComponent, TransformComponent } from './lib/export/components.js';
 import { UniversalTransition, LabelLayout } from './lib/export/features.js';
 // -----------------
@@ -72,7 +72,7 @@ use([SVGRenderer]);
 //         type: 'line' // or 'bar', 'pie', ...
 //     }]
 // });
-use([LineChart, BarChart, PieChart, ScatterChart, RadarChart, MapChart, TreeChart, TreemapChart, GraphChart, GaugeChart, FunnelChart, ParallelChart, SankeyChart, BoxplotChart, CandlestickChart, EffectScatterChart, LinesChart, LinesPlotChart, HLinesChart, BgColorChart, HeatmapChart, PictorialBarChart, ThemeRiverChart, SunburstChart, CustomChart]);
+use([LineChart, BarChart, PieChart, ScatterChart, RadarChart, MapChart, TreeChart, TreemapChart, GraphChart, GaugeChart, FunnelChart, ParallelChart, SankeyChart, BoxplotChart, CandlestickChart, EffectScatterChart, LinesChart, LinesPlotChart, LabelsChart, HLinesChart, BgColorChart, HeatmapChart, PictorialBarChart, ThemeRiverChart, SunburstChart, CustomChart]);
 // -------------------
 // Coordinate systems
 // -------------------

package/lib/chart/bgColor/BgColorView.js

@@ -96,7 +96,10 @@ var BgColorView = /** @class */function (_super) {
     graphic.traverseElements(this._bgColorGroup, cb);
   };
   BgColorView.prototype.remove = function (ecModel, api) {
-    this.group.remove(this._bgColorGroup);
+    if (this._bgColorGroup) {
+      this.group.remove(this._bgColorGroup);
+      this._bgColorGroup = null;
+    }
   };
   BgColorView.prototype.dispose = function (ecModel, api) {
     this.remove(ecModel, api);

package/lib/chart/helper/Symbol.js

@@ -51,6 +51,7 @@ import { extend } from 'zrender/lib/core/util.js';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
 import ZRImage from 'zrender/lib/graphic/Image.js';
 import { saveOldStyle } from '../../animation/basicTransition.js';
+var variableTypes = ['labelCenter', 'labelDown', 'labelUp', 'labelLeft', 'labelRight', 'labelLowerLeft', 'labelLowerRight', 'labelUpperLeft', 'labelUpperRight', 'arrowUp', 'arrowDown'];
 var Symbol = /** @class */function (_super) {
   __extends(Symbol, _super);
   function Symbol(data, idx, seriesScope, opts) {
@@ -61,6 +62,7 @@ var Symbol = /** @class */function (_super) {
   Symbol.prototype._createSymbol = function (symbolType, data, idx, symbolSize, keepAspect) {
     // Remove paths created before
     this.removeAll();
+    var isVariable = variableTypes.includes(symbolType);
     // let symbolPath = createSymbol(
     //     symbolType, -0.5, -0.5, 1, 1, color
     // );
@@ -68,15 +70,27 @@ var Symbol = /** @class */function (_super) {
     // and macOS Sierra, a circle stroke become a rect, no matter what
     // the scale is set. So we set width/height as 2. See #4150.
     var symbolPath = createSymbol(symbolType, -1, -1, 2, 2, null, keepAspect);
-    symbolPath.attr({
-      z2: 100,
-      culling: true,
-      scaleX: symbolSize[0] / 2,
-      scaleY: symbolSize[1] / 2
-    });
+    if (isVariable) {
+      symbolPath.attr({
+        z2: 100,
+        culling: true,
+        shape: {
+          width: symbolSize[0],
+          height: symbolSize[1]
+        }
+      });
+    } else {
+      symbolPath.attr({
+        z2: 100,
+        culling: true,
+        scaleX: symbolSize[0] / 2,
+        scaleY: symbolSize[1] / 2
+      });
+    }
     // Rewrite drift method
     symbolPath.drift = driftSymbol;
     this._symbolType = symbolType;
+    this._isVariable = isVariable;
     this.add(symbolPath);
   };
   /**
@@ -147,6 +161,14 @@ var Symbol = /** @class */function (_super) {
         scaleX: symbolSize[0] / 2,
         scaleY: symbolSize[1] / 2
       };
+      if (this._isVariable) {
+        target = {
+          shape: {
+            width: symbolSize[0],
+            height: symbolSize[1]
+          }
+        };
+      }
       disableAnimation ? symbolPath.attr(target) : graphic.updateProps(symbolPath, target, seriesModel, idx);
       saveOldStyle(symbolPath);
     }
@@ -162,8 +184,22 @@ var Symbol = /** @class */function (_super) {
             opacity: symbolPath.style.opacity
           }
         };
-        symbolPath.scaleX = symbolPath.scaleY = 0;
-        symbolPath.style.opacity = 0;
+        if (this._isVariable) {
+          target = {
+            shape: {
+              width: this._sizeX * 2,
+              height: this._sizeY * 2
+            },
+            style: {
+              // Always fadeIn. Because it has fadeOut animation when symbol is removed..
+              opacity: symbolPath.style.opacity
+            }
+          };
+          symbolPath.style.opacity = 0;
+        } else {
+          symbolPath.scaleX = symbolPath.scaleY = 0;
+          symbolPath.style.opacity = 0;
+        }
         graphic.initProps(symbolPath, target, seriesModel, idx);
       }
     }
@@ -217,6 +253,7 @@ var Symbol = /** @class */function (_super) {
     }
     cursorStyle && symbolPath.attr('cursor', cursorStyle);
     var symbolStyle = data.getItemVisual(idx, 'style');
+    // symbolStyle.stroke = symbolStyle.fill;
     var visualColor = symbolStyle.fill;
     if (symbolPath instanceof ZRImage) {
       var pathStyle = symbolPath.style;
@@ -254,7 +291,7 @@ var Symbol = /** @class */function (_super) {
       this._z2 = null;
     }
     var useNameLabel = opts && opts.useNameLabel;
-    // todo setLabelStyle性能不好 暂时用不到先注释
+    // todo setLabelStyle需要优化
     setLabelStyle(symbolPath, labelStatesModels, {
       labelFetcher: seriesModel,
       labelDataIndex: idx,
@@ -277,9 +314,15 @@ var Symbol = /** @class */function (_super) {
     var scaleRatio = hoverScale == null || hoverScale === true ? Math.max(1.1, 3 / this._sizeY)
     // PENDING: restrict hoverScale > 1? It seems unreasonable to scale down
     : isFinite(hoverScale) && hoverScale > 0 ? +hoverScale : 1;
-    // always set scale to allow resetting
-    emphasisState.scaleX = this._sizeX * scaleRatio;
-    emphasisState.scaleY = this._sizeY * scaleRatio;
+    if (this._isVariable) {
+      // always set scale to allow resetting
+      emphasisState.scaleX = scaleRatio;
+      emphasisState.scaleY = scaleRatio;
+    } else {
+      // always set scale to allow resetting
+      emphasisState.scaleX = this._sizeX * scaleRatio;
+      emphasisState.scaleY = this._sizeY * scaleRatio;
+    }
     this.setSymbolScale(1);
     toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
   };

package/lib/chart/helper/SymbolDraw.js

@@ -94,7 +94,8 @@ var SymbolDraw = /** @class */function () {
     var disableAnimation = opt.disableAnimation;
     var seriesScope = makeSeriesScope(data);
     var symbolUpdateOpt = {
-      disableAnimation: disableAnimation
+      disableAnimation: disableAnimation,
+      useNameLabel: opt.useNameLabel
     };
     var getSymbolPoint = opt.getSymbolPoint || function (idx) {
       return data.getItemLayout(idx);

package/lib/chart/labels/LabelsSeries.js

@@ -0,0 +1,109 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import createSeriesData from '../helper/createSeriesData.js';
+import SeriesModel from '../../model/Series.js';
+var LabelsSeriesModel = /** @class */function (_super) {
+  __extends(LabelsSeriesModel, _super);
+  function LabelsSeriesModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = LabelsSeriesModel.type;
+    return _this;
+  }
+  // hasSymbolVisual = true;
+  LabelsSeriesModel.prototype.getInitialData = function (option, ecModel) {
+    return createSeriesData(null, this, {
+      useEncodeDefaulter: true
+    });
+  };
+  LabelsSeriesModel.prototype.getProgressive = function () {
+    var progressive = this.option.progressive;
+    if (progressive == null) {
+      // PENDING
+      return this.option.large ? 5e3 : this.get('progressive');
+    }
+    return progressive;
+  };
+  LabelsSeriesModel.prototype.getProgressiveThreshold = function () {
+    var progressiveThreshold = this.option.progressiveThreshold;
+    if (progressiveThreshold == null) {
+      // PENDING
+      return this.option.large ? 1e4 : this.get('progressiveThreshold');
+    }
+    return progressiveThreshold;
+  };
+  LabelsSeriesModel.prototype.brushSelector = function (dataIndex, data, selectors) {
+    return selectors.point(data.getItemLayout(dataIndex));
+  };
+  LabelsSeriesModel.prototype.getZLevelKey = function () {
+    // Each progressive series has individual key.
+    return this.getData().count() > this.getProgressiveThreshold() ? this.id : '';
+  };
+  LabelsSeriesModel.type = 'series.labels';
+  LabelsSeriesModel.dependencies = ['grid', 'polar', 'geo', 'singleAxis', 'calendar'];
+  LabelsSeriesModel.defaultOption = {
+    coordinateSystem: 'cartesian2d',
+    // zlevel: 0,
+    z: 2,
+    legendHoverLink: true,
+    symbolSize: 10,
+    // symbolRotate: null,  // 图形旋转控制
+    large: false,
+    // Available when large is true
+    largeThreshold: 2000,
+    // cursor: null,
+    itemStyle: {
+      // opacity: 0.8
+      // color: 各异
+    },
+    // emphasis: {
+    //     scale: true
+    // },
+    // If clip the overflow graphics
+    // Works on cartesian / polar series
+    clip: true
+  };
+  return LabelsSeriesModel;
+}(SeriesModel);
+export default LabelsSeriesModel;

package/lib/chart/labels/LabelsView.js

@@ -0,0 +1,133 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { __extends } from "tslib";
+import SymbolDraw from '../helper/SymbolDraw.js';
+import LargeSymbolDraw from '../helper/LargeSymbolDraw.js';
+import pointsLayout from '../../layout/points.js';
+import ChartView from '../../view/Chart.js';
+var ScatterView = /** @class */function (_super) {
+  __extends(ScatterView, _super);
+  function ScatterView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+    _this.type = ScatterView.type;
+    return _this;
+  }
+  ScatterView.prototype.render = function (seriesModel, ecModel, api) {
+    var data = seriesModel.getData();
+    var symbolDraw = this._updateSymbolDraw(data, seriesModel);
+    symbolDraw.updateData(data, {
+      // TODO
+      // If this parameter should be a shape or a bounding volume
+      // shape will be more general.
+      // But bounding volume like bounding rect will be much faster in the contain calculation
+      clipShape: this._getClipShape(seriesModel)
+    });
+    this._finished = true;
+  };
+  ScatterView.prototype.incrementalPrepareRender = function (seriesModel, ecModel, api) {
+    var data = seriesModel.getData();
+    var symbolDraw = this._updateSymbolDraw(data, seriesModel);
+    symbolDraw.incrementalPrepareUpdate(data);
+    this._finished = false;
+  };
+  ScatterView.prototype.incrementalRender = function (taskParams, seriesModel, ecModel) {
+    this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData(), {
+      clipShape: this._getClipShape(seriesModel)
+    });
+    this._finished = taskParams.end === seriesModel.getData().count();
+  };
+  ScatterView.prototype.updateTransform = function (seriesModel, ecModel, api) {
+    var data = seriesModel.getData();
+    // Must mark group dirty and make sure the incremental layer will be cleared
+    // PENDING
+    this.group.dirty();
+    if (!this._finished || data.count() > 1e4) {
+      return {
+        update: true
+      };
+    } else {
+      var res = pointsLayout('').reset(seriesModel, ecModel, api);
+      if (res.progress) {
+        res.progress({
+          start: 0,
+          end: data.count(),
+          count: data.count()
+        }, data);
+      }
+      this._symbolDraw.updateLayout(data);
+    }
+  };
+  ScatterView.prototype.eachRendered = function (cb) {
+    this._symbolDraw && this._symbolDraw.eachRendered(cb);
+  };
+  ScatterView.prototype._getClipShape = function (seriesModel) {
+    if (!seriesModel.get('clip', true)) {
+      return;
+    }
+    var coordSys = seriesModel.coordinateSystem;
+    // PENDING make `0.1` configurable, for example, `clipTolerance`?
+    return coordSys && coordSys.getArea && coordSys.getArea(.1);
+  };
+  ScatterView.prototype._updateSymbolDraw = function (data, seriesModel) {
+    var symbolDraw = this._symbolDraw;
+    var pipelineContext = seriesModel.pipelineContext;
+    var isLargeDraw = pipelineContext.large;
+    if (!symbolDraw || isLargeDraw !== this._isLargeDraw) {
+      symbolDraw && symbolDraw.remove();
+      symbolDraw = this._symbolDraw = isLargeDraw ? new LargeSymbolDraw() : new SymbolDraw();
+      this._isLargeDraw = isLargeDraw;
+      this.group.removeAll();
+    }
+    this.group.add(symbolDraw.group);
+    return symbolDraw;
+  };
+  ScatterView.prototype.remove = function (ecModel, api) {
+    this._symbolDraw && this._symbolDraw.remove(true);
+    this._symbolDraw = null;
+  };
+  ScatterView.prototype.dispose = function () {};
+  ScatterView.type = 'labels';
+  return ScatterView;
+}(ChartView);
+export default ScatterView;

package/lib/chart/labels/install.js

@@ -0,0 +1,55 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import LabelsSeriesModel from './LabelsSeries.js';
+import LabelsView from './LabelsView.js';
+// import {install as installGridSimple} from '../../component/grid/installSimple.js';
+import layoutPoints from '../../layout/points.js';
+import labelsVisual from './labelsVisual.js';
+export function install(registers) {
+  // In case developer forget to include grid component
+  registers.registerSeriesModel(LabelsSeriesModel);
+  registers.registerChartView(LabelsView);
+  registers.registerLayout(layoutPoints('labels'));
+  registers.registerVisual(labelsVisual);
+}

package/lib/chart/labels/labelsVisual.js

@@ -0,0 +1,128 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { extend } from 'zrender/lib/core/util.js';
+var SYMBOL_PROPS_WITH_CB = ['symbol', 'symbolSize', 'symbolRotate', 'symbolOffset'];
+var SYMBOL_PROPS = SYMBOL_PROPS_WITH_CB.concat(['symbolKeepAspect']);
+var labelSymbols = ['labelDown', 'labelUp', 'labelLeft', 'labelRight', 'labelLowerLeft', 'labelLowerRight', 'labelUpperLeft', 'labelUpperRight', 'labelCenter'];
+var lineSymbols = ['xCross', 'lCross'];
+var padding = 10;
+var LabelsLayout = {
+  createOnAllSeries: true,
+  // For legend.
+  performRawSeries: true,
+  reset: function (seriesModel) {
+    // if (!seriesModel.hasSymbolVisual) {
+    //     return;
+    // }
+    // Only visible series has each data be visual encoded
+    // if (ecModel.isSeriesFiltered(seriesModel)) {
+    //     return;
+    // }
+    var data = seriesModel.getData();
+    var symbolOptions = {};
+    // const symbolOptionsCb = {} as Record<(typeof SYMBOL_PROPS_WITH_CB)[number], any>;
+    for (var i = 0; i < SYMBOL_PROPS_WITH_CB.length; i++) {
+      var symbolPropName = SYMBOL_PROPS_WITH_CB[i];
+      var val = seriesModel.get(symbolPropName);
+      symbolOptions[symbolPropName] = val;
+    }
+    symbolOptions.symbol = symbolOptions.symbol || seriesModel.defaultSymbol;
+    data.setVisual(extend({
+      // legendIcon: seriesModel.legendIcon || symbolOptions.symbol,
+      symbolKeepAspect: seriesModel.get('symbolKeepAspect')
+    }, symbolOptions));
+    function dataEach(data, idx) {
+      var itemModel = data.getItemModel(idx);
+      var symbol = itemModel.getShallow('symbol');
+      var symbolSize = itemModel.getShallow('symbolSize');
+      var symbolRotate = itemModel.getShallow('symbolRotate');
+      var symbolOffset = itemModel.getShallow('symbolOffset');
+      var symbolKeepAspect = itemModel.getShallow('symbolKeepAspect');
+      var style = itemModel.getModel('itemStyle').getItemStyle();
+      if (labelSymbols.includes(symbol)) {
+        var labelModel = itemModel.getModel('label');
+        var text = labelModel.get('formatter');
+        if (labelModel.get('show') && text) {
+          var rect = labelModel.getTextRect(text);
+          symbolSize = [rect.width + padding, rect.height + padding];
+          var align = labelModel.get('align');
+          if (align === 'left') {
+            labelModel.option.offset = [-rect.width / 2, 0];
+          } else if (align === 'right') {
+            labelModel.option.offset = [rect.width / 2, 0];
+          }
+        }
+        // const rect = textContain.getBoundingRect(
+        //     labelModel.getFont(),
+        // );
+      }
+      // if (!style.fill) {
+      //     style.fill = color;
+      // }
+      if (lineSymbols.includes(symbol)) {
+        style.stroke = style.fill;
+      }
+      data.setItemVisual(idx, {
+        symbol: symbol,
+        symbolSize: symbolSize,
+        symbolRotate: symbolRotate,
+        symbolOffset: symbolOffset,
+        symbolKeepAspect: symbolKeepAspect,
+        style: style
+      });
+      // for (let i = 0; i < SYMBOL_PROPS.length; i++) {
+      //     const symbolPropName = SYMBOL_PROPS[i]; 
+      //     const val = itemModel.getShallow(symbolPropName, true);
+      //     if (val != null) {
+      //         data.setItemVisual(idx, symbolPropName, val);
+      //     }
+      // }
+    }
+
+    return {
+      dataEach: data.hasItemOption ? dataEach : null
+    };
+  }
+};
+export default LabelsLayout;

package/lib/chart/labels.js

@@ -0,0 +1,46 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+import { use } from '../extension.js';
+import { install } from './labels/install.js';
+use(install);