echarts 双坐标轴，左侧Y轴最大值随数据动态变化，右侧固定展示百分比

最新推荐文章于 2025-05-25 13:15:10 发布

banzhuanren1

最新推荐文章于 2025-05-25 13:15:10 发布

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts max

本文链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/101454297

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ECharts动态调整Y轴的最大显示值，通过应用Math.max函数结合apply方法从数组中获取最大值，并将其应用于图表配置中，实现数据可视化中Y轴范围的智能调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

啥都不说，直接上图上代码

  var max = Math.max.apply(null,[10,20,30,40,50,60,70]);//取出数组中最大值
  
  yAxis: [
            {
                type : 'value',
                scale: false,
                splitLine:{
                    show:false,
                    lineStyle:{
                        type:'dashed',
                        color: '#0786b3'
                    }
                },
                min: 0,
                max: max,  //设置左侧最大值
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#0786b3',
                        fontSize:'16'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#0786b3'
                    }
                }
            },
            {
                type: 'value',
                scale: true,
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'dashed',
                        color: '#0786b3'
                    }
                },
                max: 100,
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: '#1d5fcb'
                    }
                },
                axisLabel : {
                    formatter: '{value}%',  //右侧以百分比进行展示
                    show: true,
                    textStyle: {
                        color: '#00c3f4',
                        fontSize:'16'
                    }
                },
                textStyle: {
                    color: '#00c3f4',
                    fontSize:'16'
                }
                // boundaryGap: [0.2, 0.2]
            }
        ],

效果如下
在这里插入图片描述