主题
一般问题
如果遇到技术问题该怎么办?
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。
在哪里可以下载其他国家的地图?
可以从 这里 下载其他国家的地图信息。
如何获取地图的缩放事件?
首先,您需要将系列的 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.observable
API。
以上所有操作都会导致 ECharts 实例对象被代理为响应式对象,这可能会影响对 ECharts 内部模型属性的访问,并带来一些意想不到的问题和不良的性能。
建议将 ECharts 实例对象声明为普通变量,或使用 shallowRef
/ shallowReactive
/ markRaw
API 来防止实例对象被代理。
另请参阅 #17723 和 Vue 文档中的使用注意事项。
是否有更多学习 ECharts 的资源?
请参阅 awesome-echarts 以获取更多相关项目和资源。