<!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>FAQ - Apache ECharts</title><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="FAQ - Apache ECharts"></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"><div class="container"><h1>FAQ</h1><p>Frequently asked questions</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>Topics</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">General Questions</h2><h3>What to do if you have technical problem?</h3><p>1) It is recommended that you read the navigation on the left side of the <a href="https://echarts.apache.org/en/option.html">option manual</a> before you ask questions. In the option manual, you can find out what configuration items does ECharts have. And you can find under the relevant components whether there are configuration items that can implement the functions you need.</p><p>2) Browse FAQ questions on this page.</p><p>3) Create a simple example to reproduce your problem on <a href="https://echarts.apache.org/examples/en/editor.html">Official Editor</a>, <a href="https://codepen.io/Ovilia/pen/dyYWXWM">CodePen</a>, <a href="https://codesandbox.io/s/echarts-basic-example-template-mpfz1s">CodeSandbox</a> or <a href="https://jsfiddle.net/plainheart/e46ozpqj/7/">JSFiddle</a>. If you can't use the code to describe the requirements, you can try to provide a design draft or draw a sketch.</p><p>4) Ask questions on <a href="https://stackoverflow.com">stackoverflow</a> and attach the example link.</p><h3>Is ECharts free to use?</h3><p>Yes, ECharts is open-sourced under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p><h2 id="axis">Axis</h2><h3>What should I do if the axis label doesn't have enough space?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#xAxis.interval">interval</a> to control how many labels are displayed,  set it to <code>0</code> to display all labels.</p><p>Or you can set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a> to rotate the label a certain angle.</p><h3>Why does it not work when you want to put the axis on the right side?</h3><p>You need to set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLine.onZero">onZero</a> to <code>false</code>.</p><h3>How do I force the first / last label of the axis to be displayed?</h3><p>Both <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> and <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a> are supported since ECharts version 3.5.2. It can be used to control whether the first / last tags are forced to display.</p><h2 id="legend">legend</h2><h3>What should I do if the legend area overlapped on the chart?</h3><p>You can set the <a href="https://echarts.apache.org/en/option.html#grid">grid</a> to control the position of the chart area. For example, Set a larger <code>grid.top</code> to move drawing area down.</p><p>We are planning to make the layout smarter in the future versions.</p><h2 id="line-chart">line-chart</h2><h3>The ticks on the coordinate axis seems different with the data?</h3><p>Check if you set the <code>stack</code>. You should remove it if you don't want to make a stack line chart.</p><h2 id="bar-chart">bar-chart</h2><h3>Why does the y-axis scale disappear when the values are small?</h3><p>Version 3.5 of ECharts has been fixed this issue.</p><h2 id="map-chart">map-chart</h2><h3>Province names overlap on the chart. How to modify the location of the names?</h3><p>You can modify the <code>cp</code> coordinates of the corresponding province in the map file (JS or JSON), or modify the map data that has been loaded by <code>echarts.getMap('china')</code>.</p><p>For more details, please refer to <a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a>.</p><h3>Where can I download maps from other countries?</h3><p>Map information for other countries can be downloaded from <a href="https://github.com/echarts-maps/echarts-countries-js">here</a>.</p><h3>How can I get the zoom event of a map?</h3><p>First, you need to set the series's <a href="https://echarts.apache.org/en/option.html#series-map.roam">roam</a> to <code>true</code> and then listen for the <code>'georoam'</code> event. Such as:</p><pre><code>myChart.on('georoam', function (params) {
   console.log(params);
});</code></pre><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate a map file that can be used in Echarts.</p><h2 id="baidu-map">baidu-map</h2><h3>How to use ECharts with Baidu Map?</h3><ol><li>Include <code>echarts.js</code>, <code>bmap.js</code> and <code>https://api.map.baidu.com/api?v=3.0&ak=Here is the access key you obtained on the Baidu development platform</code>.</li><li>Set <code>bmap</code> in <code>option</code>，You can refer to this <a href="https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap">example</a>.</li><li>If you need to get a Baidu map instance, you can use <code>chart.getModel().getComponent('bmap').getBMap()</code>，and then make do settings based on <a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">Baidu Maps API</a> .</li></ol><h2 id="gauge-chart">gauge-chart</h2><h3>How to set the dashboard color?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a>.</p><h2 id="event">Event processing</h2><h3>How do I get events such as chart clicks?</h3><p>Read the <a href="https://echarts.apache.org/handbook/en/concepts/event">official tutorial</a>. The types of events supported by ECharts can be found in the <a href="https://echarts.apache.org/en/api.html#events">related API</a>.</p><h2 id="others">others</h2><h3>Why is the chart not displayed?</h3><p>You can check the following situations：</p><ul><li>Whether <code>echarts.js</code> is loaded normally.</li><li>Whether<code>echarts</code>  variable exists.</li><li>Whether the DOM container has a width or height when calling <code>echarts.init</code>.</li></ul><h3>Why does the chart not work correctly when using ECharts in Vue?</h3><ul><li>If you are using Vue 3, avoid using <code>reactive</code> and <code>ref</code>.</li><li>If you are using Vue 2, avoid declaring the ECharts instance object in the <code>data</code> function or using the <code>Vue.observable</code> API.</li></ul><p>All of the above will cause the ECharts instance object to be proxied as a reactive object, which may affect the access to the properties of inner models of ECharts and bring some unexpected issues and lousy performance.</p><p>The suggestion is to declare the ECharts instance object as a normal variable, or use <code>shallowRef</code> / <code>shallowReactive</code> / <code>markRaw</code> API to prevent the instance object from being proxied.</p><p>See also <a href="https://github.com/apache/echarts/issues/17723#issuecomment-1268311307" target="blank">#17723</a> and <a href="https://vuejs.org/api/reactivity-advanced.html#markraw" target="_blank">the usage caution from Vue documentation</a>.</p><h3>Are there more resources for learning ECharts?</h3><p>Please refer to <a href="https://github.com/ecomfe/awesome-echarts" target="blank">awesome-echarts</a> for more related projects and resources.</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-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>