_jade/zh/faq.jade

extends ../layouts/basic

block variables
    - var pageTitle = 'ECharts FAQ'

block extra_head
    title FAQ - Apache ECharts

block content
    nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
        include ../components/nav

    .page-main
        .page-info
            .container
                h1 FAQ
                p 常见问题的解答
                p.page-info-echarts Apache ECharts<sup>TM</sup>

        .page-content.single-page#faq-page
            .page-nav
                h4 常见问题
                ul
            .page-detail

                h2#ask-questions 通用问题
                h3 有技术问题怎么办？
                p 1）建议您在提问前，大致阅读一下<a href="https://echarts.apache.org/zh/option.html">配置项手册</a>左侧导航，了解 ECharts 有哪些配置项，并且在相关的组件下查找是否有实现您需要功能的配置项；
                p 2）查看本页常见问题的解答；
                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 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> 等问答平台上提问，附上图表链接。

                h3 ECharts 可以免费商用吗？
                p 可以，ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 开源。

                h2#axis 坐标轴
                h3 坐标轴标签显示空间不够怎么办？
                p 可以用 <a href="https://echarts.apache.org/zh/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签，设为 <code>0</code> 则显示所有标签。
                p 或者，可以设置 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>，将标签旋转一定角度。

                h3 把坐标轴设置在右侧好像没有效果？
                p 需要将 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。

                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> 则强制显示。



                h2#legend 图例 legend
                h3 图例区域太大导致遮挡住图表怎么办？
                p 可以设置 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些，可以将绘图区域下移。
                p 在未来的版本中，我们计划会将布局做得更智能，自动处理这些遮挡问题。



                h2#line-chart 折线图
                h3 坐标轴刻度好像和数据不匹配？
                p 请检查一下是否设置了 <code>stack</code>，如果不是想做堆积折线图的话，应该将其去掉。



                h2#bar-chart 柱状图
                h3 为什么数据值很小的时候，y 轴的刻度会消失？
                p ECharts 3.5.2 版本修复了该问题。



                h2#map-chart 地图
                h3 图表上的省份名称重叠，如何修改名称的位置？
                p 可以修改地图文件（JS 或 JSON）中对应省份的 <code>cp</code> 坐标，或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。
                p 更详细的做法请参考：
                    a(href='https://github.com/apache/echarts/issues/4379#issuecomment-257765948') GitHub

                h3 其他国家的地图在哪里下载？
                p 可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。

                h3 如何获取地图的缩放事件？
                p 首先，需要将系列的 <a href="https://echarts.apache.org/zh/option.html#series-map.roam">roam</a> 设置为 <code>true</code>，然后可以监听 <code>'georoam'</code> 事件。例：
                pre
                    code
                        | myChart.on('georoam', function (params) {
                        |    console.log(params);
                        | });

                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 可以使用的地图文件。



                h2#baidu-map 百度地图
                h3 如何结合百度地图使用 ECharts？
                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 在 <code>option</code> 中设置 <code>bmap</code>，参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>；
                    li 如需获得百度地图实例，可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>，然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。



                h2#gauge-chart 仪表盘
                h3 怎么设置仪表盘颜色？
                p 可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。



                h2#event 事件处理
                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>。



                h2#others 其他
                h3 图表为什么不显示？
                p 你可以检查以下情况：
                ul
                    li <code>echarts.js</code> 是否正常被加载；
                    li <code>echarts</code> 变量是否存在；
                    li 调用 <code>echarts.init</code> 的时候，DOM 容器是否有宽高。

                h3 为什么在 Vue 中使用 ECharts 时图表显示异常？
                ul
                    li 如果你使用的是 Vue 3，请避免使用 <code>reactive</code> 及 <code>ref</code>。
                    li 如果你使用的是 Vue 2，请避免在 <code>data</code> 函数中声明 ECharts 的对象实例或使用 <code>Vue.observable</code> API。
                p 上述均会导致 ECharts 的对象实例被代理成为响应式对象，影响 ECharts 对内部属性的访问，可能会导致图表无法正确显示等一系列意外问题，且会由于深度监听而极大地降低图表展示性能。
                p 解决方案为：使用普通变量声明 ECharts 对象实例，或使用 <code>shallowRef</code> / <code>shallowReactive</code> / <code>markRaw</code> 等 API 防止 ECharts 对象实例被代理。
                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>。

                h3 ECharts 有哪些学习资料？
                p ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts" target="blank">awesome-echarts</a>。

                include ../components/inner-footer

block extra_js
    script(type='text/javascript').
        document.getElementById('nav-doc').className = 'active';