echarts双轴轴线不对齐的解决办法

背景：当设置双轴的时候，轴线的刻度数量、间距均由echart内部自动计算，导致两边的轴线大概率下不会对齐，如下图所示：

查询echarts配置文档，发现以下属性:

min: 坐标轴刻度最小值

max: 坐标轴刻度最大值

splitNumber：坐标轴的分割段数

interval：强制设置坐标轴分割间隔

OK，我们根据业务数据，定制化的计算相关属性值即可。

options.yAxis.forEach((y, index) => {// leftMax, rightMax的值，请自行根据自身数据计算，即：默认配置下的最大值// const { leftMax, rightMax} = this.getMaxValue();// index === 0时是左轴，1是右轴let max = !index ? rightMax + '' : leftMax + '';max = value === 'null' ? 0 : this.computeMax(max);y.splitNumber = SPLIT_NUMBER;y.interval = max / SPLIT_NUMBER;y.max = max;
});

const SPLIT_NUMBER = 4; // 分割段数/*** @description 根据实际最大值，计算轴的最大值* @param { String} value 实际的最大值(字符串的数字)* @returns { Number } 计算后的最大值*/
computeMax(value) {if (Math.floor(value) === 0) {  // 是小数let { result, digit } = getNumberFromDecimal(Number(value));result = result.substr(0, 2); // 取前两位return Number(Math.ceil(value / SPLIT_NUMBER) * SPLIT_NUMBER) / Math.pow(10, digit - 1 + 2);} else {const roundValue = Math.floor(value).toString();if (roundValue.length > 2) { // 两位以上const topTwo = roundValue.substr(0, 2);const len = roundValue.length;return Number(Math.ceil(topTwo / SPLIT_NUMBER) * SPLIT_NUMBER) * Math.pow(10, len - 2);} else {return Number(Math.ceil(value / SPLIT_NUMBER) * SPLIT_NUMBER);}}
}

/*** @description 获取小于0的小数中的数字* @param { Number } decimal  小数* @returns { result, digit } 小数点后不包括0的数字，小数点后的位数*/
getNumberFromDecimal = function(decimal) {let str = decimal.toString();if (typeof decimal !== 'number' || !str.includes('.')) {throw '参数不是小数';}if (decimal >= 1) {throw '参数大于等于1';}for (let i = 0; i < str.length; i ++) {if (str[i] !== '0' && str[i] !== '.') {return { result: str.substring(i, str.length), digit: i - 2 };}}
}

思路大致如上, 具体可根据自身业务做相应的调整。
附上最后效果图：

echarts双轴轴线不对齐的解决办法相关推荐

黑苹果win10双系统下文件名变灰色解决办法
黑苹果win10双系统下文件名变灰色解决办法如图所示: 打开终端,进入变灰色的文件所在的文件夹目录下执行 xattr -c *.* ,*.*是代表文件名和后缀,可以单独制定一个文件或者相同 ...
关于FusionChartsFree y轴不显示中文的解决办法
关于FusionChartsFree y轴不显示中文的解决办法 ---首先说明,小辈这是第一次写blog,下面的文章可能写的不是很好,希望前辈们多多指教! 在网上搜了很多关于"Fusion ...
（转）echarts 提示框tooltip被遮挡的解决办法
当echart的容器外部 dom 被设置为 overflow: hidden 时,提示框会被遮挡. 解决办法: 一.tooltip. confine tooltip: {confine: true / ...
cadz轴归零命令_关于CAD中Z轴坐标归零问题的解决办法
原标题:关于CAD中Z轴坐标归零问题的解决办法微信名:CAD吧每日经典CAD解决方案 ❶ 史上最齐全的CAD下载链接:http://pan.baidu.com/s/1skP5jhb 密码:9qm2 ...
在RedHat虚拟机下单/双引号打不出来的解决办法
今天不知道修改了什么设置,我在vim里面写程序的时候,发现单引号和双引号都打不出来. 双引号打出来的效果是¨ ¨ ,这会是导致程序出错!出现这种问题的原因是键盘布局与实际不相符,要进行修改. 一.单/ ...
不对齐谷歌浏览器_谷歌浏览器input上下不对齐兼容解决办法
最近项目中,须要写一个搜索框样式(样式很简单)以下:css 当写完代码,进行浏览器兼容性测试的时候,发如今谷歌浏览器下文本框和按钮没有对齐,文本框偏下一点,其余浏览器正常:样式以下:html 缘由:文 ...
Apache ECharts 官网布局排版错乱的解决办法
echarts图库官网:Apache ECharts 像上图中,有时候打开可能样式错乱,解决办法是强制刷新缓存就行了,连续点击刷新 ok了
win7+ubuntu14.04双系统出现的问题及解决办法
win10+ubuntu14.04双系统大概使用了几个月就要重装,于是个人觉得很有必要记录这一路走来在这上面所遇到的坑.也许大家会说,Linux才发展了二三十年而已,widows已经有了一个很长的历史 ...
element表格错位问题（表头和表格内容没有对齐）解决办法
element表格错位问题,表头和表格内容没有对齐,如下图: 解决办法: 在入口文件App.vue 样式中加以下内容: body .el-table th.gutter {display: table ...

echarts双轴轴线不对齐的解决办法

echarts双轴轴线不对齐的解决办法相关推荐

最新文章

热门文章