ECharts Y轴刻度不显示问题排查与组件通信技巧

前言

此前封装了一个图表组件，主要功能是根据传入的数据和用户手动配置的参数（如图）进行渲染。用户点击提交后，图表即可展示，同时组件还包含其他辅助功能。目前数据为本地Mock，尚未与后端接口对接。

在将该组件移植到公司内部项目时，发现纵坐标的刻度无法正常显示，具体表现如下图所示。

经过约三小时的排查，最终定位问题根源在于Y轴的配置方式。

// 组件代码
const yAxis = {
            type: 'value',
            name: `单位：${item.unit}`,
            position: item.axisLocation === '0' ? 'left' : 'right', // y轴的位置
            offset: item.axisLocation === '0' ? 70 * (++leftIndex - 1) : 70 * (++rightIndex - 1),
            alignTicks: true, // 开启该配置项自动对齐刻度
            axisLine: {
              show: true,
              onZero: false,
              // lineStyle: { color }
              lineStyle: { color: 'black' }
              // lineStyle: 'black' // 这里倒是可以用，后面在移植组件的时候就出现了问题
            },

参考ECharts官方文档的写法：

根据上述文档，配置颜色主要有两种途径：

• 在option对象内部，以对象形式指定lineStyle: { color: 'black' }。
• 在option对象外部，直接修改属性值，即yAxis.axisLine.lineStyle.color = 'black'。

此前的封装代码中混合使用了这两种方式，导致在正常环境下运行无误，但移植到Dialog组件中时出现异常。此次排查耗时较长，特此记录，以便日后严格遵循规范配置。

杂记

Q1：如何在父组件中修改子组件的参数？

F1：使用ref进行修改。

在父组件中为子组件添加ref标签，即可获取子组件实例及其内部数据，进而对其进行修改。

F2：使用props实现父传子。

通过props机制，可以在父组件中修改值并传递给子组件（前提是子组件需接收该传来的值）。

总结

至此，关于ECharts Y轴刻度不显示问题的解决及组件通信技巧介绍完毕。如需了解更多相关内容，可搜索本站历史文章或继续浏览后续文章，感谢支持。