<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="images/favicon.png"><link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="./css/main.css?_v_=1567111921734"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="./vendors/pace/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
    var el = document.createElement('style');
    el.innerHTML = ''
        + '@font-face {font-family:"noto-thin";src:local("Microsoft Yahei");}'
        + '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
    document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts Cheat Sheet</title><script type="text/javascript" src="./vendors/jquery/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="./images/forie.png" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.</p><p>We are working on redirecting this Website to <a href="https://echarts.apache.org" target="_blank">https://echarts.apache.org</a>. You may visit our new official Website now.</p></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://www.echartsjs.com/en/index.html" class="navbar-brand"><img src="https://www.echartsjs.com/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://www.echartsjs.com/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Documents<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.echartsjs.com/en/feature.html">Features</a></li><li><a href="https://www.echartsjs.com/en/tutorial.html">Tutorials</a></li><li><a href="https://www.echartsjs.com/en/api.html">API</a></li><li><a href="https://www.echartsjs.com/en/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://www.echartsjs.com/en/option.html">Chart Configuration</a></li><li><a href="https://www.echartsjs.com/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://www.echartsjs.com/en/changelog.html">Changelog</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://www.echartsjs.com/en/download.html">Download</a></li><li><a href="https://www.echartsjs.com/en/download-theme.html">Download Themes</a></li><li><a href="https://www.echartsjs.com/en/download-map.html">Download Maps</a></li><li><a href="https://www.echartsjs.com/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.echartsjs.com/examples/en/">ECharts Examples</a></li><li><a href="https://www.echartsjs.com/examples/en/index.html#chart-type-globe">GL Examples</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contribute<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://github.com/apache/incubator-echarts" target="_blank">Source Code (GitHub)</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="https://www.echartsjs.com/en/coding-standard.html">Code Standard</a></li></ul></li><li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.echartsjs.com/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://www.echartsjs.com/en/maillist.html">Mailing List</a></li><li><a href="https://www.echartsjs.com/en/dependencies.html">Dependencies</a></li><li><a href="https://www.echartsjs.com/en/faq.html">FAQ</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="https://www.echartsjs.com/en/images/github.png" width="18"></a></li><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li></ul></div></div></nav><div class="page-info"><h1>ECharts Cheat Sheet</h1><p>Learn the component names quickly.</p></div><div class="page-content container page-cheatsheet"><h2>Frequently-used Components</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>Series</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="images/builder/chart/bar.svg" alt=""><h5><div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="images/builder/chart/line.svg" alt=""><h5><div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="images/builder/chart/pie.svg" alt=""><h5><div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="images/builder/chart/scatter.svg" alt=""><h5><div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="images/builder/chart/effectScatter.svg" alt=""><h5><div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="images/builder/chart/candlestick.svg" alt=""><h5><div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="images/builder/chart/radar.svg" alt=""><h5><div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="images/builder/chart/heatmap.svg" alt=""><h5><div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="images/builder/chart/tree.svg" alt=""><h5><div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="images/builder/chart/treemap.svg" alt=""><h5><div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="images/builder/chart/sunburst.svg" alt=""><h5><div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="images/builder/chart/map.svg" alt=""><h5><div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="images/builder/chart/lines.svg" alt=""><h5><div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="images/builder/chart/graph.svg" alt=""><h5><div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="images/builder/chart/boxplot.svg" alt=""><h5><div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="images/builder/chart/parallel.svg" alt=""><h5><div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="images/builder/chart/gauge.svg" alt=""><h5><div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="images/builder/chart/funnel.svg" alt=""><h5><div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="images/builder/chart/sankey.svg" alt=""><h5><div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="images/builder/chart/themeRiver.svg" alt=""><h5><div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="images/builder/chart/pictorialBar.svg" alt=""><h5><div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="images/builder/chart/custom.svg" alt=""><h5><div>Custom</div></h5></a></li></ul><h2>Coordinates</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="images/builder/component/gridSimple.svg" alt=""><h5><div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="images/builder/component/polar.svg" alt=""><h5><div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="images/builder/component/geo.svg" alt=""><h5><div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="images/builder/component/singleAxis.svg" alt=""><h5><div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="images/builder/component/calendar.svg" alt=""><h5><div>Calendar</div></h5></a></li></ul><h2>Components</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="images/builder/component/title.svg" alt=""><h5><div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="images/builder/component/legend.svg" alt=""><h5><div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="images/builder/component/tooltip.svg" alt=""><h5><div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="images/builder/component/markPoint.svg" alt=""><h5><div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="images/builder/component/markLine.svg" alt=""><h5><div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="images/builder/component/markArea.svg" alt=""><h5><div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="images/builder/component/timeline.svg" alt=""><h5><div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="images/builder/component/dataZoom.svg" alt=""><h5><div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="images/builder/component/brush.svg" alt=""><h5><div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="images/builder/component/visualMap.svg" alt=""><h5><div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="images/builder/component/toolbox.svg" alt=""><h5><div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="images/builder/component/graphic.svg" alt=""><h5><div>Graphic</div></h5></a></li></ul></div></div><script type="text/javascript" src="./vendors/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
</script><script src="./vendors/echarts/echarts-20190709.min.js"></script><script src="./js/cheat-sheet-en.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><!-- Google Analytics--><script type="text/javascript" async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script><script type="text/javascript">window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141228404-1');</script></html>