实现ECharts双Y轴左右刻度线一致

原文链接：https://blog.csdn.net/qq_40845885/article/details/82108525
博主亲测可用哦，先上图：
这是未解决的，双Y轴左右刻度线不一致

这是已解决的，双Y轴左右刻度线一致

1、原因

刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。

2、思路

根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。

3、解决方法

①首先固定两边的分隔的段数。

①分别求出左边Y轴和右边Y轴的最大值max和最小值min，根据max和min之间的和去除以分隔的段数，分别算出左边Y轴和右边Y轴的分隔间隔。

②在ECharts中有两个很重要的属性：

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

splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

根据上面的值，结合min和max属性去配置ECharts。

4、源码

app.title = '折柱混合';//计算最大值function calMax(arr) {let max = 0;arr.forEach((el) => {el.forEach((el1) => {if (!(el1 === undefined || el1 === '')) {if (max < el1) {max = el1;}}})})let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度let maxval = maxint * 10;//让显示的刻度是整数return maxval;}//计算最小值function calMin(arr) {let min = 0;arr.forEach((el) => {el.forEach((el1) => {if (!(el1 === undefined || el1 === '')) {if (min > el1) {min = el1;}}})})let minint = Math.floor(min / 10);let minval = minint * 10;//让显示的刻度是整数return minval;}var data1 = [59357.9, 52789.77, 24837.98, 14345.02, 2291.93],data2 = [-12108.81, 701.43, 1280.75, -2109.83, -18693.95],data3 = [0, -11.07, -52.95, -42.25, -84.02],data4 = [0, 105.79, 82.59, -264.73, -786.04]var Min1 = calMin([data1, data2]), Min2 = calMin([data3, data4]),Max1 = calMax([data1, data2]), Max2 = calMax([data3, data4]);option = {grid: {left: '100', right: '100', bottom: '100', top: '100'},color: ['#0698d6', '#fd8246', '#d773b4', '#41ac7c', '#e86367', '#aada9c'],tooltip: {trigger: 'axis', axisPointer: {type: 'cross', crossStyle: {color: '#999'}}},legend: {data: ['营业收入', '净利润', '营业收入同比增长率', '净利润同比增长率']},xAxis: [{type: 'category',show: false,lineWidth: 0,axisPointer: {type: 'shadow'},data: ["2013-12-31", "2014-12-31", "2015-12-31", "2016-12-31", "2017-12-31"]}],yAxis: [{name: '单位：万元',nameTextStyle: {color: '#999999'},type: "value",axisLine: {show: false},axisTick: {show: false},axisLabel: {verticalAlign: "bottom", color: "#999999"},min: Min1,max: Max1,splitNumber: 5,interval: (Max1 - Min1) / 5}, {name: '单位：%',type: 'value',nameTextStyle: {color: '#999999'},axisLine: {show: false},axisTick: {show: false},axisLabel: {verticalAlign: "bottom", color: "#999999"},min: Min2,max: Max2,splitNumber: 5,interval: (Max2 - Min2) / 5}],series: [{name: '营业收入', type: 'bar', barGap: 0, barWidth: 30, data: data1},{name: '净利润', type: 'bar', barGap: 0, barWidth: 30, data: data2},{name: '营业收入同比增长率', type: 'line', yAxisIndex: 1, data: data3},{name: '净利润同比增长率', type: 'line', yAxisIndex: 1, data: data4}]}

实现ECharts双Y轴左右刻度线一致相关推荐

轻松完美-实现ECharts双Y轴左右刻度线一致
不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value' ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整 X/Y轴名称的分布坐标轴刻度标签数值以某一值 ...
echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
可视化篇（四）——— python绘制双y轴、箱线图、概率分布三种图形及案例
可视化篇(四)--- python绘制双y轴.箱线图.概率分布三种图形及案例摘要绘制双y轴图形绘制箱线图绘制概率分布图摘要本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形 ...

实现ECharts双Y轴左右刻度线一致

实现ECharts双Y轴左右刻度线一致

1、原因

2、思路

3、解决方法

4、源码

实现ECharts双Y轴左右刻度线一致相关推荐

最新文章

热门文章