echarts使用中关于y坐标轴无法正常显示的问题解决记录
更新时间：2023年12月08日 10:06:08 作者：峰孑
Echarts是由百度提供的数据可视化解决方案,下面这篇文章主要给大家介绍了关于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' // 这里倒是可以用，后面在移植组件的时候就出现了问题
},
官网写法：
由上可知，要实现对颜色的配置，有以下两种方法：
- 在option内，用对象形式，lineStyle: { color: ‘black’ }
- 在option外，可以直接修改其属性值，yAxis.axisLine.lineStyle. color = ‘black’
而自己则写了两者取其中，不明白自己封装的组件内为什么正常，但是移植后，放进dialog里时便出现了问题。好歹搞了自己三小时，记录一下吧。以后要按规范来。
杂记
Q1在父组件内修改子组件的参数
F1：使用ref修改
在父组件里，给子组件加上ref标签，便可以获子组件里面的数据，并对其进行修改
F2:使用props实现父传子
通过props，可以实现值在父组件内修改（不过子组件内就得接收父组件里面传来的值了）
总结
到此这篇关于echarts使用中关于y坐标轴无法正常显示问题解决的文章就介绍到这了,更多相关echarts y坐标轴无法正常显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript对象的特性与实践应用,结合实例形式较为深入的分析了javascript对象的相关概念、操作方法及注意事项,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了详解微信小程序与内嵌网页交互实现支付功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了JS可断点续传文件上传实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
直接使用Math.round(x*100)存在一个问题，有时会有很小的误差，显示很多位的小数位，如0.9996*100，就会变成99.96000000000001，我想要的在下面，感兴趣的朋友可以参考下哈2013-07-07
这篇文章主要为大家详细介绍了JS实现京东商品分类侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
JavaScript中toLocaleString()和toString()的区别实例分析
这篇文章主要介绍了JavaScript中toLocaleString()和toString()的区别,结合实例形式对比分析了toLocaleString()和toString()针对字符串、数组与日期操作过程中的区别与使用技巧,需要的朋友可以参考下2018-08-08
话说最近在研究某著名跟踪系统，在其给用户的实施代码中有一段判断浏览器Javascript版本的代码引起了我的注意，于是问了下google如何判断浏览器的javascript版本2010-09-09
这篇文章主要介绍了js实现简洁的滑动门菜单(选项卡)效果代码,涉及javascript鼠标事件操作页面元素样式切换的实现技巧,简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了微信小程序单选框如何自定义赋值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了JavaScript时间与时间戳的转换操作,结合实例形式分析了javascript日期与时间戳转换相关函数与操作技巧,需要的朋友可以参考下2018-12-12
最新评论