<!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_=1536949973669"><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 Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css?_v_=1536949973669"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="js/log.js"></script><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><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="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="./index.html" class="navbar-brand"><img src="./images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="./index.html">Home</a></li><li id="nav-downloads"><a href="./download.html">Downloads</a></li><li id="nav-start" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Get Started<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="./tutorial.html">Tutorials</a></li><li><a href="https://ecomfe.github.io/echarts-examples/public/index.html" target="_blank">Examples</a></li><li><a href="http://gallery.echartsjs.com" target="_blank">Gallery</a></li></ul></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="./option.html">Chart Configuration</a></li><li><a href="./api.html">API</a></li><li><a href="./changelog.html">Changelog</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</a></li><li><a href="https://github.com/apache/incubator-echarts/issues" target="_blank">Issue Tracking</a></li><li><a href="./coding-standard.html">Coding Standards</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="./license.html">License</a></li><li><a href="./maillist.html">Mailling List</a></li><li><a href="./committers.html">Committers</a></li><li><a href="./dependencies.html">Dependencies</a></li><li><a href="./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="./images/github.png" width="18"></a></li><li id="nav-chinese"><a href="http://www.echartsjs.com/index.html">中文</a></li></ul></div></div></nav><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="./vendors/bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="./js/common.js"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">$('#main').addClass('tutorial');

window.globalArgsExtra = {
    pageName: 'tutorial',
    initHash: 'Get Started with ECharts in 5 minutes',
    hideTreeRoot: true,
    pureTitle: true,
    noTypeEnum: true,
    lang: {
        cn: {
            queryBoxTextFuzzyPath: '教程搜索',
            queryBoxPlaceholderFuzzyPath: '教程名称搜索（快捷键\'/\'）'
        },
        en: {
            queryBoxTextFuzzyPath: 'tutorial search',
            queryBoxPlaceholderFuzzyPath: 'tutorial search (shortcut: \'/\')'
        }
    }
};</script><script src="vendors/jquery-autocomplete/jquery.auto-complete.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';

var vendorPath = '../vendors';

define('globalArgs', extend({
    version: '1536949973669',
    basePath: './',
    // Schema url is added by each doc page
    schemaUrl: '',
    iconfont: {
        down: '&#' + parseInt('e600', 16),
        up: '&#' + parseInt('e603', 16),
        right: '&#' + parseInt('e602', 16),
        left: '&#' + parseInt('e604', 16),
        handLens: '&#' + parseInt('e601', 16)
    }
}, window.globalArgsExtra || {}));

define('prettyPrint', function () {
    return prettyPrint;
});

define('ecLog', function () {
    // log maybe blocked
    if (typeof ecLog === 'undefined') {
        ecLog = function () {};
    }
    return ecLog;
});

require.config({
    baseUrl: './js',
    paths: {
        dt: vendorPath + '/dt/0.0.1',
        tpl: vendorPath + '/dt/0.0.1/tplLoader',
        etpl: vendorPath + '/etpl/3.0.0/etpl.min',
        signals: vendorPath + '/signals/1.0.0/signals.min',
        hasher: vendorPath + '/hasher/1.2.0/hasher.min',
        perfectScrollbar: vendorPath + '/perfect-scrollbar/0.6.8/js/perfect-scrollbar'
    },
    urlArgs: '_v_=1536949973669'
});

require(['docTool/main'], function (main) {
    main.init();
});

function extend(tar, src) {
    for (var name in src) {
        if (src.hasOwnProperty(name)) {
            tar[name] = src[name];
        }
    }
    return tar;
}</script><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script></html>