Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题
> [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA)
## 一、问题如图所示
![image.png](https://upload-images.jianshu.io/upload_images/9495732-dc06f25adeb41049.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##
> 为了美观必须要去掉一个Y轴的分割线,然而去掉一条后数值跑偏对不上
![image.png](https://upload-images.jianshu.io/upload_images/9495732-064f989d05e75684.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
## 二、 计算Y轴最大值,基于最大值均分
##### 取出每一列最大值
> 在堆积图表中需要取出每一个X轴对应的多个series item的值,进行累计得出当前X轴最大值,最后取出所有X轴的最大值。如下图:
![image.png](https://upload-images.jianshu.io/upload_images/9495732-37f4a68cb6db85f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```js
var series = [{
yAxisIndex: 0,
name: '直接访问',
type: 'bar',
stack: '总量',
data: [2, 2, 2, 2, 2, 2, 11]
}, {
yAxisIndex: 0,
name: '直接访问2',
type: 'bar',
stack: '总量',
data: [2, 2, 2, 2, 2, 2, 17]
}, {
name: '转化率',
type: 'line',
data: [90, 60, 80, 30, 15, 68, 77],
yAxisIndex: 1
}]
const Y1Series = [];
const Y2Series = [];
let Y2Max = 0;
let Y1Max = 0;
series.forEach((item) => {
if (item.yAxisIndex === 0) {
Y1Series.push(item.data)
} else {
Y2Series.push(item.data)
}
})
/*
此时
Y1Series = [[2, 2, 2, 2, 2, 2, 11],[2, 2, 2, 2, 2, 2, 17]]
Y1Series = [90, 60, 80, 30, 15, 68, 77]
*/
/*
params { array } [] => [[series.data],[series.data]],[series.data]]]
return number
*/
function getYaxisMax(seriesList) {
var res = [];
seriesList.forEach((item) => {
item.forEach((i, idx) => {
if (!res[idx]) {
if (isNaN(i / 1)) {
res[idx] = 0
} else {
res[idx] = i / 1
}
} else {
if (isNaN(i / 1)) {
res[idx] += 0
} else {
res[idx] += i / 1
}
}
})
});
return Math.max.apply(null, res)
}
Y1Max = getYaxisMax(Y1Series) // Y1轴最大值
Y2Max = getYaxisMax(Y2Series) // Y2轴最大值
```
##### 如下图所示
> 现在虽然2个Y周的刻度分割线一致了,但是新的问题有来了
> 2条Y轴的刻度值,和刻度间隔值。存在小数,且间隔值并不是 5,50,10,100之类的数
![image.png](https://upload-images.jianshu.io/upload_images/9495732-e80a79fd9184cc87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
### 三、解决刻度间隔值问题
```js
// 刻度最大值
function yAxisMax(maxValue) {
if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
return 10
}
const max = Math.ceil(maxValue) + '';
const itemValue = Math.ceil(max / 5) + '';
const mins = Math.ceil((itemValue / Math.pow(10, itemValue.length - 1)))
const item = mins * Math.pow(10, itemValue.length - 1) + '';
// item 需要是5的整数倍
const res = Math.ceil(item / 5) * 5 * 5;
return res
}
```
##### 最终效果
![image.png](https://upload-images.jianshu.io/upload_images/9495732-bc6159a0e396cd36.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![image.png](https://upload-images.jianshu.io/upload_images/9495732-b06ee1d7a289607e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA)
Echarts双Y轴刻度分割线对不齐问题相关推荐
- 实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致 原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
- ECharts双y轴设置0刻度对齐,左右刻度根据数据变化?
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
- echarts双y轴实现(解决刻度线不对齐)
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
- 【echarts双y轴:左右轴数据分开设置最大值(解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
- echarts双Y轴(简单明了)
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致 图例分布显示 坐标轴刻度标签数值取整 X/Y轴名称的分布 坐标轴刻度标签数值以某一值 ...
- Echarts双Y轴图表处理
前言 近期开发遇到双Y轴的折线图需求,遇到了一些问题,在这里记录分享(附完整option代码,基于vue-echarts) 1.双Y轴自定义Y轴显示样式(加 '%'和正常显示) 2.双Y轴鼠标划入自定 ...
- 总结整理Echarts双y轴曲线图(全)
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
- echarts y轴只显示5个刻度_Echarts 双Y轴刻度不一致
项目中使用了 百度Echarts 根据项目需要,要实现双Y轴展示柱状图 最终的样子是这样的 最终效果 实现过程中遇到的问题 一开始是这个样子的(因为没有设置max min,天真的以为只要有数据,就会系 ...
- echarts 刻度 双y轴_ECharts 解决双Y轴刻度不一致问题
若最大最小值固定,直接初始化设置option的yAxis的min和max属性值即可: 假设已知固定最大最小值为0和1. var option = { ... yAxis:[ { name: " ...
最新文章
- cf 414B Mashmokh and ACM 动态规划
- 函数 —— strtok() 例如:Fred male 25,John male 62,Anna female 16两层循环
- 【CVPR2020论文解读】300米远程深度估计:港科大重磅开源自动驾驶深度感知新技术,远超现有雷达...
- Valentine's Day Round hdu 5176 The Experience of Love [好题 带权并查集 unsigned long long]
- 帧率ffmepg 摄像头_【WIN电竞】CSGO解除锁帧方法介绍
- Time value help in webclient UI
- 【Flink】flink highavailabilityservices 源码解析
- C语言以字符形式读写文件
- AD制作gerber文件详细步骤
- filmimpact安装教程,PR插件『FilmImpact.net』下载与安装教程
- IIS的ISAPI接口简介
- Mandriva Linux 2012 Alpha 2 发布
- 怎么检查APP是否存在用户信息数据泄露漏洞
- sis最新ip地址2020入口一_2020最新国风修仙问道3DMMORPG手游大道争锋官网正版首发入口...
- CentOS8离线安装mono
- 移动硬盘数据莫名丢失,如何才能恢复
- android 相机自动延时拍照软件,延时摄影大师app下载-延时摄影大师 安卓版v3.0-PC6安卓网...
- java建立英文停用词表_pyhanlp 停用词与用户自定义词典
- 百度信息流介绍,没有比这更详细的啦
- android 后台自动拍照,怎么实现后台拍照功能,求解