<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><link rel="shortcut icon" href="https://echarts.apache.org/examples/images/favicon.png?_v_=20200710_1"><!-- 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="https://echarts.apache.org/examples/stylesheets/main.css?_v_=1611065438834"><title>Examples - Apache ECharts</title><script type="text/javascript">window.EC_DEMO_LANG = 'en';
</script></head><body><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 for the latest information.</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><nav 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/en/tutorial.html">Tutorials</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></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/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">Others<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><li id="nav-ec5"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ECharts 5<span class="new">new</span><b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/next/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/next/en/api.html">API</a></li><li><a href="https://echarts.apache.org/next/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/next/examples/en/index.html">Examples</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick="changeLang('zh')">中文</a></li><li id="nav-apache"><a href="https://www.apache.org/" target="_blank"><img src="https://echarts.apache.org/en/images/asf_logo_white.png?_v_=undefined"></a></li></ul></div></div></nav><script type="text/javascript">var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start' : 'nav-examples';
var menu = document.getElementById(selector);
if (menu) {
    menu.className = 'active';
}
</script><div id="main-container"><div id="code-container"><div id="control-panel"><div id="code-info"></div><div class="control-btn-panel"><a href="javascript:;" onclick="disposeAndRun()" class="btn btn-default btn-sm">RUN</a></div></div><div id="code-panel"></div></div><div id="h-handler" class="handler"></div><div class="right-container"><div id="chart-panel" class="right-panel"></div><div id="tool-panel"><div id="theme"><a title="default" class="default"><span></span></a><a title="light" class="light"><span></span></a><a title="dark" class="dark"><span></span></a></div><button id="download" class="btn btn-sm">Download</button></div></div></div><script>if (window !== top) {
    var nav = document.getElementsByClassName('navbar')[0];
    nav.parentNode.removeChild(nav);
    document.getElementById('main-container').style.top = 0;
}</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script><script type="text/javascript" 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/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/common.js?_v_=1611065438834"></script><script type="text/javascript">function changeLang(lang) {
    if (lang === 'en') {
        if (location.hostname !== 'echarts.apache.org') {
            var re = new RegExp('/zh/', 'g');
            var pathname = location.pathname.replace(re, '/en/');

            var url = 'https://echarts.apache.org' + pathname
                + location.search + location.hash;
            location.href = url;
            return;
        }
    }
    location.href = location.href.replace(
        new RegExp('/(zh|en)/', 'g'), '/' + lang + '/'
    );
}

window.EC_EXAMPLE_IS_GL = (function () {
    var urlParams = (location.search || '').replace(/^\?/, '').split('&');
    for (var i = 0; i < urlParams.length; i++) {
        var kv = urlParams[i].split('=');
        if (kv[0] === 'gl' && kv[1] && kv[1] !== '0') {
            return true;
        }
    }
    return false;
})();

// ROOT_PATH is also used in example js. So we also use https://echarts.apache.org/examples.
// But echarts-gl do not support CORS yet, still use same origin.
window.ROOT_PATH = EC_EXAMPLE_IS_GL ? 'https://echarts.apache.org/examples' : 'https://echarts.apache.org/examples';
window.CDN_PAY_ROOT_PATH = 'https://echarts.apache.org/examples';
window.CDN_PAY_VERSION = '20200710_1';
window.CDN_THIRD_PARTY_ECHARTS_GL = 'https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js'
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1611065438834"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js?_v_=1611065438834"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js?_v_=1611065438834"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.js?_v_=1611065438834"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict/ace.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict/ext-language_tools.js"></script><script type="text/javascript" src="https://echarts.apache.org/examples/javascripts/editor.js?_v_=1611065438834"></script><script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.js?_v_=1611065438834"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';</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></body></html>