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

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

  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]
            }
        ],

效果如下
echarts 双坐标轴,左侧Y轴最大值随数据动态变化,右侧固定展示百分比_第1张图片

你可能感兴趣的:(echarts)