<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="description" content="Apache ECharts, a powerful, interactive charting and visualization library for browser"><meta name="keywords" content="echarts,apache,charts,data-visualization,charting-library,visualization,data-viz,canvas,svg,plot,graph"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://fastly.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_=a95711177c"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://fastly.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>Coding Standard - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script type="text/javascript" src="https://fastly.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script type="text/javascript" src="https://fastly.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]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><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/en/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"><nav class="navbar navbar-default navbar-fixed-top"><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</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</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></nav><div class="page-main"><div class="page-info"><h1>Coding Standard</h1><p>Please follow this standard when contribute to ECharts project.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><ul id="standard-nav"></ul></div><div class="page-detail"><h2 id="code-style">Code Style</h2>
<h3 id="file">File</h3>
<p><strong>[MUST]</strong> JavaScript Source files must be encoded in UTF-8 without BOM.</p>
<h3 id="indentation">Indentation</h3>
<p><strong>[MUST]</strong> 4 space indentation. tabs and 2 space are not allowed.</p>
<p><strong>[MUST]</strong> <code>case</code> and <code>default</code> in <code>switch</code> must be indented.</p>
<pre><code class="lang-ts">// good
switch (variable) {
    case &#39;1&#39;:
        // do...
        break;
    case &#39;2&#39;:
        // do...
        break;
    default:
        // do...
}

// bad
switch (variable) {
case &#39;1&#39;:
    // do...
    break;
case &#39;2&#39;:
    // do...
    break;
default:
    // do...
}
</code></pre>
<h3 id="space">Space</h3>
<p><strong>[MUST]</strong> Set off binary operator with spaces. But place no space between unary operator and its operand.</p>
<pre><code class="lang-ts">let a = !arr.length;
a++;
a = b + c;
</code></pre>
<p><strong>[MUST]</strong> Place 1 space before the leading brace.</p>
<pre><code class="lang-ts">// good

if (condition) {
}

set(&#39;attr&#39;, {
    some: &#39;xxx&#39;,
    any: &#39;yyy&#39;
});

function funcName() {
}


// bad

if (condition){
}

set(&#39;attr&#39;,{
    some: &#39;xxx&#39;,
    any: &#39;yyy&#39;
});

function funcName(){
}
</code></pre>
<p><strong>[MUST]</strong> Place 1 space after <code>if</code> / <code>else</code> / <code>for</code> / <code>while</code> / <code>function</code> / <code>switch</code> / <code>do</code> / <code>try</code> / <code>catch</code> / <code>finally</code>.</p>
<pre><code class="lang-ts">// good

if (condition) {
}

while (condition) {
}

(function () {
})();


// bad

if(condition) {
}

while(condition) {
}

(function() {
})();
</code></pre>
<p><strong>[MUST]</strong> In the object creating statement, place 1 space after <code>:</code>, but no space before it.</p>
<pre><code class="lang-ts">// good
const obj = {
    a: 1,
    b: 2,
    c: 3
};

// bad
const obj = {
    a : 1,
    b:2,
    c :3
};
</code></pre>
<p><strong>[MUST]</strong> Place no space between the function name and <code>(</code> in function declaration, expression of named function and function call.</p>
<pre><code class="lang-ts">// good

function funcName() {
}

const funcName = function funcName() {
};

funcName();


// bad

function funcName () {
}

const funcName = function funcName () {
};

funcName ();
</code></pre>
<p><strong>[MUST]</strong> Place no space between <code>,</code> and <code>;</code>.</p>
<pre><code class="lang-ts">// good
callFunc(a, b);

// bad
callFunc(a , b) ;
</code></pre>
<p><strong>[MUST]</strong> Place no space after <code>(</code> and <code>[</code> and before <code>)</code> and <code>]</code>.</p>
<pre><code class="lang-ts">// good

callFunc(param1, param2, param3);

save(this.list[this.indexes[i]]);

needIncream &amp;&amp; (variable += increament);

if (num &gt; list.length) {
}

while (len--) {
}


// bad

callFunc( param1, param2, param3 );

save( this.list[ this.indexes[ i ] ] );

needIncreament &amp;&amp; ( variable += increament );

if ( num &gt; list.length ) {
}

while ( len-- ) {
}


// good
const arr1 = [];
const arr2 = [1, 2, 3];
const obj1 = {};
const obj2 = {name: &#39;obj&#39;};
const obj3 = {
    name: &#39;obj&#39;,
    age: 20,
    sex: 1
};

// bad
const arr1 = [ ];
const arr2 = [ 1, 2, 3 ];
const obj1 = { };
const obj2 = { name: &#39;obj&#39; };
const obj3 = {name: &#39;obj&#39;, age: 20, sex: 1};
</code></pre>
<p><strong>[MUST]</strong> Must no trailing space in each line.</p>
<h3 id="line-break">Line Break</h3>
<p><strong>[MUST]</strong> Place line break in the end of a statement.</p>
<p><strong>[MUST]</strong> No more than 120 characters per line.</p>
<p><strong>[MUST]</strong> Place operator at the beginning of a line if it break lines.</p>
<pre><code class="lang-ts">// good
if (user.isAuthenticated()
    &amp;&amp; user.isInRole(&#39;admin&#39;)
    &amp;&amp; user.hasAuthority(&#39;add-admin&#39;)
    || user.hasAuthority(&#39;delete-admin&#39;)
) {
    // Code
}

const result = number1 + number2 + number3
    + number4 + number5;


// bad
if (user.isAuthenticated() &amp;&amp;
    user.isInRole(&#39;admin&#39;) &amp;&amp;
    user.hasAuthority(&#39;add-admin&#39;) ||
    user.hasAuthority(&#39;delete-admin&#39;)) {
    // Code
}

const result = number1 + number2 + number3 +
    number4 + number5;
</code></pre>
<p><strong>[MUST]</strong> Start a new line for <code>)</code>, <code>]</code>, <code>}</code> if the content inside the brackets occupies multiple lines.
Make the same indent as the line where the corresponding <code>(</code>, <code>[</code>, <code>{</code> placed.</p>
<pre><code class="lang-ts">// good
if (product) {
    product.load();
    if (user.isAuthenticated()
        &amp;&amp; user.isInRole(&#39;admin&#39;)
        &amp;&amp; user.hasAuthority(&#39;add-admin&#39;)
    ) {
        sendProduct(user, product);
    }
}
const arr = [
    &#39;candy&#39;, &#39;sugar&#39;
];

// bad
if (product) {
    product.load();
    if (user.isAuthenticated()
        &amp;&amp; user.isInRole(&#39;admin&#39;)
        &amp;&amp; user.hasAuthority(&#39;add-admin&#39;)) {
        sendProduct(user, product);
    }
}
const arr = [
        &#39;candy&#39;, &#39;sugar&#39;
    ];
</code></pre>
<p><strong>[MUST]</strong> Must not break lines before <code>,</code> or <code>;</code>.</p>
<pre><code class="lang-ts">// good
const obj = {
    a: 1,
    b: 2,
    c: 3
};

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);


// bad
const obj = {
    a: 1
    , b: 2
    , c: 3
};

foo(
    aVeryVeryLongArgument
    , anotherVeryLongArgument
    , callback
);
</code></pre>
<p><strong>[SUGGEST]</strong> Suggestion about line break and indent:</p>
<pre><code class="lang-ts">if (user.isAuthenticated()
    &amp;&amp; user.isInRole(&#39;admin&#39;)
    &amp;&amp; user.hasAuthority(&#39;add-admin&#39;)
) {
    // Code
}

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

baidu.format(
    dateFormatTemplate,
    year, month, date, hour, minute, second
);

$(&#39;#items&#39;)
    .find(&#39;.selected&#39;)
    .highlight()
    .end();

const result = thisIsAVeryVeryLongCondition
    ? resultA : resultB;

const res = condition
    ? thisIsAVeryVeryLongResult
    : resultB;
</code></pre>
<p><strong>[MUST]</strong> Start a new line for <code>else</code> and <code>catch</code> if using multi-line blocks.</p>
<pre><code class="lang-ts">// good

if (condition) {
    // some statements;
}
else {
    // some statements;
}

try {
    // some statements;
}
catch (ex) {
    // some statements;
}


// bad

if (condition) {
    // some statements;
} else {
    // some statements;
}

try {
    // some statements;
} catch (ex) {
    // some statements;
}
</code></pre>
<h3 id="statement">Statement</h3>
<p><strong>[MUST]</strong> The semicolon must not be ignored at the end of a statement.</p>
<p><strong>[MUST]</strong> The <code>{}</code> must not be ignored even if there is only one line.</p>
<pre><code class="lang-ts">// good
if (condition) {
    callFunc();
}

// bad
if (condition) callFunc();
if (condition)
    callFunc();
</code></pre>
<p><strong>[MUST]</strong> Place no semicolon at the end of a function definition.</p>
<pre><code class="lang-ts">// good
function funcName() {
}

// bad
function funcName() {
};

// For function expression, the semicolon must not be ignored.
const funcName = function () {
};
</code></pre>
<p><strong>[MUST]</strong> No trailing comma in object and array declarations.</p>
<pre><code class="lang-ts">// good

const obj = {
    attr1: &#39;xxx&#39;,
    attr2: &#39;yyy&#39;
};

const arr = [
    &#39;xxx&#39;,
    &#39;yyy&#39;
];


// bad

const obj = {
    attr1: &#39;xxx&#39;,
    attr2: &#39;yyy&#39;,
};

const arr = [
    &#39;xxx&#39;,
    &#39;yyy&#39;,
];
</code></pre>
<h3 id="naming-conventions">Naming Conventions</h3>
<p><strong>[MUST]</strong> Use lowerCamelCase for variables, properties and function names.</p>
<pre><code class="lang-ts">const loadingModules = {};
function loadProduct() {
}
</code></pre>
<p><strong>[MUST]</strong> Use UpperCamelCase (Pascal) for class names.</p>
<pre><code class="lang-ts">function Element(options) {
}
</code></pre>
<p><strong>[SUGGEST]</strong> All of the letters of a abbreviation should be both upper cases or both lower cases.</p>
<pre><code class="lang-ts">function parseSVG() {
}
const svgParser;
</code></pre>
<h2 id="language-features">Language features</h2>
<h3 id="compatibility">Compatibility</h3>
<p>Language features can be polyfilled by some utilities, but must not by modifying the prototype of the built-in JS objects.</p>
<pre><code class="lang-ts">// good

import * as zrUtil from &#39;zrender/src/core/util&#39;;

zrUtil.each(array, function (val, index) {
    sum += val;
});

const result = zrUtil.map(array, function (val) {
    return parse(val);
});

const pos = zrUtil.indexOf(array, val);

const obj2 = zrUtil.extend({}, obj1);

function Element() {
    // ...
}


// bad

array.forEach(function (val, index) {
    sum += val;
});

let result = array.map(function (val) {
    return parse(val);
});

const pos = array.indexOf(val);

const obj2 = Object.assign({}, obj1);

class Element {
    // ...
}

String.prototype.trim = function () {
};
</code></pre>
<h3 id="variable">Variable</h3>
<p><strong>[MUST]</strong> Prefer using <code>const</code> to declare variable. And one line can not declares more than one variable.</p>
<pre><code class="lang-ts">// good
const name = &#39;MyName&#39;;
const hangModules = [];
const missModules = [];
const visited = {};

// bad
name = &#39;MyName&#39;;
const hangModules = [],
    missModules = [],
    visited = {};
</code></pre>
<h3 id="condition">Condition</h3>
<p><strong>[MUST]</strong> In equality expression, <code>==</code> can only be used on <code>null</code> or <code>undefined</code> detection. <code>===</code> should be used in the rest of cases .</p>
<pre><code class="lang-ts">// good
if (age === 30) {
    // ...
}
if (type == null) {
    // ...
}

// bad
if (age == 30) {
    // ......
}
</code></pre>
<p><strong>[SUGGEST]</strong> Use <code>xxx == null</code> to determine <code>null</code> or <code>undefined</code>.</p>
<p><strong>[SUGGEST]</strong> Try best to make the meaning of <code>null</code> and <code>undefined</code> the same, namely, do not make users or developers distinguishing whether a variable is <code>null</code> or <code>undefined</code>.</p>
<p><strong>[SUGGEST]</strong> The function expression or function declaration should not be placed inside a loop body.</p>
<pre><code class="lang-ts">// good
function clicker() {
    // ......
}

for (let i = 0, len = elements.length; i &lt; len; i++) {
    const element = elements[i];
    addListener(element, &#39;click&#39;, clicker);
}


// bad
for (let i = 0, len = elements.length; i &lt; len; i++) {
    const element = elements[i];
    addListener(element, &#39;click&#39;, function () {});
}
</code></pre>
<h3 id="type-conversion">Type Conversion</h3>
<p><strong>[SUGGEST]</strong> Use <code>+ &#39;&#39;</code> to convert a value to string.</p>
<pre><code class="lang-ts">// good
num + &#39;&#39;;

// bad
new String(num);
num.toString();
String(num);
</code></pre>
<p><strong>[SUGGEST]</strong> Use <code>+</code> to convert a value to number.</p>
<pre><code class="lang-ts">// good
+str;

// bad
Number(str);
</code></pre>
<p><strong>[MUST]</strong> The second parameter must not be ignored when using <code>parseInt</code>.</p>
<pre><code class="lang-ts">// good
parseInt(str, 10);

// bad
parseInt(str);
</code></pre>
<h3 id="string-object-array">String, Object, Array</h3>
<p><strong>[MUST]</strong> Use <code>&#39;</code> but not <code>&quot;</code> to define a string.</p>
<p><strong>[MUST]</strong> Use object literal <code>{}</code> to create a plain object.</p>
<pre><code class="lang-ts">// good
const obj = {};

// bad
const obj = new Object();
</code></pre>
<p><strong>[MUST]</strong> If all of the properties of an object literal do not need quotation marks, they should ignore them. If quotation marks is necessary, use <code>&#39;</code> but not <code>&quot;</code>.</p>
<pre><code class="lang-ts">// good
const info = {
    name: &#39;someone&#39;,
    age: 28
};

// bad
const info = {
    &#39;name&#39;: &#39;someone&#39;,
    &#39;age&#39;: 28
};
const info2 = {
    &quot;age&quot;: 40
};
</code></pre>
<p><strong>[MUST]</strong> The prototype of built-in objects must not be modified.</p>
<pre><code class="lang-ts">// Forbidden
String.prototype.trim = function () {
};
</code></pre>
<p><strong>[SUGGEST]</strong> Try best to use <code>.</code> but not <code>[]</code> to visit properties of an object.</p>
<p><strong>[SUGGEST]</strong> <code>hasOwnProperty</code> should be used to when using <code>for ... in ...</code>, in case that some extra properties is added on the prototype of <code>Object</code> in some runtime environment.</p>
<pre><code class="lang-ts">const newInfo = {};
for (const key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
    }
}
</code></pre>
<p><strong>[MUST]</strong> Use array literal <code>[]</code> to create an array, except intending to create an array with a given length.</p>
<pre><code class="lang-ts">// good
const arr = [];
const arr2 = new Array(1e4);

// bad
const arr = new Array();
</code></pre>
<p><strong>[MUST]</strong> Do not use <code>for in</code> in array traverse.</p>
<h3 id="others">Others</h3>
<p><strong>[MUST]</strong> Do not use <code>eval</code> and <code>with</code>. <code>new Function</code> can be used.</p>
<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2023, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://fastly.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_=85b684f192"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';

var $list = $('#standard-nav');
$('.page-detail h2, .page-detail h3, .page-detail h4')
    .each(function () {
        var $this = $(this);
        var text = $this.text();
        var anchor = text.toLowerCase().replace(/[^\w\u4e00-\u9fa5]+/g, '-');
        var tagName = $this.prop('tagName').toLowerCase();

        if (tagName === 'h2') {
            $list.append('<li><a href="#' + anchor + '"><h4 class="inner">' + text + '</h4></a></li>');
        }
        else {
            $list.append('<li><a href="#' + anchor + '">' + text + '</a></li>');
        }
    });

$('.page-nav a').click(function () {
    $('.page-nav a').removeClass('active');
    $(this).addClass('active');
});

// Fix scroll position covered by nav
window.addEventListener('hashchange', function() {
    scrollBy(0, -50);
});

$('.page-detail pre code').each(function (index, el) {
    $(el).addClass('prettyprint');
});
prettyPrint();</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>