| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css"> |
| <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/b6d3b58.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3279306.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4c789e610fc01b03106d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/c3bcbe3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/3279306.css"><link rel="stylesheet" href="/handbook/_nuxt/css/c3bcbe3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css"><link rel="preload" href="/handbook/_nuxt/static/1627882506/zh/meta/edit-guide/state.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/zh/meta/edit-guide/payload.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/manifest.js" as="script"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="文档编辑指南"><a href="#%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>文档编辑指南</h1> |
| <h2 id="新增一个-markdown-文件"><a href="#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>新增一个 markdown 文件</h2> |
| <p>在 <code>contents/zh/</code>（中文文章）或 <code>contents/en/</code>（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p> |
| <p>markdown 文件名称小写。</p> |
| <h2 id="使用-prettier-来自动格式化代码"><a href="#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用 prettier 来自动格式化代码</h2> |
| <p>在开始之前，我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">VSCode 插件</a>，该插件可以在你保存的时候自动帮你格式化代码。</p> |
| <p>如果你觉得自动的格式化破坏了你的代码块，你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>如果你发现有的代码块并没有被格式化，请先检查该代码是否存在语法上的错误。</p> |
| <h2 id="内置变量"><a href="#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>内置变量</h2> |
| <ul> |
| <li><code>optionPath</code></li> |
| <li><code>mainSitePath</code></li> |
| <li><code>exampleViewPath</code></li> |
| <li><code>exampleEditorPath</code></li> |
| </ul> |
| <p>使用方式:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h2 id="引用代码"><a href="#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用代码</h2> |
| <h3 id="基础使用"><a href="#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>基础使用</h3> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h3 id="代码推荐写法"><a href="#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码推荐写法</h3> |
| <p>为了可以让工具帮助我们对代码进行格式化，我们应该尽量避免有语法问题的写法。</p> |
| <p>比如注释 <code>...</code></p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h3 id="实时预览和编辑"><a href="#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>实时预览和编辑</h3> |
| <blockquote> |
| <p>目前只支持对 Option 代码的预览</p> |
| </blockquote> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <div class="nuxt-content-highlight"><!----></div> |
| <h3 id="更多预览布局"><a href="#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多预览布局</h3> |
| <h4 id="左右"><a href="#%E5%B7%A6%E5%8F%B3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>左右</h4> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <div class="nuxt-content-highlight"><!----></div> |
| <h4 id="右左"><a href="#%E5%8F%B3%E5%B7%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>右左</h4> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <div class="nuxt-content-highlight"><!----></div> |
| <h4 id="下上"><a href="#%E4%B8%8B%E4%B8%8A" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>下上</h4> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <div class="nuxt-content-highlight"><!----></div> |
| <h3 id="高亮代码行以及添加文件名"><a href="#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮代码行以及添加文件名</h3> |
| <p>使用：</p> |
| |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| |
| <p>效果：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <span class="filename">option.js</span> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h2 id="引用图片"><a href="#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用图片</h2> |
| <p>图片实际存放地址在 <code>static/images/</code> 下。</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h3 id="设置图片高宽"><a href="#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>设置图片高宽</h3> |
| <p>对于当前页面的临时样式，可以直接写 html：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h2 id="添加示例-iframe"><a href="#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加示例 iframe</h2> |
| <p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p> |
| <p>使用：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>效果： |
| <iframe width="100%" height="300" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started"></iframe></p> |
| <h2 id="添加配置项链接"><a href="#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加配置项链接</h2> |
| <p>使用：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>效果: |
| <a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p> |
| <h2 id="更多组件使用"><a href="#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多组件使用</h2> |
| <p>文档支持使用全局注册的<code>markdown</code>组件，除了刚才介绍的<code>md-example</code>组件，还有下面几种组件</p> |
| <h3 id="md-alert"><a href="#md-alert" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>md-alert</h3> |
| <p>提示组件</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e> |
| This is an info alert. |
| </p></blockquote> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e> |
| This is a success alert. |
| </p></blockquote> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e> |
| This is a warning alert. |
| </p></blockquote> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e> |
| This is a danger alert. |
| </p></blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6">新增一个 markdown 文件</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81">使用 prettier 来自动格式化代码</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F">内置变量</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81">引用代码</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8">基础使用</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95">代码推荐写法</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91">实时预览和编辑</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80">更多预览布局</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D">高亮代码行以及添加文件名</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87">引用图片</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD">设置图片高宽</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe">添加示例 iframe</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5">添加配置项链接</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8">更多组件使用</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#md-alert">md-alert</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/meta/edit-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/handbook/_nuxt/static/1627882506/zh/meta/edit-guide/state.js"></script><script src="/handbook/_nuxt/b6d3b58.js" defer></script><script src="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" defer></script><script src="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" defer></script><script src="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" defer></script><script src="/handbook/_nuxt/js/4c789e610fc01b03106d.js" defer></script><script src="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" defer></script> |
| <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
