| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>Edit Guide - Edit Handbook - 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="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</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 col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></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"><article><h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1> <h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2> <p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p> <p>Lowercase markdown file names.</p> <h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2> <p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p> <p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span> |
| <span class="token comment"><!-- prettier-ignore-end --></span></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> <p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p> <h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2> <ul><li><code>optionPath</code></li> <li><code>mainSitePath</code></li> <li><code>exampleViewPath</code></li> <li><code>exampleEditorPath</code></li> <li><code>lang</code></li></ul> <p>Usage:</p> <pre><code>${xxxxx} |
| </code></pre> <h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url">[<span class="token content">Get Apache ECharts</span>](<span class="token url">${lang}/basics/download</span>)</span></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> <p><a href="en/basics/download">Get Apache ECharts</a></p> <h2 id="embedding-code" tabindex="-1">Embedding Code</h2> <h3 id="basic-usage" tabindex="-1">Basic Usage</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>```js |
| option = { |
| series: [{ |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| }] |
| }; |
| \```</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 class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></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> <h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3> <p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p> <p>For example, the comment <code>...</code></p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></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> <h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3> <blockquote><p>Currently only preview of Option code is supported</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live |
| option = { |
| xAxis: { |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| } |
| ] |
| }; |
| \```</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 class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| xAxis: { |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</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 class="md-live-preview"></div></div> <h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3> <h4 id="left-to-right" tabindex="-1">Left to Right</h4> <p></p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'<span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: 'lr'}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| |
| <span class="token comment"><!-- prettier-ignore-end --></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'<span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: 'lr'}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| |
| <span class="token title important"><span class="token punctuation">####</span> Right to left</span> |
| |
| <span class="token comment"><!-- prettier-ignore-start --></span></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>markdown |
| <div class="md-live layout-rl"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| ... |
| }; |
| \```</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token operator">...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| \<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>`<br></pre></div></div></div> <div class="md-live-tag">live</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 class="md-live-preview"></div></div><p></p> <div class="md-live layout-rl"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| xAxis: { |
| data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</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 class="md-live-preview"></div></div> <h4 id="down-to-up" tabindex="-1">Down to Up</h4> <p></p><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>b3B0aW9uID0gewogIC4uLgp9OwpcYGBg'<span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: 'bt'}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| |
| <span class="token comment"><!-- prettier-ignore-end --></span> |
| |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow'<span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: 'bt'}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
| |
| <span class="token title important"><span class="token punctuation">###</span> Highlighting Lines of Code and Adding Filenames</span> |
| |
| Use. |
| |
| <span class="token comment"><!-- prettier-ignore-start --></span></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>markdown<p></p> <pre><code class="language-js{1,3-5}[option.js]">option = { |
| series: [ |
| { |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| } |
| ] |
| }; |
| \``` |
| </code></pre> <p>Effects.</p> <pre><code class="language-js{1,3-5}[option.js]">option = { |
| series: [ |
| { |
| type: 'bar', |
| data: [23, 24, 18, 25, 27, 28, 25] |
| } |
| ] |
| }; |
| </code></pre> <h2 id="embedding-images" tabindex="-1">Embedding Images</h2> <p>Source images are stored under <code>static/images/</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url"><span class="token operator">!</span>[<span class="token content">image description</span>](<span class="token url">images/demo.png</span>)</span></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> <h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3> <p>For the temporary style of the current page, you can just write html.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/demo.png<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 50px</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span></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> <h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2> <p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p> <p>Use:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-example</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doc-example/getting-started<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-example</span><span class="token punctuation">></span></span></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> <p>Result: |
| <iframe width="100%" height="300" src=""></iframe></p> <h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2> <p>Use:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-option</span> <span class="token attr-name">link</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>series-bar.itemStyle.color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-option</span><span class="token punctuation">></span></span></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> <p>Result: |
| <a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p> <h2 id="more-component-usage" tabindex="-1">More Component Usage</h2> <p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p> <h3 id="md-alert" tabindex="-1">md-alert</h3> <p>Prompt components</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| This is an info alert. |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></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> <blockquote class="md-alert md-alert-info" data-v-baf1bad2><p data-v-baf1bad2> |
| This is an info alert. |
| </p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| This is a success alert. |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></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> <blockquote class="md-alert md-alert-success" data-v-baf1bad2><p data-v-baf1bad2> |
| This is a success alert. |
| </p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| This is a warning alert. |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></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> <blockquote class="md-alert md-alert-warning" data-v-baf1bad2><p data-v-baf1bad2> |
| This is a warning alert. |
| </p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
| This is a danger alert. |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></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> <blockquote class="md-alert md-alert-danger" data-v-baf1bad2><p data-v-baf1bad2> |
| This is a danger alert. |
| </p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/meta/edit-guide.md" title="Edit this Document" 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">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,d,n,l,r,a,o,c,h,g,s,p,m,I,C,b,w,k,u,U,B,G,y,W,A,f,S,Z,x,L,V,J,N,Q,M,P,v,Y,R,F,D,j,z,X,E,H,O,T,K,q,_,$,ee,ie,te,de){return{layout:"default",data:[{html:'<h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1>\n<h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2>\n<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>\n<p>Lowercase markdown file names.</p>\n<h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2>\n<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>\n<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>\n<h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n<li><code>lang</code></li>\n</ul>\n<p>Usage:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2>\n<md-code-block lang="markdown" code="\'W0dldCBBcGFjaGUgRUNoYXJ0c10oJHtsYW5nfS9iYXNpY3MvZG93bmxvYWQp\'" line-highlights="\'\'" />\n<p><a href="en/basics/download">Get Apache ECharts</a></p>\n<h2 id="embedding-code" tabindex="-1">Embedding Code</h2>\n<h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3>\n<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>\n<p>For example, the comment <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3>\n<blockquote>\n<p>Currently only preview of Option code is supported</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3>\n<h4 id="left-to-right" tabindex="-1">Left to Right</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2xyJ30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnbHInfSIgLz4KCiMjIyMgUmlnaHQgdG8gbGVmdAoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown\n<md-live lang="js" code="\'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" v-bind="{layout: \'rl\'}" /></p>\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="down-to-up" tabindex="-1">Down to Up</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2J0J30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnYnQnfSIgLz4KCiMjIyBIaWdobGlnaHRpbmcgTGluZXMgb2YgQ29kZSBhbmQgQWRkaW5nIEZpbGVuYW1lcwoKVXNlLgoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n</code></pre>\n\x3c!-- prettier-ignore-end --\x3e\n<p>Effects.</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n</code></pre>\n<h2 id="embedding-images" tabindex="-1">Embedding Images</h2>\n<p>Source images are stored under <code>static/images/</code>.</p>\n<md-code-block lang="markdown" code="\'IVtpbWFnZSBkZXNjcmlwdGlvbl0oaW1hZ2VzL2RlbW8ucG5nKQ\'" line-highlights="\'\'" />\n<h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3>\n<p>For the temporary style of the current page, you can just write html.</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2>\n<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCI-PC9tZC1leGFtcGxlPg\'" line-highlights="\'\'" />\n<p>Result:\n<md-example src="doc-example/getting-started" width="100%" height="300"></md-example></p>\n<h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciI-PC9tZC1vcHRpb24-\'" line-highlights="\'\'" />\n<p>Result:\n<md-option link="series-bar.itemStyle.color"></md-option></p>\n<h2 id="more-component-usage" tabindex="-1">More Component Usage</h2>\n<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>Prompt components</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"en/meta/edit-guide",title:"Edit Guide - Edit Handbook"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:n,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:g},{title:5.2,dir:s},{title:5.3,dir:p},{title:5.4,dir:m}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:k},{title:"数据集",dir:u},{title:"数据转换",dir:U},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:A,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:e},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:Q},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:v}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:R},{title:"南丁格尔图（玫瑰图）",dir:F}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:e},{title:"跨平台方案",dir:X,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:H,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"动画",dir:T,children:[{title:"数据过渡动画",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:z,dir:i,draft:e},{title:ie,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:de}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:n,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:r},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:g},{title:5.2,dir:s},{title:5.3,dir:p},{title:5.4,dir:m}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:k},{title:"Dataset",dir:u},{title:"Data Transform",dir:U},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:A,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:e},{title:"Waterfall",dir:V}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:Q},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:v}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:R},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:H,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Animation",dir:T,children:[{title:"Data Transition",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ie,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:de}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
