diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index e0ad444a36..ee4e244cf7 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -305,7 +305,7 @@ export default class CustomChartView extends ChartView {
         }
 
         // Enable to give a name on a group made by `renderItem`, and listen
-        // events that triggerd by its descendents.
+        // events that are triggered by its descendents.
         while ((targetEl = (targetEl.__hostTarget || targetEl.parent)) && targetEl !== this.group) {
             if (targetEl.name === elementName) {
                 return true;
@@ -382,23 +382,23 @@ function createEl(elOption: CustomElementOption): Element {
  * ----------------------------------------------------------
  * [STRATEGY_MERGE] Merge properties or erase all properties:
  *
- * Based on the fact that the existing zr element probably be reused, we now consider whether
- * merge or erase all properties to the exsiting elements.
- * That is, if a certain props is not specified in the lastest return of `renderItem`:
+ * Based on the fact that the existing zr element probably is reused, we now consider whether
+ * merge or erase all properties to the existing elements.
+ * That is, if a certain props is not specified in the latest return of `renderItem`:
  * + "Merge" means that do not modify the value on the existing element.
  * + "Erase all" means that use a default value to the existing element.
  *
- * "Merge" might bring some unexpected state retaining for users and "erase all" seams to be
- * more safe. "erase all" force users to specify all of the props each time, which is recommanded
+ * "Merge" might bring some unexpected state retaining for users and "erase all" seems to be
+ * more safe. "erase all" forces users to specify all of the props each time, which is recommended
  * in most cases.
  * But "erase all" theoretically disables the chance of performance optimization (e.g., just
  * generete shape and style at the first time rather than always do that).
  * So we still use "merge" rather than "erase all". If users need "erase all", they can
- * simple always set all of the props each time.
+ * simply always set all of the props each time.
  * Some "object-like" config like `textConfig`, `textContent`, `style` which are not needed for
- * every elment, so we replace them only when user specify them. And the that is a total replace.
+ * every element, so we replace them only when users specify them. And that is a total replace.
  *
- * TODO: there is no hint of 'isFirst' to users. So the performance enhancement can not be
+ * TODO: There is no hint of 'isFirst' to users. So the performance enhancement cannot be
  * performed yet. Consider the case:
  * (1) setOption to "mergeChildren" with a smaller children count
  * (2) Use dataZoom to make an item disappear.
@@ -412,7 +412,7 @@ function createEl(elOption: CustomElementOption): Element {
  * So we  trade a {xx: null} or {xx: undefined} as "not specified" if possible rather than
  * "set them to null/undefined". In most cases, props can not be cleared. Some typicall
  * clearable props like `style`/`textConfig`/`textContent` we enable `false` to means
- * "clear". In some othere special cases that the prop is able to set as null/undefined,
+ * "clear". In some other special cases that the prop is able to set as null/undefined,
  * but not suitable to use `false`, `hasOwnProperty` is checked.
  *
  * ---------------------------------------------
@@ -526,7 +526,7 @@ function updateElOnState(
             }
         }
         else {
-            // style is needed to enable defaut emphasis.
+            // style is needed to enable default emphasis.
             stateObj.style = styleOpt || null;
         }
         // If `elOption.styleEmphasis` or `elOption.emphasis.style` is `false`,
@@ -732,9 +732,9 @@ function makeRenderItem(
     }
 
     /**
-     * @deprecated The orgininal intention of `api.style` is enable to set itemStyle
-     * like other series. But it not necessary and not easy to give a strict definition
-     * of what it return. And since echarts5 it needs to be make compat work. So
+     * @deprecated The original intention of `api.style` is enable to set itemStyle
+     * like other series. But it is not necessary and not easy to give a strict definition
+     * of what it returns. And since echarts5 it needs to be make compat work. So
      * deprecates it since echarts5.
      *
      * By default, `visual` is applied to style (to support visualMap).
@@ -767,7 +767,7 @@ function makeRenderItem(
 
         const opt = {inheritColor: isString(visualColor) ? visualColor : '#000'};
         const labelModel = getLabelModel(dataIndexInside, NORMAL);
-        // Now that the feture of "auto adjust text fill/stroke" has been migrated to zrender
+        // Now that the feature of "auto adjust text fill/stroke" has been migrated to zrender
         // since ec5, we should set `isAttached` as `false` here and make compat in
         // `convertToEC4StyleForCustomSerise`.
         const textStyle = labelStyleHelper.createTextStyle(labelModel, null, opt, false, true);
@@ -1134,7 +1134,7 @@ function doCreateOrUpdateAttachedTx(
     isInit: boolean,
     attachedTxInfo: AttachedTxInfo
 ): void {
-    // group do not support textContent temporarily untill necessary.
+    // Group does not support textContent temporarily until necessary.
     if (el.isGroup) {
         return;
     }
@@ -1143,7 +1143,7 @@ function doCreateOrUpdateAttachedTx(
     processTxInfo(elOption, null, attachedTxInfo);
     processTxInfo(elOption, EMPHASIS, attachedTxInfo);
 
-    // If `elOption.textConfig` or `elOption.textContent` is null/undefined, it does not make sence.
+    // If `elOption.textConfig` or `elOption.textContent` is null/undefined, it does not make sense.
     // So for simplicity, if "elOption hasOwnProperty of them but be null/undefined", we do not
     // trade them as set to null to el.
     // Especially:
@@ -1232,7 +1232,7 @@ function processTxInfo(
         // `textContent: {type: 'text'}`, the "type" is easy to be missing. So we tolerate it.
         !txConOptNormal.type && (txConOptNormal.type = 'text');
         if (__DEV__) {
-            // Do not tolerate incorret type for forward compat.
+            // Do not tolerate incorrcet type for forward compat.
             assert(
                 txConOptNormal.type === 'text',
                 'textContent.type must be "text"'
@@ -1281,9 +1281,9 @@ function retrieveStyleOptionOnState(
 //     the element at the same index, if exists. On the other hand, if the new
 //     child is and empty object `{}`, it means to keep the element not changed.
 //
-// For implementation simpleness, do not provide a direct way to remove sinlge
-// child (otherwise the total indicies of the children array have to be modified).
-// User can remove a single child by set its `ignore` as `true`.
+// For implementation simpleness, do not provide a direct way to remove single
+// child (otherwise the total indices of the children array have to be modified).
+// User can remove a single child by setting its `ignore` to `true`.
 function mergeChildren(
     api: ExtensionAPI,
     el: graphicUtil.Group,
diff --git a/src/chart/graph/forceHelper.ts b/src/chart/graph/forceHelper.ts
index 5e83a9b33f..71f1c564ca 100644
--- a/src/chart/graph/forceHelper.ts
+++ b/src/chart/graph/forceHelper.ts
@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * Some formulas were originally copied from "d3.js" with some
 * modifications made for this project.
 * (See more details in the comment of the method "step" below.)
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 45414fb386..daf1cbfb52 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -404,7 +404,7 @@ function canShowAllSymbolForCategory(
     categoryAxis: Axis2D,
     data: SeriesData
 ) {
-    // In mose cases, line is monotonous on category axis, and the label size
+    // In most cases, line is monotonous on category axis, and the label size
     // is close with each other. So we check the symbol size and some of the
     // label size alone with the category axis to estimate whether all symbol
     // can be shown without overlap.
@@ -778,7 +778,7 @@ class LineView extends ChartView {
             }
 
             // Always update, or it is wrong in the case turning on legend
-            // because points are not changed
+            // because points are not changed.
             showSymbol && symbolDraw.updateData(data, {
                 isIgnore: isIgnoreFunc,
                 clipShape: clipShapeForSymbol,
@@ -788,8 +788,8 @@ class LineView extends ChartView {
                 }
             });
 
-            // In the case data zoom triggerred refreshing frequently
-            // Data may not change if line has a category axis. So it should animate nothing
+            // In the case data zoom triggered refreshing frequently
+            // Data may not change if line has a category axis. So it should animate nothing.
             if (!isPointsSame(this._stackedOnPoints, stackedOnPoints)
                 || !isPointsSame(this._points, points)
             ) {
@@ -943,7 +943,7 @@ class LineView extends ChartView {
                     // Null data
                     return;
                 }
-                // fix #11360: should't draw symbol outside clipShapeForSymbol
+                // fix #11360: shouldn't draw symbol outside clipShapeForSymbol
                 if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(x, y)) {
                     return;
                 }
diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index c65aa6bfb0..157678f412 100644
--- a/src/chart/map/MapSeries.ts
+++ b/src/chart/map/MapSeries.ts
@@ -287,8 +287,8 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         aspectScale: null,
 
         // Layout with center and size
-        // If you wan't to put map in a fixed size box with right aspect ratio
-        // This two properties may more conveninet
+        // If you want to put map in a fixed size box with right aspect ratio
+        // This two properties may be more convenient.
         // layoutCenter: [50%, 50%]
         // layoutSize: 100
 
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 4ed96f3ac3..934b49cadc 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -288,12 +288,12 @@ function constrainTextWidth(
         const oldHeight = textRect.height;
         if (overflow && overflow.match('break')) {
             // Temporarily set background to be null to calculate
-            // the bounding box without backgroud.
+            // the bounding box without background.
             label.setStyle('backgroundColor', null);
             // Set constraining width
             label.setStyle('width', availableWidth - paddingH);
 
-            // This is the real bounding box of the text without padding
+            // This is the real bounding box of the text without padding.
             const innerRect = label.getBoundingRect();
 
             label.setStyle('width', Math.ceil(innerRect.width));
diff --git a/src/chart/sunburst/SunburstSeries.ts b/src/chart/sunburst/SunburstSeries.ts
index 0887e2fd7f..402de0110d 100644
--- a/src/chart/sunburst/SunburstSeries.ts
+++ b/src/chart/sunburst/SunburstSeries.ts
@@ -238,7 +238,7 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
             rotate: 'radial',
             show: true,
             opacity: 1,
-            // 'left' is for inner side of inside, and 'right' is for outter
+            // 'left' is for inner side of inside, and 'right' is for outer
             // side for inside
             align: 'center',
             position: 'inside',
@@ -269,7 +269,7 @@ class SunburstSeriesModel extends SeriesModel<SunburstSeriesOption> {
             }
         },
 
-        // Animation type canbe expansion, scale
+        // Animation type can be expansion, scale.
         animationType: 'expansion',
         animationDuration: 1000,
         animationDurationUpdate: 500,
diff --git a/src/chart/themeRiver/ThemeRiverSeries.ts b/src/chart/themeRiver/ThemeRiverSeries.ts
index f1fb0bc495..31e5b0ad37 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.ts
+++ b/src/chart/themeRiver/ThemeRiverSeries.ts
@@ -156,7 +156,7 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
 
     /**
      * @override
-     * @param  option  the initial option that user gived
+     * @param  option  the initial option that user gave
      * @param  ecModel  the model object for themeRiver option
      */
     getInitialData(option: ThemeRiverSeriesOption, ecModel: GlobalModel): SeriesData {
@@ -326,4 +326,4 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
     };
 }
 
-export default ThemeRiverSeriesModel;
\ No newline at end of file
+export default ThemeRiverSeriesModel;
diff --git a/src/chart/tree/layoutHelper.ts b/src/chart/tree/layoutHelper.ts
index 1c56275a31..2aada604ec 100644
--- a/src/chart/tree/layoutHelper.ts
+++ b/src/chart/tree/layoutHelper.ts
@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * The tree layoutHelper implementation was originally copied from
 * "d3.js"(https://github.com/d3/d3-hierarchy) with
 * some modifications made for this project.
@@ -328,4 +328,4 @@ function defaultSeparation(node1: TreeLayoutNode, node2: TreeLayoutNode): number
 
 interface SeparationFunc {
     (node1: TreeLayoutNode, node2: TreeLayoutNode): number
-}
\ No newline at end of file
+}
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index 9207d88f18..9e4dc340aa 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -46,7 +46,7 @@ import { normalizeToArray } from '../../util/model';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 import enableAriaDecalForTree from '../helper/enableAriaDecalForTree';
 
-// Only support numberic value.
+// Only support numeric value.
 type TreemapSeriesDataValue = number | number[];
 
 interface BreadcrumbItemStyleOption extends ItemStyleOption {
@@ -113,7 +113,7 @@ export interface TreemapSeriesVisualOption {
     colorAlpha?: number[] | 'none'
     colorSaturation?: number[] | 'none'
     // A color list for a level. Each node in the level will obtain a color from the color list.
-    // Only suuport ColorString for interpolation
+    // Only support ColorString for interpolation.
     // color?: ColorString[]
 
     /**
@@ -191,7 +191,7 @@ export interface TreemapSeriesOption
      * Leaf node click behaviour: 'zoomToNode', 'link', false.
      * If leafDepth is set and clicking a node which has children but
      * be on left depth, the behaviour would be changing root. Otherwise
-     * use behavious defined above.
+     * use behaviour defined above.
      */
     nodeClick?: 'zoomToNode' | 'link' | false
 
@@ -281,7 +281,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             // Do not use textDistance, for ellipsis rect just the same as treemap node rect.
             distance: 0,
             padding: 5,
-            position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
+            position: 'inside', // Can be [5, '5%'] or position string like 'insideTopLeft', ...
             // formatter: null,
             color: '#fff',
             overflow: 'truncate'
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index 02c8f3bcee..b4f159dc24 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -254,9 +254,9 @@ class TreemapView extends ChartView {
             );
         }
 
-        // Notice: when thisTree and oldTree are the same tree (see list.cloneShallow),
-        // the oldTree is actually losted, so we can not find all of the old graphic
-        // elements from tree. So we use this stragegy: make element storage, move
+        // Notice: When thisTree and oldTree are the same tree (see list.cloneShallow),
+        // the oldTree is actually losted, so we cannot find all of the old graphic
+        // elements from tree. So we use this strategy: make element storage, move
         // from old storage to new storage, clear old storage.
 
         dualTravel(
@@ -684,7 +684,7 @@ class TreemapView extends ChartView {
                 const point = bgEl.transformCoordToLocal(x, y);
                 const shape = bgEl.shape;
 
-                // For performance consideration, dont use 'getBoundingRect'.
+                // For performance consideration, don't use 'getBoundingRect'.
                 if (shape.x <= point[0]
                     && point[0] <= shape.x + shape.width
                     && shape.y <= point[1]
@@ -1098,9 +1098,9 @@ function renderNode(
 
 }
 
-// We can not set all backgroud with the same z, Because the behaviour of
+// We cannot set all background with the same z, because the behaviour of
 // drill down and roll up differ background creation sequence from tree
-// hierarchy sequence, which cause that lowser background element overlap
+// hierarchy sequence, which cause lower background elements to overlap
 // upper ones. So we calculate z based on depth.
 // Moreover, we try to shrink down z interval to [0, 1] to avoid that
 // treemap with large z overlaps other components.
diff --git a/src/chart/treemap/treemapLayout.ts b/src/chart/treemap/treemapLayout.ts
index 26003794b0..62872f37b2 100644
--- a/src/chart/treemap/treemapLayout.ts
+++ b/src/chart/treemap/treemapLayout.ts
@@ -18,7 +18,7 @@
 */
 
 /*
-* A third-party license is embeded for some of the code in this file:
+* A third-party license is embedded for some of the code in this file:
 * The treemap layout implementation was originally copied from
 * "d3.js" with some modifications made for this project.
 * (See more details in the comment of the method "squarify" below.)
@@ -573,7 +573,7 @@ function estimateRootSize(
     containerHeight: number
 ) {
     // If targetInfo.node exists, we zoom to the node,
-    // so estimate whold width and heigth by target node.
+    // so estimate whole width and height by target node.
     let currNode = (targetInfo || {}).node;
     const defaultSize = [containerWidth, containerHeight];
 
@@ -616,7 +616,7 @@ function estimateRootSize(
     return [containerWidth * scale, containerHeight * scale];
 }
 
-// Root postion base on coord of containerGroup
+// Root position based on coord of containerGroup
 function calculateRootPosition(
     layoutInfo: layout.LayoutRect,
     rootRect: RectLike,
diff --git a/src/chart/treemap/treemapVisual.ts b/src/chart/treemap/treemapVisual.ts
index 3554ceb86f..b7f710b824 100644
--- a/src/chart/treemap/treemapVisual.ts
+++ b/src/chart/treemap/treemapVisual.ts
@@ -226,16 +226,16 @@ function buildVisualMapping(
     return mapping;
 }
 
-// Notice: If we dont have the attribute 'colorRange', but only use
+// Notice: If we don't have the attribute 'colorRange', but only use
 // attribute 'color' to represent both concepts of 'colorRange' and 'color',
 // (It means 'colorRange' when 'color' is Array, means 'color' when not array),
 // this problem will be encountered:
-// If a level-1 node dont have children, and its siblings has children,
-// and colorRange is set on level-1, then the node can not be colored.
+// If a level-1 node doesn't have children, and its siblings have children,
+// and colorRange is set on level-1, then the node cannot be colored.
 // So we separate 'colorRange' and 'color' to different attributes.
 function getRangeVisual(nodeModel: NodeModel, name: keyof TreemapVisual) {
     // 'colorRange', 'colorARange', 'colorSRange'.
-    // If not exsits on this node, fetch from levels and series.
+    // If not exists on this node, fetch from levels and series.
     const range = nodeModel.get(name);
     return (isArray(range) && range.length) ? {
         name: name,
diff --git a/src/component/dataZoom/AxisProxy.ts b/src/component/dataZoom/AxisProxy.ts
index e7be785fca..19a14c9ba8 100644
--- a/src/component/dataZoom/AxisProxy.ts
+++ b/src/component/dataZoom/AxisProxy.ts
@@ -197,7 +197,7 @@ class AxisProxy {
         asc(percentWindow);
 
         // The windows from user calling of `dispatchAction` might be out of the extent,
-        // or do not obey the `min/maxSpan`, `min/maxValueSpan`. But we dont restrict window
+        // or do not obey the `min/maxSpan`, `min/maxValueSpan`. But we don't restrict window
         // by `zoomLock` here, because we see `zoomLock` just as a interaction constraint,
         // where API is able to initialize/modify the window size even though `zoomLock`
         // specified.
@@ -232,8 +232,8 @@ class AxisProxy {
     }
 
     /**
-     * Notice: reset should not be called before series.restoreData() called,
-     * so it is recommanded to be called in "process stage" but not "model init
+     * Notice: reset should not be called before series.restoreData() is called,
+     * so it is recommended to be called in "process stage" but not "model init
      * stage".
      */
     reset(dataZoomModel: DataZoomModel) {
diff --git a/src/component/dataZoom/DataZoomModel.ts b/src/component/dataZoom/DataZoomModel.ts
index bcaae6a101..0fd8d78015 100644
--- a/src/component/dataZoom/DataZoomModel.ts
+++ b/src/component/dataZoom/DataZoomModel.ts
@@ -291,7 +291,7 @@ class DataZoomModel<Opts extends DataZoomOption = DataZoomOption> extends Compon
             const refering = this.getReferringComponents(getAxisMainType(axisDim), MULTIPLE_REFERRING);
             // When user set axisIndex as a empty array, we think that user specify axisIndex
             // but do not want use auto mode. Because empty array may be encountered when
-            // some error occured.
+            // some error occurred.
             if (!refering.specified) {
                 return;
             }
@@ -577,8 +577,8 @@ class DataZoomModel<Opts extends DataZoomOption = DataZoomOption> extends Compon
 
 }
 /**
- * Retrieve the those raw params from option, which will be cached separately.
- * becasue they will be overwritten by normalized/calculated values in the main
+ * Retrieve those raw params from option, which will be cached separately,
+ * because they will be overwritten by normalized/calculated values in the main
  * process.
  */
 function retrieveRawOption<T extends DataZoomOption>(option: T) {
@@ -592,4 +592,4 @@ function retrieveRawOption<T extends DataZoomOption>(option: T) {
     return ret;
 }
 
-export default DataZoomModel;
\ No newline at end of file
+export default DataZoomModel;
diff --git a/src/component/graphic/GraphicModel.ts b/src/component/graphic/GraphicModel.ts
index bdbeb58199..fc9f220499 100644
--- a/src/component/graphic/GraphicModel.ts
+++ b/src/component/graphic/GraphicModel.ts
@@ -54,7 +54,7 @@ interface GraphicComponentBaseElementOption extends
     >>,
     /**
      * left/right/top/bottom: (like 12, '22%', 'center', default undefined)
-     * If left/rigth is set, shape.x/shape.cx/position will not be used.
+     * If left/right is set, shape.x/shape.cx/position will not be used.
      * If top/bottom is set, shape.y/shape.cy/position will not be used.
      * This mechanism is useful when you want to position a group/element
      * against the right side or the center of this container.
@@ -132,8 +132,8 @@ export interface GraphicComponentGroupOption
 
     /**
      * width/height: (can only be pixel value, default 0)
-     * Only be used to specify contianer(group) size, if needed. And
-     * can not be percentage value (like '33%'). See the reason in the
+     * Is only used to specify container (group) size, if needed. And
+     * cannot be a percentage value (like '33%'). See the reason in the
      * layout algorithm below.
      */
     width?: number;
@@ -316,9 +316,9 @@ function setLayoutInfoToExist(
         return;
     }
     existItem.hv = newElOption.hv = [
-        // Rigid body, dont care `width`.
+        // Rigid body, don't care about `width`.
         isSetLoc(newElOption, ['left', 'right']),
-        // Rigid body, dont care `height`.
+        // Rigid body, don't care about `height`.
         isSetLoc(newElOption, ['top', 'bottom'])
     ];
     // Give default group size. Otherwise layout error may occur.
diff --git a/src/component/graphic/install.ts b/src/component/graphic/install.ts
index 4251932ecc..40c0e2ef02 100644
--- a/src/component/graphic/install.ts
+++ b/src/component/graphic/install.ts
@@ -43,8 +43,8 @@ export function install(registers: EChartsExtensionInstallRegisters) {
                 option.graphic = [{ elements: graphicOption }];
             }
             else {
-                // Only one graphic instance can be instantiated. (We dont
-                // want that too many views are created in echarts._viewMap)
+                // Only one graphic instance can be instantiated. (We don't
+                // want that too many views are created in echarts._viewMap.)
                 option.graphic = [(option.graphic as any)[0]];
             }
         }
@@ -52,4 +52,4 @@ export function install(registers: EChartsExtensionInstallRegisters) {
             option.graphic = [{ elements: [graphicOption] }];
         }
     });
-}
\ No newline at end of file
+}
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 9c97f802dd..70a6fd59ff 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -247,7 +247,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
     readonly layoutMode = {
         type: 'box',
         // legend.width/height are maxWidth/maxHeight actually,
-        // whereas realy width/height is calculated by its content.
+        // whereas real width/height is calculated by its content.
         // (Setting {left: 10, right: 10} does not make sense).
         // So consider the case:
         // `setOption({legend: {left: 10});`
@@ -350,8 +350,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
          */
         this._availableNames = availableNames;
 
-        // If legend.data not specified in option, use availableNames as data,
-        // which is convinient for user preparing option.
+        // If legend.data is not specified in option, use availableNames as data,
+        // which is convenient for user preparing option.
         const rawData = this.get('data') || potentialData;
 
         const legendNameMap = zrUtil.createHashMap();
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 12ffaa1980..5b4a342599 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -69,7 +69,7 @@ class LegendView extends ComponentView {
 
     /**
      * If first rendering, `contentGroup.position` is [0, 0], which
-     * does not make sense and may cause unexepcted animation if adopted.
+     * does not make sense and may cause unexpected animation if adopted.
      */
     private _isFirstRender: boolean;
 
@@ -199,7 +199,7 @@ class LegendView extends ComponentView {
                 SeriesModel<SeriesOption & SymbolOptionMixin>;
 
             if (legendDrawnMap.get(name)) {
-                // Have been drawed
+                // Have been drawn
                 return;
             }
 
@@ -663,7 +663,7 @@ function dispatchSelectAction(
         name: seriesName != null ? seriesName : dataName
     });
     // highlight after select
-    // TODO higlight immediately may cause animation loss.
+    // TODO highlight immediately may cause animation loss.
     dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
 }
 
diff --git a/src/component/parallel/ParallelView.ts b/src/component/parallel/ParallelView.ts
index 7ba445e786..1d7a0c63aa 100644
--- a/src/component/parallel/ParallelView.ts
+++ b/src/component/parallel/ParallelView.ts
@@ -58,7 +58,7 @@ class ParallelView extends ComponentView {
     }
     /**
      * @internal
-     * @param {Object} [opt] If null, cancle the last action triggering for debounce.
+     * @param {Object} [opt] If null, cancel the last action triggering for debounce.
      */
     _throttledDispatchExpand(this: ParallelView, opt: Omit<ParallelAxisExpandPayload, 'type'>): void {
         this._dispatchExpand(opt);
@@ -105,7 +105,7 @@ const handlers: Partial<Record<ElementEventName, ElementEventHandler>> = {
             && (this._throttledDispatchExpand as ParallelView['_throttledDispatchExpand'] & ThrottleController)
                 .debounceNextCall(model.get('axisExpandDebounce'));
         this._throttledDispatchExpand(behavior === 'none'
-            ? null // Cancle the last trigger, in case that mouse slide out of the area quickly.
+            ? null // Cancel the last trigger, in case that mouse slide out of the area quickly.
             : {
                 axisExpandWindow: result.axisExpandWindow,
                 // Jumping uses animation, and sliding suppresses animation.
@@ -120,4 +120,4 @@ function checkTrigger(view: ParallelView, triggerOn: ParallelCoordinateSystemOpt
     return model.get('axisExpandable') && model.get('axisExpandTriggerOn') === triggerOn;
 }
 
-export default ParallelView;
\ No newline at end of file
+export default ParallelView;