<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.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"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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<span class="new">new</span></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<span class="new">new</span></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/inspiration" class="nav-link"><span class="title">Inspiration</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">ECharts 5 Upgrade Guide</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></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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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">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><!----></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" class="nav-link"><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="axis" tabindex="-1">Axis</h1> <p>The x/y-axis in the Cartesian coordinate system.</p> <h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2> <p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p> <p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"></p> <p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</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> <p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</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> <p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  dataZoom<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token comment">// ...</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> <p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Sales Price'</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
  <span class="token comment">// ...</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> <h2 id="axis-line" tabindex="-1">Axis Line</h2> <p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
      symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
      lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'dashed'</span>
        <span class="token comment">// ...</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
      symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
      lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'dashed'</span>
        <span class="token comment">// ...</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</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> <h2 id="tick" tabindex="-1">Tick</h2> <p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
      length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
      lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'dashed'</span>
        <span class="token comment">// ...</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
      length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
      lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'dashed'</span>
        <span class="token comment">// ...</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</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> <h2 id="label" tabindex="-1">Label</h2> <p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
      formatter<span class="token operator">:</span> <span class="token string">'{value} kg'</span><span class="token punctuation">,</span>
      align<span class="token operator">:</span> <span class="token string">'center'</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
      formatter<span class="token operator">:</span> <span class="token string">'{value} ¥'</span><span class="token punctuation">,</span>
      align<span class="token operator">:</span> <span class="token string">'center'</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</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> <h2 id="example" tabindex="-1">Example</h2> <p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p> <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 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 30
      },
      data: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      position: 'right',
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      position: 'left',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 0,
      data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [
        6.0,
        10.2,
        10.3,
        11.5,
        10.3,
        13.2,
        14.3,
        16.4,
        18.0,
        16.5,
        12.0,
        5.2
      ]
    }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
    trigger<span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
    axisPointer<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'cross'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
      axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
        alignWithLabel<span class="token operator">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        rotate<span class="token operator">:</span> <span class="token number">30</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">'January'</span><span class="token punctuation">,</span>
        <span class="token string">'February'</span><span class="token punctuation">,</span>
        <span class="token string">'March'</span><span class="token punctuation">,</span>
        <span class="token string">'April'</span><span class="token punctuation">,</span>
        <span class="token string">'May'</span><span class="token punctuation">,</span>
        <span class="token string">'June'</span><span class="token punctuation">,</span>
        <span class="token string">'July'</span><span class="token punctuation">,</span>
        <span class="token string">'August'</span><span class="token punctuation">,</span>
        <span class="token string">'September'</span><span class="token punctuation">,</span>
        <span class="token string">'October'</span><span class="token punctuation">,</span>
        <span class="token string">'November'</span><span class="token punctuation">,</span>
        <span class="token string">'December'</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      max<span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
      position<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} ml'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      max<span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
      position<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
      axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
        formatter<span class="token operator">:</span> <span class="token string">'{value} °C'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      yAxisIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">86</span><span class="token punctuation">,</span> <span class="token number">68.7</span><span class="token punctuation">,</span> <span class="token number">100.7</span><span class="token punctuation">,</span> <span class="token number">125.6</span><span class="token punctuation">,</span> <span class="token number">112.2</span><span class="token punctuation">,</span> <span class="token number">78.7</span><span class="token punctuation">,</span> <span class="token number">48.8</span><span class="token punctuation">,</span> <span class="token number">36.0</span><span class="token punctuation">,</span> <span class="token number">19.3</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
      smooth<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      yAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token number">6.0</span><span class="token punctuation">,</span>
        <span class="token number">10.2</span><span class="token punctuation">,</span>
        <span class="token number">10.3</span><span class="token punctuation">,</span>
        <span class="token number">11.5</span><span class="token punctuation">,</span>
        <span class="token number">10.3</span><span class="token punctuation">,</span>
        <span class="token number">13.2</span><span class="token punctuation">,</span>
        <span class="token number">14.3</span><span class="token punctuation">,</span>
        <span class="token number">16.4</span><span class="token punctuation">,</span>
        <span class="token number">18.0</span><span class="token punctuation">,</span>
        <span class="token number">16.5</span><span class="token punctuation">,</span>
        <span class="token number">12.0</span><span class="token punctuation">,</span>
        <span class="token number">5.2</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> <p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</p></article></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/en/concepts/axis.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</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>window.__NUXT__=function(i,t,e,g,a,d,l,I,C,r,o,A,s,n,h,c,p,u,b,m,x,w,B,f,y,L,G,K,H,Z,W,v,X,T,F,J,O,S,V,k,M,Y,z,D,R,U,E,Q,j,N,P,q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="axis" tabindex="-1">Axis</h1>\n<p>The x/y-axis in the Cartesian coordinate system.</p>\n<h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2>\n<p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p>\n<p><img max-width="830" width="100%" height="100%"\nsrc="images/design/axis/charts_axis_img02.jpg">\n</img></p>\n<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: &quot;Sales Time&quot;, &quot;Sales Location&quot; and &quot;product name&quot;, etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as &quot;Sales Quantity&quot; and &quot;Sales Price&quot;.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1NhbGVzIFF1YW50aXR5JwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdTYWxlcyBQcmljZScKICAgICAgLy8gLi4uCiAgICB9CiAgXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="axis-line" tabindex="-1">Axis Line</h2>\n<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tick" tabindex="-1">Tick</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="label" tabindex="-1">Label</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKlJywKICAgICAgYWxpZ246ICdjZW50ZXInCiAgICAgIC8vIC4uLgogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="example" tabindex="-1">Example</h2>\n<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIHJvdGF0ZTogMzAKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgICdKYW51YXJ5JywKICAgICAgICAnRmVicnVhcnknLAogICAgICAgICdNYXJjaCcsCiAgICAgICAgJ0FwcmlsJywKICAgICAgICAnTWF5JywKICAgICAgICAnSnVuZScsCiAgICAgICAgJ0p1bHknLAogICAgICAgICdBdWd1c3QnLAogICAgICAgICdTZXB0ZW1iZXInLAogICAgICAgICdPY3RvYmVyJywKICAgICAgICAnTm92ZW1iZXInLAogICAgICAgICdEZWNlbWJlcicKICAgICAgXQogICAgfQogIF0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUwLAogICAgICBwb3NpdGlvbjogJ3JpZ2h0JywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1LAogICAgICBwb3NpdGlvbjogJ2xlZnQnLAogICAgICBheGlzTGFiZWw6IHsKICAgICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKwQycKICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHlBeGlzSW5kZXg6IDAsCiAgICAgIGRhdGE6IFs2LCAzMiwgNzAsIDg2LCA2OC43LCAxMDAuNywgMTI1LjYsIDExMi4yLCA3OC43LCA0OC44LCAzNi4wLCAxOS4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICA2LjAsCiAgICAgICAgMTAuMiwKICAgICAgICAxMC4zLAogICAgICAgIDExLjUsCiAgICAgICAgMTAuMywKICAgICAgICAxMy4yLAogICAgICAgIDE0LjMsCiAgICAgICAgMTYuNCwKICAgICAgICAxOC4wLAogICAgICAgIDE2LjUsCiAgICAgICAgMTIuMCwKICAgICAgICA1LjIKICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</p>\n',postPath:"en/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:o},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:x},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:M},{title:"南丁格尔图（玫瑰图）",dir:Y}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:I},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:o},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:x},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:M},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},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:i,routePath:"/en/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
    <script type="text/javascript">document.getElementById("nav-doc").className="active"</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>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
  </body>
</html>