<!DOCTYPE html><html lang="zh-CN"><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，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。"><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/zh/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/zh/css/main.css?_v_=a95711177c"><script>window.EC_WWW_LANG = 'zh';
</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/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 &nbsp;</p><a id="a1" 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>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" 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/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（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/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<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">活动<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">捐赠<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">鸣谢<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('en')">EN</a></li></ul></div></div></nav><div class="page-main"><div class="page-info"><div class="container"><h1>FAQ</h1><p>常见问题的解答</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>常见问题</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">通用问题</h2><h3>有技术问题怎么办？</h3><p>1）建议您在提问前，大致阅读一下<a href="https://echarts.apache.org/zh/option.html">配置项手册</a>左侧导航，了解 ECharts 有哪些配置项，并且在相关的组件下查找是否有实现您需要功能的配置项；</p><p>2）查看本页常见问题的解答；</p><p>3）建议使用<a href="https://echarts.apache.org/examples/zh/editor.html">官方编辑器</a>、<a href="https://codepen.io/Ovilia/pen/dyYWXWM">CodePen</a>、<a href="https://codesandbox.io/s/echarts-basic-example-template-mpfz1s">CodeSandbox</a> 或 <a href="https://jsfiddle.net/plainheart/e46ozpqj/7/">JSFiddle</a> 添加图表，复现你的问题，如果无法使用代码描述需求，可以尝试提供设计稿或画个草图；</p><p>4）推荐在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问，附上图表链接。</p><h3>ECharts 可以免费商用吗？</h3><p>可以，ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 开源。</p><h2 id="axis">坐标轴</h2><h3>坐标轴标签显示空间不够怎么办？</h3><p>可以用 <a href="https://echarts.apache.org/zh/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签，设为 <code>0</code> 则显示所有标签。</p><p>或者，可以设置 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>，将标签旋转一定角度。</p><h3>把坐标轴设置在右侧好像没有效果？</h3><p>需要将 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。</p><h3>如何强制显示坐标轴第一个/最后一个标签？</h3><p>ECharts 3.5.2 版本起，支持 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> 以及 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>，分别用来控制第一个/最后一个标签是否强制显示，设为 <code>true</code> 则强制显示。</p><h2 id="legend">图例 legend</h2><h3>图例区域太大导致遮挡住图表怎么办？</h3><p>可以设置 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些，可以将绘图区域下移。</p><p>在未来的版本中，我们计划会将布局做得更智能，自动处理这些遮挡问题。</p><h2 id="line-chart">折线图</h2><h3>坐标轴刻度好像和数据不匹配？</h3><p>请检查一下是否设置了 <code>stack</code>，如果不是想做堆积折线图的话，应该将其去掉。</p><h2 id="bar-chart">柱状图</h2><h3>为什么数据值很小的时候，y 轴的刻度会消失？</h3><p>ECharts 3.5.2 版本修复了该问题。</p><h2 id="map-chart">地图</h2><h3>图表上的省份名称重叠，如何修改名称的位置？</h3><p>可以修改地图文件（JS 或 JSON）中对应省份的 <code>cp</code> 坐标，或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。</p><p>更详细的做法请参考：<a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a></p><h3>其他国家的地图在哪里下载？</h3><p>可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。</p><h3>如何获取地图的缩放事件？</h3><p>首先，需要将系列的 <a href="https://echarts.apache.org/zh/option.html#series-map.roam">roam</a> 设置为 <code>true</code>，然后可以监听 <code>'georoam'</code> 事件。例：</p><pre><code>myChart.on('georoam', function (params) {
   console.log(params);
});</code></pre><h3>如何制作自定义地图？</h3><p>ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具，上传自定义的 geojson 文件，生成 ECharts 可以使用的地图文件。</p><h2 id="baidu-map">百度地图</h2><h3>如何结合百度地图使用 ECharts？</h3><ol><li>引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=3.0&ak=这里填在百度开发平台注册得到的 access key</code>；</li><li>在 <code>option</code> 中设置 <code>bmap</code>，参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>；</li><li>如需获得百度地图实例，可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>，然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。</li></ol><h2 id="gauge-chart">仪表盘</h2><h3>怎么设置仪表盘颜色？</h3><p>可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。</p><h2 id="event">事件处理</h2><h3>如何获取图表点击等事件？</h3><p>参考<a href="https://echarts.apache.org/handbook/zh/concepts/event">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/zh/api.html#events">相关 API</a>。</p><h2 id="others">其他</h2><h3>图表为什么不显示？</h3><p>你可以检查以下情况：</p><ul><li><code>echarts.js</code> 是否正常被加载；</li><li><code>echarts</code> 变量是否存在；</li><li>调用 <code>echarts.init</code> 的时候，DOM 容器是否有宽高。</li></ul><h3>为什么在 Vue 中使用 ECharts 时图表显示异常？</h3><ul><li>如果你使用的是 Vue 3，请避免使用 <code>reactive</code> 及 <code>ref</code>。</li><li>如果你使用的是 Vue 2，请避免在 <code>data</code> 函数中声明 ECharts 的对象实例或使用 <code>Vue.observable</code> API。</li></ul><p>上述均会导致 ECharts 的对象实例被代理成为响应式对象，影响 ECharts 对内部属性的访问，可能会导致图表无法正确显示等一系列意外问题，且会由于深度监听而极大地降低图表展示性能。</p><p>解决方案为：使用普通变量声明 ECharts 对象实例，或使用 <code>shallowRef</code> / <code>shallowReactive</code> / <code>markRaw</code> 等 API 防止 ECharts 对象实例被代理。</p><p>另请参见 <a href="https://github.com/apache/echarts/issues/17723#issuecomment-1268311307" target="blank">#17723</a> 及 <a href="https://cn.vuejs.org/api/reactivity-advanced.html#markraw" target="blank">Vue 文档中的相关使用警告</a>。</p><h3>ECharts 有哪些学习资料？</h3><p>ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts" target="blank">awesome-echarts</a>。</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/zh/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/zh/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>