echarts中双y轴刻度线对齐

最新推荐文章于 2024-08-01 12:56:53 发布

tt364102204

最新推荐文章于 2024-08-01 12:56:53 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/tt364102204/article/details/119794522

版权

该博客介绍了如何在Echarts中配置Y轴，确保两个轴的分割数相同且刻度线对齐。通过设置`splitNumber`、`interval`和`max`属性，保证了坐标轴的分割间隔一致，从而达到数据最大值向上取整并保持刻度线对齐的效果。示例代码展示了针对listOne和ListTwo数据的双轴配置方法。

摘要由CSDN通过智能技术生成

splitNumber设置分割的段数，必须一致
设置的max一定是大于或等于数据最大值，计算找出数据中最大值向上取整
interval强制设置坐标轴分割间隔，控制两边刻度比例一样才能保持刻度线对齐

// listOne 和 ListTwo 是API返回的数据
yAxis: [{
        // name: '左轴',
        type: 'value',
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.ceil(Math.max(...listOne )) / 5),
        max:Math.ceil(Math.ceil(Math.max(...listOne )) / 5) * 5,
        splitLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      {
        // name: '右轴',
        type: 'value',
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.ceil(Math.max(...ListTwo )) / 5),
        max: Math.ceil(Math.ceil(Math.max(...ListTwo )) / 5) * 5,
        splitLine: {
           lineStyle: {
             color: "#D8DAE1",
             type: "dashed"
           }
         }
        axisLabel: {
          textStyle: {
            color: '#585858'
          }
        }
      }
    ],