diff --git a/src/data/Source.ts b/src/data/Source.ts
index a530a50811..a5783525a2 100644
--- a/src/data/Source.ts
+++ b/src/data/Source.ts
@@ -319,7 +319,7 @@ function determineSourceDimensions(
     let dimensionsDetectedCount;
     let startIndex: number;
 
-    // PEDING: could data be null/undefined here?
+    // PENDING: Could data be null/undefined here?
     // currently, if `dataset.source` not specified, error thrown.
     // if `series.data` not specified, nothing rendered without error thrown.
     // Should test these cases.
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index 13008a7642..fdb70665e1 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -321,7 +321,7 @@ function nearestPointOnPath(pt: Point, path: PathProxy, out: Point) {
     return minDist;
 }
 
-// Temporal varible for intermediate usage.
+// Temporal variable for intermediate usage.
 const pt0 = new Point();
 const pt1 = new Point();
 const pt2 = new Point();
@@ -673,4 +673,4 @@ export function getLabelLineStatesModels<LabelName extends string = 'labelLine'>
         statesModels[stateName] = itemModel.getModel([stateName, labelLineName]);
     }
     return statesModels;
-}
\ No newline at end of file
+}
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 622d574bed..007f080c4c 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -263,7 +263,7 @@ function setLabelStyle<TLabelDataIndex>(
 
         // PENDING: if there is many requirements that emphasis position
         // need to be different from normal position, we might consider
-        // auto slient is those cases.
+        // auto silent is those cases.
         textContent.silent = !!normalModel.getShallow('silent');
         // Keep x and y
         if (textContent.style.x != null) {
diff --git a/src/util/ECEventProcessor.ts b/src/util/ECEventProcessor.ts
index 3b1e20e088..a0d8e91a20 100644
--- a/src/util/ECEventProcessor.ts
+++ b/src/util/ECEventProcessor.ts
@@ -145,7 +145,7 @@ export class ECEventProcessor implements EventProcessor {
     }
 
     afterTrigger() {
-        // Make sure the eventInfo wont be used in next trigger.
+        // Make sure the eventInfo won't be used in next trigger.
         this.eventInfo = null;
     }
 };
diff --git a/src/util/KDTree.ts b/src/util/KDTree.ts
index e769acbf0a..0f521b04a8 100644
--- a/src/util/KDTree.ts
+++ b/src/util/KDTree.ts
@@ -42,10 +42,10 @@ class KDTreeNode<T> {
  * @constructor
  * @alias module:echarts/data/KDTree
  * @param {Array} points List of points.
- * each point needs an array property to repesent the actual data
+ * each point needs an array property to represent the actual data
  * @param {Number} [dimension]
  *        Point dimension.
- *        Default will use the first point's length as dimensiont
+ *        Default will use the first point's length as dimension.
  */
 
 class KDTree<T extends KDTreePoint> {
@@ -76,7 +76,7 @@ class KDTree<T extends KDTreePoint> {
     }
 
     /**
-     * Resursively build the tree
+     * Recursively build the tree.
      */
     private _buildTree(points: T[], left: number, right: number, axis: number): KDTreeNode<T> {
         if (right < left) {
@@ -284,4 +284,4 @@ class KDTree<T extends KDTreePoint> {
 }
 
 
-export default KDTree;
\ No newline at end of file
+export default KDTree;
diff --git a/src/util/clazz.ts b/src/util/clazz.ts
index b340fdb624..06249ab0b5 100644
--- a/src/util/clazz.ts
+++ b/src/util/clazz.ts
@@ -185,12 +185,12 @@ export function enableClassCheck(target: CheckableConstructor): void {
     };
 }
 
-// superCall should have class info, which can not be fetch from 'this'.
+// superCall should have class info, which can not be fetched from 'this'.
 // Consider this case:
 // class A has method f,
 // class B inherits class A, overrides method f, f call superApply('f'),
-// class C inherits class B, do not overrides method f,
-// then when method of class C is called, dead loop occured.
+// class C inherits class B, does not override method f,
+// then when method of class C is called, dead loop occurred.
 function superCall(this: any, context: any, methodName: string, ...args: any): any {
     return this.superClass.prototype[methodName].apply(context, args);
 }
@@ -242,11 +242,11 @@ export function enableClassManagement(
         clz: Constructor
     ): Constructor {
 
-        // `type` should not be a "instance memeber".
+        // `type` should not be a "instance member".
         // If using TS class, should better declared as `static type = 'series.pie'`.
         // otherwise users have to mount `type` on prototype manually.
         // For backward compat and enable instance visit type via `this.type`,
-        // we stil support fetch `type` from prototype.
+        // we still support fetch `type` from prototype.
         const componentFullType = (clz as any).type || clz.prototype.type;
 
         if (componentFullType) {
diff --git a/src/util/conditionalExpression.ts b/src/util/conditionalExpression.ts
index 9cbb36863f..9f7a613578 100644
--- a/src/util/conditionalExpression.ts
+++ b/src/util/conditionalExpression.ts
@@ -30,17 +30,17 @@ import {
 
 // PENDING:
 // (1) Support more parser like: `parser: 'trim'`, `parser: 'lowerCase'`, `parser: 'year'`, `parser: 'dayOfWeek'`?
-// (2) Support piped parser ?
+// (2) Support piped parser?
 // (3) Support callback parser or callback condition?
-// (4) At present do not support string expression yet but only stuctured expression.
+// (4) At present do not support string expression yet but only structured expression.
 
 
 /**
  * The structured expression considered:
  * (1) Literal simplicity
- * (2) Sementic displayed clearly
+ * (2) Semantic displayed clearly
  *
- * Sementic supports:
+ * Semantic supports:
  * (1) relational expression
  * (2) logical expression
  *
@@ -148,8 +148,8 @@ const RELATIONAL_EXPRESSION_OP_ALIAS_MAP = {
     '!=': 'ne',
     '<>': 'ne'
 
-    // Might mileading for sake of the different between '==' and '===',
-    // So dont support them.
+    // Might be misleading for sake of the difference between '==' and '===',
+    // so don't support them.
     // '==': 'eq',
     // '===': 'seq',
     // '!==': 'sne'
diff --git a/src/util/decal.ts b/src/util/decal.ts
index 83d6772b15..8304762389 100644
--- a/src/util/decal.ts
+++ b/src/util/decal.ts
@@ -155,7 +155,7 @@ export function createOrUpdatePatternFromDecal(
         (pattern as SVGPatternObject).svgHeight = pSize.height;
 
         /**
-         * Get minumum length that can make a repeatable pattern.
+         * Get minimum length that can make a repeatable pattern.
          *
          * @return {Object} pattern width and height
          */
@@ -169,7 +169,7 @@ export function createOrUpdatePatternFromDecal(
              * |-- -- -- -- -- -- -- -- ...
              * |---  ---  ---  ---  --- ...
              * |-- -- -- -- -- -- -- -- ...
-             * So the minumum length of X is 15,
+             * So the minimum length of X is 15,
              * which is the least common multiple of `3 + 2` and `2 + 1`
              * |---  ---  ---  |---  --- ...
              * |-- -- -- -- -- |-- -- -- ...
@@ -417,7 +417,7 @@ function normalizeDashArrayY(dash: DecalDashArrayY): number[] {
  * For example, a line with [4, 1] has a dash line of 4 and a space of 1 after
  * that, so the block length of this line is 5.
  *
- * @param {number[][]} dash dash arrary of X or Y
+ * @param {number[][]} dash dash array of X or Y
  * @return {number[]} block length of each line
  */
 function getLineBlockLengthX(dash: number[][]): number[] {
diff --git a/src/util/format.ts b/src/util/format.ts
index 8aa00685ad..afe9625b42 100644
--- a/src/util/format.ts
+++ b/src/util/format.ts
@@ -212,7 +212,7 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
     else {
         // Should better not to auto generate style name by auto-increment number here.
         // Because this util is usually called in tooltip formatter, which is probably
-        // called repeatly when mouse move and the auto-increment number increases fast.
+        // called repeatedly when mouse move and the auto-increment number increases fast.
         // Users can make their own style name by theirselves, make it unique and readable.
         const markerId = opt.markerId || 'markerX';
         return {
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index af8f469db5..70ad6d8b83 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -142,10 +142,10 @@ export function registerShape(name: string, ShapeClass: {new(): Path}) {
  * (2) In the features like `custom series`, `graphic component`, the user input
  * `{tpye: 'xxx'}` does not only specify shapes but also specify other graphic
  * elements like `'group'`, `'text'`, `'image'` or event `'path'`. Those names
- * are reserved names, that is, if some user register a shape named `'image'`,
+ * are reserved names, that is, if some user registers a shape named `'image'`,
  * the shape will not be used. If we intending to add some more reserved names
  * in feature, that might bring break changes (disable some existing user shape
- * names). But that case probably rearly happen. So we dont make more mechanism
+ * names). But that case probably rarely happens. So we don't make more mechanism
  * to resolve this issue here.
  *
  * @param name
@@ -430,8 +430,8 @@ export function groupTransition(
 }
 
 export function clipPointsByRect(points: vector.VectorArray[], rect: ZRRectLike): number[][] {
-    // FIXME: this way migth be incorrect when grpahic clipped by a corner.
-    // and when element have border.
+    // FIXME: This way might be incorrect when graphic clipped by a corner
+    // and when element has a border.
     return map(points, function (point) {
         let x = point[0];
         x = mathMax(x, rect.x);
@@ -634,7 +634,7 @@ export function traverseElements(els: Element | Element[] | undefined | null, cb
     }
 }
 
-// Register built-in shapes. These shapes might be overwirtten
+// Register built-in shapes. These shapes might be overwritten
 // by users, although we do not recommend that.
 registerShape('circle', Circle);
 registerShape('ellipse', Ellipse);
diff --git a/src/util/layout.ts b/src/util/layout.ts
index 1c30e72948..31445d83e0 100644
--- a/src/util/layout.ts
+++ b/src/util/layout.ts
@@ -302,13 +302,13 @@ export function getLayoutRect(
  * Logic:
  *     1. Scale (against origin point in parent coord)
  *     2. Rotate (against origin point in parent coord)
- *     3. Traslate (with el.position by this method)
- * So this method only fixes the last step 'Traslate', which does not affect
+ *     3. Translate (with el.position by this method)
+ * So this method only fixes the last step 'Translate', which does not affect
  * scaling and rotating.
  *
- * If be called repeatly with the same input el, the same result will be gotten.
+ * If be called repeatedly with the same input el, the same result will be gotten.
  *
- * Return true if the layout happend.
+ * Return true if the layout happened.
  *
  * @param el Should have `getBoundingRect` method.
  * @param positionInfo
diff --git a/src/util/model.ts b/src/util/model.ts
index 3fa332a02b..7b6ca499dd 100644
--- a/src/util/model.ts
+++ b/src/util/model.ts
@@ -132,9 +132,9 @@ export const TEXT_STYLE_OPTIONS = [
 // ]);
 
 /**
- * The method do not ensure performance.
+ * The method does not ensure performance.
  * data could be [12, 2323, {value: 223}, [1221, 23], {value: [2, 23]}]
- * This helper method retieves value from data.
+ * This helper method retrieves value from data.
  */
 export function getDataItemValue(
     dataItem: OptionDataItem
@@ -154,8 +154,8 @@ export function isDataItemOption(dataItem: OptionDataItem): boolean {
         // && !(dataItem[0] && isObject(dataItem[0]) && !(dataItem[0] instanceof Array));
 }
 
-// Compatible with previous definition: id could be number (but not recommanded).
-// number and string are trade the same when compare.
+// Compatible with previous definition: id could be number (but not recommended).
+// number and string are treated the same when compared.
 // number id will not be converted to string in option.
 // number id will be converted to string in component instance id.
 export interface MappingExistingItem {
@@ -201,17 +201,17 @@ type MappingToExistsMode = 'normalMerge' | 'replaceMerge' | 'replaceAll';
  *
  * Mode "replaceMege":
  *     (1) Only the id mapped components will be merged.
- *     (2) Other existing components (except internal compoonets) will be removed.
+ *     (2) Other existing components (except internal components) will be removed.
  *     (3) Other new options will be used to create new component.
- *     (4) The index of the existing compoents will not be modified.
+ *     (4) The index of the existing components will not be modified.
  *     That means their might be "hole" after the removal.
  *     The new components are created first at those available index.
  *
  * Mode "replaceAll":
  *     This mode try to support that reproduce an echarts instance from another
  *     echarts instance (via `getOption`) in some simple cases.
- *     In this senario, the `result` index are exactly the consistent with the `newCmptOptions`,
- *     which ensures the compoennt index referring (like `xAxisIndex: ?`) corrent. That is,
+ *     In this scenario, the `result` index are exactly the consistent with the `newCmptOptions`,
+ *     which ensures the component index referring (like `xAxisIndex: ?`) corrent. That is,
  *     the "hole" in `newCmptOptions` will also be kept.
  *     On the contrary, other modes try best to eliminate holes.
  *     PENDING: This is an experimental mode yet.
@@ -270,7 +270,7 @@ export function mappingToExists<T extends MappingExistingItem>(
     makeIdAndName(result);
 
     // The array `result` MUST NOT contain elided items, otherwise the
-    // forEach will ommit those items and result in incorrect result.
+    // forEach will omit those items and result in incorrect result.
     return result;
 }
 
@@ -286,7 +286,7 @@ function prepareResult<T extends MappingExistingItem>(
     }
 
     // Do not use native `map` to in case that the array `existings`
-    // contains elided items, which will be ommited.
+    // contains elided items, which will be omitted.
     for (let index = 0; index < existings.length; index++) {
         const existing = existings[index];
         // Because of replaceMerge, `existing` may be null/undefined.
@@ -423,7 +423,7 @@ function mappingInReplaceAllMode<T extends MappingExistingItem>(
 ): void {
     each(newCmptOptions, function (cmptOption) {
         // The feature "reproduce" requires "hole" will also reproduced
-        // in case that compoennt index referring are broken.
+        // in case that component index referring are broken.
         result.push({
             newOption: cmptOption,
             brandNew: true,
@@ -482,7 +482,7 @@ function makeIdAndName(
             return;
         }
 
-        // name can be overwitten. Consider case: axis.name = '20km'.
+        // Name can be overwritten. Consider case: axis.name = '20km'.
         // But id generated by name will not be changed, which affect
         // only in that case: setOption with 'not merge mode' and view
         // instance will be recreated, which can be accepted.
@@ -490,7 +490,7 @@ function makeIdAndName(
             ? makeComparableKey(opt.name)
             : existing
             ? existing.name
-            // Avoid diffferent series has the same name,
+            // Avoid that different series has the same name,
             // because name may be used like in color pallet.
             : DUMMY_COMPONENT_NAME_PREFIX + index;
 
@@ -912,7 +912,7 @@ export const SINGLE_REFERRING: QueryReferringOpt = { useDefault: true, enableAll
 export const MULTIPLE_REFERRING: QueryReferringOpt = { useDefault: false, enableAll: true, enableNone: true };
 
 export type QueryReferringOpt = {
-    // Whether to use the first componet as the default if none of index/id/name are specified.
+    // Whether to use the first component as the default if none of index/id/name are specified.
     useDefault?: boolean;
     // Whether to enable `'all'` on index option.
     enableAll?: boolean;
@@ -1093,4 +1093,4 @@ export function interpolateRawValues(
         }
         return interpolated;
     }
-}
\ No newline at end of file
+}
diff --git a/src/util/number.ts b/src/util/number.ts
index bf5b2562f0..cd6f42994b 100644
--- a/src/util/number.ts
+++ b/src/util/number.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 method "quantile" was copied from "d3.js".
 * (See more details in the comment of the method below.)
 * The use of the source code of this file is also subject to the terms
@@ -220,7 +220,7 @@ export function getPixelPrecision(dataExtent: [number, number], pixelExtent: [nu
 /**
  * Get a data of given precision, assuring the sum of percentages
  * in valueList is 1.
- * The largest remainer method is used.
+ * The largest remainder method is used.
  * https://en.wikipedia.org/wiki/Largest_remainder_method
  *
  * @param valueList a list of all data
@@ -241,7 +241,7 @@ export function getPercentWithPrecision(valueList: number[], idx: number, precis
 /**
  * Get a data of given precision, assuring the sum of percentages
  * in valueList is 1.
- * The largest remainer method is used.
+ * The largest remainder method is used.
  * https://en.wikipedia.org/wiki/Largest_remainder_method
  *
  * @param valueList a list of all data
@@ -342,7 +342,7 @@ const TIME_REG = /^(?:(\d{4})(?:[-\/](\d{1,2})(?:[-\/](\d{1,2})(?:[T ](\d{1,2})(
  *     + time zone: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00',
  *     all of which will be treated as local time if time zone is not specified
  *     (see <https://momentjs.com/>).
- *   + Or other string format, including (all of which will be treated as loacal time):
+ *   + Or other string format, including (all of which will be treated as local time):
  *     '2012', '2012-3-1', '2012/3/1', '2012/03/01',
  *     '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
  *   + a timestamp, which represent a time in UTC.
@@ -365,7 +365,7 @@ export function parseDate(value: unknown): Date {
             return new Date(NaN);
         }
 
-        // Use local time when no timezone offset specifed.
+        // Use local time when no timezone offset is specified.
         if (!match[8]) {
             // match[n] can only be string or undefined.
             // But take care of '12' + 1 => '121'.
@@ -583,7 +583,7 @@ export function reformIntervals(list: IntervalItem[]): IntervalItem[] {
 }
 
 /**
- * [Numberic is defined as]:
+ * [Numeric is defined as]:
  *     `parseFloat(val) == val`
  * For example:
  * numeric:
@@ -623,7 +623,7 @@ export function getRandomIdBase(): number {
 }
 
 /**
- * Get the greatest common dividor
+ * Get the greatest common divisor.
  *
  * @param {number} a one number
  * @param {number} b the other number
@@ -636,7 +636,7 @@ export function getGreatestCommonDividor(a: number, b: number): number {
 }
 
 /**
- * Get the least common multiple
+ * Get the least common multiple.
  *
  * @param {number} a one number
  * @param {number} b the other number
diff --git a/src/util/states.ts b/src/util/states.ts
index 7f6e2551e8..1748ef6f72 100644
--- a/src/util/states.ts
+++ b/src/util/states.ts
@@ -209,7 +209,7 @@ export function setStatesFlag(el: ECElement, stateName: DisplayState) {
 
 /**
  * If we reuse elements when rerender.
- * DONT forget to clearStates before we update the style and shape.
+ * DON'T forget to clearStates before we update the style and shape.
  * Or we may update on the wrong state instead of normal state.
  */
 export function clearStates(el: Element) {
@@ -239,7 +239,7 @@ function getFromStateStyle(
     for (let i = 0; i < el.animators.length; i++) {
         const animator = el.animators[i];
         if (animator.__fromStateTransition
-            // Dont consider the animation to emphasis state.
+            // Don't consider the animation to emphasis state.
             && animator.__fromStateTransition.indexOf(toStateName) < 0
             && animator.targetName === 'style') {
             animator.saveTo(fromState, props);
@@ -843,7 +843,7 @@ export function setStatesStylesFromModel(
 /**
  *
  * Set element as highlight / downplay dispatcher.
- * It will be checked when element recieved mouseover event or from highlight action.
+ * It will be checked when element received mouseover event or from highlight action.
  * It's in change of all highlight/downplay behavior of it's children.
  *
  * @param el
@@ -899,9 +899,9 @@ export function enableComponentHighDownFeatures(
 }
 
 /**
- * Support hightlight/downplay record on each elements.
+ * Support highlight/downplay record on each elements.
  * For the case: hover highlight/downplay (legend, visualMap, ...) and
- * user triggerred hightlight/downplay should not conflict.
+ * user triggered highlight/downplay should not conflict.
  * Only all of the highlightDigit cleared, return to normal.
  * @param {string} highlightKey
  * @return {number} highlightDigit
diff --git a/src/util/styleCompat.ts b/src/util/styleCompat.ts
index d70a6017c9..32bf54bdcd 100644
--- a/src/util/styleCompat.ts
+++ b/src/util/styleCompat.ts
@@ -43,7 +43,7 @@ export function isEC4CompatibleStyle(
     // So we provide:
     // `legacy: true` force make compat.
     // `legacy: false`, force do not compat.
-    // `legacy` not set: auto detect wheter legacy.
+    // `legacy` not set: auto detect whether legacy.
     //     But in this case we do not compat (difficult to detect and rare case):
     //     Becuse custom series and graphic component support "merge", users may firstly
     //     only set `textStrokeWidth` style or secondly only set `text`.
@@ -63,7 +63,7 @@ export function isEC4CompatibleStyle(
 /**
  * `EC4CompatibleStyle` is style that might be in echarts4 format or echarts5 format.
  * @param hostStyle The properties might be modified.
- * @return If be text el, `textContentStyle` and `textConfig` will not be retured.
+ * @return If be text el, `textContentStyle` and `textConfig` will not be returned.
  *         Otherwise a `textContentStyle` and `textConfig` will be created, whose props area
  *         retried from the `hostStyle`.
  */
@@ -93,11 +93,11 @@ export function convertFromEC4CompatibleStyle(hostStyle: ZRStyleProps, elType: s
         textContent = {
             type: 'text',
             style: textContentStyle,
-            // ec4 do not support rectText trigger.
-            // And when text postion is different in normal and emphasis
+            // ec4 does not support rectText trigger.
+            // And when text position is different in normal and emphasis
             // => hover text trigger emphasis;
             // => text position changed, leave mouse pointer immediately;
-            // That might cause state incorrect.
+            // That might cause incorrect state.
             silent: true
         };
         textConfig = {};
@@ -138,7 +138,7 @@ function convertEC4CompatibleRichItem(out: TextStylePropsPart, richItem: Diction
     // on a rect means `borderColor: 4` on the rect and `borderColor: 10` on an attached
     // richText in ec5.
     // (2) `out === richItem` if and only if `out` is text el or rich item.
-    // So we can overwite existing props in `out` since textXXX has higher priority.
+    // So we can overwrite existing props in `out` since textXXX has higher priority.
     richItem.font = richItem.textFont || richItem.font;
     hasOwn(richItem, 'textStrokeWidth') && (out.lineWidth = richItem.textStrokeWidth);
     hasOwn(richItem, 'textAlign') && (out.align = richItem.textAlign);
diff --git a/src/util/types.ts b/src/util/types.ts
index 34b99d0a8a..56c7b6983b 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -517,7 +517,7 @@ export type SeriesDataType = 'main' | 'node' | 'edge';
  * ```
  */
 export type ECUnitOption = {
-    // Exclude these reserverd word for `ECOption` to avoid to infer to "any".
+    // Exclude these reserved word for `ECOption` to avoid to infer to "any".
     baseOption?: unknown
     options?: unknown
     media?: unknown
@@ -1333,7 +1333,7 @@ export type ComponentItemTooltipOption<T> = CommonTooltipOption<T> & {
 export type ComponentItemTooltipLabelFormatterParams = {
     componentType: string
     name: string
-    // properies key array like ['name']
+    // properties key array like ['name']
     $vars: string[]
 } & {
     // Other properties