<!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="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/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="https://echarts.apache.org/en/css/main.css?_v_=5bc19a133c"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/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>Examples - Apache ECharts</title><style>html, body {
    /* position: sticky should not have overflow parents.*/
    overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><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://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=3020d4307e"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
    page: 'view',
    locale: 'en'
};</script><script type="text/javascript">window.globalArgsExtra.version = '1625800930981';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);

// Remove apache banner
const dom = document.getElementById('apache-banner');
if (dom && dom.parentNode) {
    dom.parentNode.removeChild(dom);
}</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>