<!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="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="./css/main.css?_v_=1571075695155"><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>Features - Apache ECharts (incubating) </title><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="./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 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">Documents<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/cheat-sheet.html">Cheat Sheet<span class="new">NEW</span></a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/option-gl.html">GL Configuration (Chinese)</a></li><li><a href="https://echarts.apache.org/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://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="#" data-toggle="dropdown" class="dropdown-toggle">Examples<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/examples/en/">ECharts Examples</a></li><li><a href="https://echarts.apache.org/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://echarts.apache.org/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://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://www.apache.org/licenses/">License</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/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://echarts.apache.org/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"><div class="container"><h1>Features</h1></div></div><div class="page-content single-page"><div class="page-nav"><h4>Features</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">ECharts is an open-sourced JavaScript visualization tool, which can run fluently on PC and mobile devices. It is compatible with most modern Web Browsers, e.g., IE8/9/10/11, Chrome, Firefox, Safari and so on. ECharts depends on <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.</p><h2 id="chart-types">Abundant Chart Types</h2><p>The basic chart types ECharts supports include <a href="option.html#series-line" target="_blank">line series</a>, <a href="option.html#series-line" target="_blank">bar series</a>, <a href="option.html#series-scatter" target="_blank">scatter series</a>, <a href="option.html#series-pie" target="_blank">pie charts</a>, <a href="option.html#series-candlestick" target="_blank">candle-stick series</a>, <a href="option.html#series-boxplot" target="_blank">boxplot series</a> for statistics, <a href="option.html#series-map" target="_blank">map series</a>, <a href="option.html#series-heatmap" target="_blank">heatmap series</a>, <a href="option.html#series-lines" target="_blank">lines series</a> for directional information, <a href="option.html#series-graph" target="_blank">graph series</a> for relationships, <a href="option.html#series-treemap" target="_blank">treemap series</a>, <a href="option.html#series-sunburst">sunburst series</a>, <a href="option.html#series-parallel" target="_blank">parallel series</a> for multi-dimensional data, <a href="option.html#series-funnel" target="_blank">funnel series</a>, <a href="option.html#series-gauge" target="_blank">gauge series</a>. And it's extremely easy to create a combinition of them with ECharts.</p><p>Besides the built-in chart types, ECharts also provide the <a href="option.html#series-custom">customed series</a> for users to create a specific chart types. To use it, you should only pass in a callback function named <em>renderItem</em>, and return any graphic elements you wish to draw to according to the data. What makes it even better is that it can interact with the existing ECharts components and you don't have to worry about the interaction with them.</p><p>If the default package size is too large for you, you can choose the chart types and components you need and download in <a href="builder.html">the online builder</a>.</p><h2 id="dataset">Multiple Data Format Ready-To-Use</h2><p>The built-in <code>dataset</code> attribute from ECharts v4.0 supports data formats including two-dimensional table, key-value object, and so on. The map from data to graphic can be easily set by the <code>encode</code> attribute. This is a more intuitive way to think when developing a chart, and it saves much time writing data-converting steps for developpers. Futhermore, it saves memory since different components can share on piece of data rather than copying.</p><p>ECharts supports TypedArray, which occupies less memory than array and is more gabbage-collection-friendly. For big data visualization, it is suggested to use TypedArray to improve performance.</p><h2 id="big-data">Data Visualization of Tens of Millions on Web</h2><p>With the help of imcremental rendering technique since v4.0 and optimization of all ascpects, ECharts can display the visualization of tens of millions of data. What's more, interactions like scaling and transforming are fluent all the same.</p><p>Tens of millions of data usually takes over hundreds of MB spaces. ECharts provide streaming data ability since v4.0 and makes it possible to render as much data as loaded from WebSocket. There is no need to wait for all data to be loaded to start rendering.</p><img src="./images/features/scatterGL.png" width="60%"><br /><img src="./images/features/scatterGL2.png" width="30%"><img src="./images/features/scatterGL3.png" width="30%"><h2 id="mobile">Mobile Optimization</h2><p>ECharts has been carefully optimized for mobile interaction, such zooming and panning the coordinate system with your fingers on small screens. The PC users can also use the mouse wheel to do the same interaction.</p><p>The fine-grained modularity and packaging mechanism allows ECharts to have a small package size on the mobile, and the optional SVG rendering engine makes the memory cost of the mobile much smaller.</p><iframe data-src="https://echarts.baidu.com/gallery/view.html?c=area-simple&amp;reset=1&amp;edit=1&amp;renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">Multi-Rendering Solutions and Cross-Platform Support</h2><p>ECharts supports rendering charts in the form of Canvas, SVG (v4.0+), and VML. VML is compatible with lower versions of IE; SVG reduces the memory cost on mobiles; and Canvas can easily handle large data visualization and special rendering effects. Different rendering methods provide more choices, making ECharts performs better in different scenarios.</p><p>In addition to PC and mobile browsers, ECharts can also be used with node-canvas on Node for efficient server-side rendering (SSR). And ECharts support Wechat Applet rendering since v4.0.</p><p>Community contributors also provide us with a variety of different language extensions. For example, <a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a> for Python, <a href="https://github.com/cosname/recharts" target="_blank">recharts</a> for R, <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> for Julia and so on.</p><p>We hope that the platform and language will not be the limit for everyone to use ECharts for visualization!</p><h2 id="interaction">Interactive Data Exploration In-Depth</h2><p>Interaction is an important means of mining information from data. Overview first, zoom filtering to view details as needed is a basic requirement for data visualization interaction.</p><p>ECharts has been on the road of <em>interaction</em>. We have provided <a href="option.html#legend" target="_blank">legend</a>, <a href="option.html#visualMap" target="_blank">visualMap</a>, <a href="option.html#dataZoom" target="_blank">dataZoom</a>, <a href="option.html#tooltip" target="_blank">tooltip</a>, <a href="option.html#brush">brushing</a> and other ready-to-use interactive components, which can perform interactive operations such as multi-dimensional data screening, view zooming, and display details on the data.</p><iframe data-src="https://echarts.baidu.com/gallery/view.html?c=scatter-matrix&amp;reset=1&amp;edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">Multi-Dimensional Data Support and Rich Visual Coding</h2><p>ECharts 3 began to strengthen support for multi-dimensional data. In addition to the common multi-dimensional data visualization tools such as parallel coordinates, for traditional scatter plots, etc., the input data can also be multiple dimensions. With the rich visual coding provided by the visual mapping component <a href="option.html#visualMap" target="_blank">visualMap</a>, it is possible to map data of different dimensions to color, size, transparency, shading, etc. Different visual channels.</p><iframe data-src="https://echarts.baidu.com/gallery/view.html?c=scatter-nutrients-matrix&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">Dynamic Data</h2><p>ECharts is driven by data, and changes in data drive changes in the chart. So the implementation of dynamic data has become extremely simple, just need to get the data, fill in the data, ECharts will find the difference between the two sets of data and then use the appropriate animation to represent the data changes. The <a href="option.html#timeline" target="_blank">timeline</a> component can present data information in a higher time dimension.</p><iframe data-src="https://echarts.baidu.com/gallery/view.html?c=scatter-life-expectancy-timeline&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">Special Effects</h2><p>ECharts provides eye-catching effects for the visualization of geographic data such as line data and point data.</p><iframe data-src="https://echarts.baidu.com/gallery/view.html?c=lines-bmap-effect&amp;reset=1&amp;edit=1" width="60%" height="400"></iframe><h2 id="gl">More Powerful and Beautiful 3D Visualization with GL</h2><p>Do you want to achieve 3D visualization in VR, large screen scenes? We provide WebGL-based ECharts GL. You can use ECharts GL to draw 3D Earth, buildings, and population distribution histograms as easily as ECharts common components. Furthermore, we also provide configuration items so that you can get artistic results with a few lines of configuration!</p><img src="./images/features/flowGL-line.jpg" width="40%"><img src="./images/features/buildings-ny.jpg" width="40%"><br /><img src="./images/features/capetown-taxi.png" width="40%"><img src="./images/features/population.png" width="40%"><h2 id="aria">Accessibility</h2><p>When we talk about visualization, we tend to naturally associate it with seeing, but it is one-sided. The W3C has developed the Accessible Rich Internet Applications Suite (WAI-ARIA), which aims to make web content and web applications accessible to more people with disabilities.</p><p>ECharts 4.0 complies with this specification and supports automatic generation of descriptions based on chart configuration items, enabling people with visual disabilities to understand the chart content with the help of reading devices, so that charts can be accessed by more people!</p></div></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="./js/common.js"></script><script type="text/javascript">document.getElementById('nav-doc').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></html>