diff --git a/build/build.js b/build/build.js
index 1d20e6e610..176449fb8b 100755
--- a/build/build.js
+++ b/build/build.js
@@ -26,7 +26,6 @@ const chalk = require('chalk');
 const rollup = require('rollup');
 const prePublish = require('./pre-publish');
 const transformDEV = require('./transform-dev');
-const preamble = require('./preamble');
 
 async function run() {
 
diff --git a/build/pre-publish.js b/build/pre-publish.js
index cca4b54424..d82ee0c449 100644
--- a/build/pre-publish.js
+++ b/build/pre-publish.js
@@ -39,6 +39,7 @@ const transformDEVUtil = require('./transform-dev');
 const preamble = require('./preamble');
 const dts = require('@lang/rollup-plugin-dts').default;
 const rollup = require('rollup');
+const { transformImport } = require('zrender/build/transformImport');
 
 const ecDir = nodePath.resolve(__dirname, '..');
 const tmpDir = nodePath.resolve(ecDir, 'pre-publish-tmp');
@@ -109,8 +110,8 @@ const compileWorkList = [
             transformRootFolderInEntry(nodePath.resolve(ecDir, 'index.common.js'), esmDir);
             transformRootFolderInEntry(nodePath.resolve(ecDir, 'index.simple.js'), esmDir);
 
-            await transformDistributionFiles(nodePath.resolve(ecDir, esmDir), esmDir);
-            await transformDistributionFiles(nodePath.resolve(ecDir, 'types'), esmDir);
+            await transformLibFiles(nodePath.resolve(ecDir, esmDir), esmDir);
+            await transformLibFiles(nodePath.resolve(ecDir, 'types'), esmDir);
             fsExtra.removeSync(tmpDir);
         }
     },
@@ -131,7 +132,7 @@ const compileWorkList = [
             fsExtra.removeSync(extensionESMDir);
         },
         after: async function () {
-            await transformDistributionFiles(extensionESMDir, 'lib');
+            await transformLibFiles(extensionESMDir, 'lib');
         }
     }
 ];
@@ -245,15 +246,15 @@ function transformRootFolderInEntry(entryFile, replacement) {
     fs.writeFileSync(
         entryFile,
         // Also transform zrender.
-        singleTransformZRRootFolder(code, replacement),
+        singleTransformImport(code, replacement),
         'utf-8'
     );
 }
 
 /**
- * Transform `zrender/src` to `zrender/esm` in all files
+ * Transform `zrender/src` to `zrender/lib` in all files
  */
-async function transformDistributionFiles(rooltFolder, replacement) {
+async function transformLibFiles(rooltFolder, replacement) {
     const files = await readFilePaths({
         patterns: ['**/*.js', '**/*.d.ts'],
         cwd: rooltFolder
@@ -262,7 +263,7 @@ async function transformDistributionFiles(rooltFolder, replacement) {
     // TODO More robust way?
     for (let fileName of files) {
         let code = fs.readFileSync(fileName, 'utf-8');
-        code = singleTransformZRRootFolder(code, replacement);
+        code = singleTransformImport(code, replacement);
         // For lower ts version, not use import type
         // TODO Use https://github.com/sandersn/downlevel-dts ?
         // if (fileName.endsWith('.d.ts')) {
@@ -272,8 +273,33 @@ async function transformDistributionFiles(rooltFolder, replacement) {
     }
 }
 
-function singleTransformZRRootFolder(code, replacement) {
-    return code.replace(/([\"\'])zrender\/src\//g, `$1zrender/${replacement}/`);
+/**
+ * 1. Transform zrender/src to zrender/lib
+ * 2. Add .js extensions
+ */
+function singleTransformImport(code, replacement) {
+    return transformImport(
+        code.replace(/([\"\'])zrender\/src\//g, `$1zrender/${replacement}/`),
+        (moduleName) => {
+            // Ignore 'tslib' and 'echarts' in the extensions.
+            if (moduleName === 'tslib' || moduleName === 'echarts') {
+                return moduleName;
+            }
+            else if (moduleName === 'zrender/lib/export') {
+                throw new Error('Should not import the whole zrender library.');
+            }
+            else if (moduleName.endsWith('.ts')) {
+                // Replace ts with js
+                return moduleName.replace(/\.ts$/, '.js');
+            }
+            else if (moduleName.endsWith('.js')) {
+                return moduleName;
+            }
+            else {
+                return moduleName + '.js'
+            }
+        }
+    );
 }
 
 // function singleTransformImportType(code) {
diff --git a/package-lock.json b/package-lock.json
index ab83eb9d03..4222fd8289 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11122,9 +11122,9 @@
       }
     },
     "zrender": {
-      "version": "npm:zrender-nightly@5.3.0-dev.20211222",
-      "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.0-dev.20211222.tgz",
-      "integrity": "sha512-pwfuY4PVOfGV/RJ0BE3oJv2PXNvRR8E7HfjbPn6/HQ20DqT+We23fI39EhEFNUWKP5dLHKl+EGb+qpnxQQDVJg==",
+      "version": "npm:zrender-nightly@5.3.0-dev.20211224",
+      "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.0-dev.20211224.tgz",
+      "integrity": "sha512-xpGRPACeiHz8F+wKgLs+WZrIsRietAuLCvNXgvMPkax1Hv1u+Gu+yVRSYkmCP3vjLHt93slax66FJteazeOeDg==",
       "requires": {
         "tslib": "2.3.0"
       }
diff --git a/package.json b/package.json
index 4b6d2fb866..73ec8033eb 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "npm:zrender-nightly@^5.3.0-dev.20211222"
+    "zrender": "npm:zrender-nightly@^5.3.0-dev.20211224"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",
diff --git a/test/browser-esm-partial.html b/test/browser-esm-partial.html
new file mode 100644
index 0000000000..442e95b773
--- /dev/null
+++ b/test/browser-esm-partial.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/dat.gui.min.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            body {
+                background: #eee;
+                margin: 0;
+                text-align: center;
+            }
+            #main {
+                box-sizing: border-box;
+                margin: 0 auto;
+                width: 800px;
+                max-width: 100%;
+                text-align: center;
+            }
+            .chart {
+                height: 400px;
+                border-radius: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+                background: #fff;
+            }
+        </style>
+
+
+
+        <div id="main">
+            <h1>Tests ESM lib files importing in browser partially</h1>
+        </div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "echarts/": "../",
+                    "zrender/": "../node_modules/zrender/",
+                    "tslib": "../node_modules/tslib/tslib.es6.js"
+                }
+            }
+        </script>
+        <script>
+            if (typeof process === 'undefined' || !process.env) {
+                window.process = {
+                    env: {
+                        NODE_ENV: 'development'
+                    }
+                };
+            }
+        </script>
+
+        <script type="module">
+            import * as echarts from 'echarts/core.js';
+            import { PieChart } from 'echarts/charts.js';
+            import { CanvasRenderer } from 'echarts/renderers.js';
+            echarts.use([PieChart, CanvasRenderer])
+
+            const chartsOptions = [{
+                series: [{
+                    type: 'pie',
+                    data: [{
+                        name: 'A',
+                        value: 5
+                    }, {
+                        name: 'B',
+                        value: 3
+                    }, {
+                        name: 'C',
+                        value: 1
+                    }]
+                }]
+            }]
+            const charts = [];
+            chartsOptions.forEach(function (chartOption) {
+                const dom = document.createElement('div');
+                dom.className = 'chart';
+                document.querySelector('#main').appendChild(dom);
+
+                const chart = echarts.init(dom);
+
+                chart.setOption(chartOption);
+            });
+        </script>
+    </body>
+</html>
+
diff --git a/test/browser-esm-partial2.html b/test/browser-esm-partial2.html
new file mode 100644
index 0000000000..012a2315b1
--- /dev/null
+++ b/test/browser-esm-partial2.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/dat.gui.min.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            body {
+                background: #eee;
+                margin: 0;
+                text-align: center;
+            }
+            #main {
+                box-sizing: border-box;
+                margin: 0 auto;
+                width: 800px;
+                max-width: 100%;
+                text-align: center;
+            }
+            .chart {
+                height: 400px;
+                border-radius: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+                background: #fff;
+            }
+        </style>
+
+
+
+        <div id="main">
+            <h1>Tests ESM lib files importing in browser partially</h1>
+        </div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "echarts/": "../",
+                    "zrender/": "../node_modules/zrender/",
+                    "tslib": "../node_modules/tslib/tslib.es6.js"
+                }
+            }
+        </script>
+        <script>
+            if (typeof process === 'undefined' || !process.env) {
+                window.process = {
+                    env: {
+                        NODE_ENV: 'development'
+                    }
+                };
+            }
+        </script>
+
+        <script type="module">
+            import * as echarts from 'echarts/lib/echarts';
+            import 'echarts/lib/chart/pie.js';
+
+            const chartsOptions = [{
+                series: [{
+                    type: 'pie',
+                    data: [{
+                        name: 'A',
+                        value: 5
+                    }, {
+                        name: 'B',
+                        value: 3
+                    }, {
+                        name: 'C',
+                        value: 1
+                    }]
+                }]
+            }]
+            const charts = [];
+            chartsOptions.forEach(function (chartOption) {
+                const dom = document.createElement('div');
+                dom.className = 'chart';
+                document.querySelector('#main').appendChild(dom);
+
+                const chart = echarts.init(dom);
+
+                chart.setOption(chartOption);
+            });
+        </script>
+    </body>
+</html>
+
diff --git a/test/browser-esm.html b/test/browser-esm.html
index 7cd4a7fb05..dd2c9a6cd3 100644
--- a/test/browser-esm.html
+++ b/test/browser-esm.html
@@ -53,7 +53,7 @@
 
 
         <div id="main">
-            <h1>Tests for focus and blurScope</h1>
+            <h1>Tests ESM bundle importing in browser</h1>
         </div>
 
         <script type="module">
diff --git a/test/browser-esm2.html b/test/browser-esm2.html
new file mode 100644
index 0000000000..5af89daab0
--- /dev/null
+++ b/test/browser-esm2.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="data/basicChartsOptions.js"></script>
+        <script src="lib/dat.gui.min.js"></script>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+            body {
+                background: #eee;
+                margin: 0;
+                text-align: center;
+            }
+            #main {
+                box-sizing: border-box;
+                margin: 0 auto;
+                width: 800px;
+                max-width: 100%;
+                text-align: center;
+            }
+            .chart {
+                height: 400px;
+                border-radius: 5px;
+                margin: 20px 0;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+                background: #fff;
+            }
+        </style>
+
+
+
+        <div id="main">
+            <h1>Tests ESM lib files importing in browser</h1>
+        </div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "echarts/": "../",
+                    "zrender/": "../node_modules/zrender/",
+                    "tslib": "../node_modules/tslib/tslib.es6.js"
+                }
+            }
+        </script>
+        <script>
+            if (typeof process === 'undefined' || !process.env) {
+                window.process = {
+                    env: {
+                        NODE_ENV: 'development'
+                    }
+                };
+            }
+        </script>
+
+        <script type="module">
+            import * as echarts from '../index.js';
+            const charts = [];
+            allChartsOptions.forEach(function (chartOption) {
+                chartOption.series.forEach(function (series) {
+                    series.selectedMode = 'single';
+                    series.select = {
+                        itemStyle: {
+                            borderWidth: 3
+                        }
+                    }
+
+                    if (series.renderItem) {
+                        const oldRenderItem = series.renderItem;
+                        series.renderItem = function () {
+                            const ret = oldRenderItem.apply(this, arguments);
+                            ret.focus = 'self';
+                            return ret;
+                        }
+                    }
+
+                    if (series.type === 'treemap') {
+                        series.itemStyle = {
+                            borderColor: 'rgba(100, 100, 200, 0.1)',
+                        };
+                        series.nodeClick = null;
+                        series.select = {
+                            itemStyle: {
+                                strokeColor: '#000',
+                                strokeWidth: 1
+                            }
+                        }
+                    }
+                    else if (series.type === 'pie') {
+                        series.data[0].selected = true;
+                    }
+                });
+                const dom = document.createElement('div');
+                dom.className = 'chart';
+                document.querySelector('#main').appendChild(dom);
+
+                const chart = echarts.init(dom);
+
+                chart.setOption(chartOption);
+            });
+        </script>
+    </body>
+</html>
+