主题
通用问题
遇到技术问题怎么办?
1) 建议提问前先阅读左侧的配置项手册。在配置项手册中,可以查阅 ECharts 有哪些配置项,在相关的组件下,是否可以找到可以实现你所需要功能的配置项。
2) 浏览本页的常见问题。
3) 在官方编辑器、CodePen、CodeSandbox 或 JSFiddle 上创建一个简单的例子重现你的问题。如果不能用代码描述需求,可以尝试提供设计稿或画个草图。
4) 在stackoverflow上提问,并附上例子链接。
ECharts 是否可以免费使用?
是的,ECharts 是在Apache License 2.0下开源的。
坐标轴
坐标轴刻度标签空间不足怎么办?
你可以使用`interval`来控制显示多少个标签,将其设置为0以显示所有标签。
或者你可以设置`axisLabel.rotate`来将标签旋转一定角度。
为什么想把轴放在右边不生效?
你需要将`onZero`设置为false。
如何强制显示坐标轴的第一个/最后一个标签?
从 ECharts 3.5.2 版本开始,`axisLabel.showMinLabel` 和 `axisLabel.showMaxLabel` 都支持,可用于控制是否强制显示第一个/最后一个标签。
图例
图例区域与图表重叠了怎么办?
你可以通过设置`grid`来控制图表区域的位置。例如,设置一个更大的grid.top来将绘图区域向下移动。
我们计划在未来的版本中让布局更智能。
折线图
坐标轴刻度看起来和数据不一致?
检查是否设置了stack。如果你不想制作堆叠折线图,应该移除它。
柱状图
当值很小时,y轴刻度消失了,为什么?
ECharts 3.5 版本已修复此问题。
地图
省份名称在图表上重叠了。如何修改名称的位置?
你可以修改地图文件(JS 或 JSON)中对应省份的cp坐标,或者修改通过echarts.getMap('china')加载的地图数据。
更多详情,请参考GitHub。
我在哪里可以下载其他国家的地图?
其他国家的地图信息可以从这里下载。
如何获取地图的缩放事件?
首先,你需要将系列(series)的`roam`设置为true,然后监听'georoam'事件。例如:
myChart.on('georoam', function (params) {
console.log(params);
});如何制作我的自定义地图?
ECharts 地图是基于原始坐标额外编码的。你可以使用mapshaper-plus 工具上传自定义 geojson 文件,然后生成可在 ECharts 中使用的地图文件。
百度地图
如何将 ECharts 与百度地图结合使用?
- 引入
echarts.js、bmap.js和https://api.map.baidu.com/api?v=3.0&ak=您在百度开发平台获取的密钥。 - 在
option中设置bmap,你可以参考这个示例。 - 如果你需要获取百度地图实例,可以使用
chart.getModel().getComponent('bmap').getBMap(),然后根据百度地图 API 进行设置。
仪表盘
如何设置仪表盘颜色?
你可以使用`axisLine.lineStyle.color`。
事件处理
如何获取图表点击等事件?
阅读官方教程。ECharts 支持的事件类型可以在相关 API中找到。
其他
为什么图表没有显示?
你可以检查以下情况:
- 是否正常加载了
echarts.js。 - 是否存在
echarts变量。 - 调用
echarts.init时,DOM 容器是否具有宽度或高度。
在 Vue 中使用 ECharts 时,图表为什么不正常工作?
- 如果你在使用 Vue 3,请避免使用
reactive和ref。 - 如果你在使用 Vue 2,请避免在
data函数中声明 ECharts 实例对象,或使用Vue.observableAPI。
以上所有情况都会导致 ECharts 实例对象被代理为响应式对象,这可能会影响对 ECharts 内部模型属性的访问,并带来一些意想不到的问题和糟糕的性能。
建议将 ECharts 实例对象声明为普通变量,或者使用shallowRef / shallowReactive / markRaw API 来防止实例对象被代理。
另请参阅#17723以及Vue 文档中的使用注意事项。
是否有更多学习 ECharts 的资源?
请参考awesome-echarts获取更多相关项目和资源。