diff --git a/src/App.vue b/src/App.vue
index 81c799d..c2cf214 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,13 +11,15 @@
                     :class="{'selected': shared.docType === 'api'}"
                 >{{$t('nav.API')}}</a>
                 <a
-                    :href="'tutorial.html'"
-                    :class="{'selected': shared.docType === 'tutorial'}"
-                >{{$t('nav.tutorial')}}</a>
-                <a
                     :href="'option-gl.html'"
                     :class="{'selected': shared.docType === 'option-gl'}"
                 >{{$t('nav.optionGL')}}</a>
+                <!-- TODO Not use handbook link here?-->
+                <a
+                    :href="`https://echarts.apache.org/handbook/${shared.locale}/get-started`"
+                    :class="{'selected': shared.docType === 'tutorial', 'handbook-link': true}"
+                    target="blank"
+                >{{$t('nav.tutorial')}}</a>
             </div>
             <Search></Search>
             <DocNav></DocNav>
@@ -139,6 +141,14 @@
                 &.selected {
                     border-top: 3px solid #B03A5B;
                 }
+
+                &.handbook-link {
+                    color: #337ab7;
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
             }
         }