Echarts中柱状图两个y轴最大值、最小值、进值

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

原创最新推荐文章于 2025-05-25 13:15:10 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

本文介绍了一个用于图表数据处理的封装函数，该函数可以根据输入的数据自动调整坐标轴的最大值、最小值及间隔，适用于百分比显示场景。

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

（右边y轴为百分比）

在这里插入图片描述

封装函数

export function houseFormat(data1,data2) {
    let  sumVal=Math.max(...data1)
    let  maxnum=Math.max(...data2)

    let axisData={
        ymax:'', //y轴最大值
        ymin:0, //y轴最小值
        yinterval:'',  //y轴进值
        xmin:0, //x轴最小值
        xmax:'',  //x轴最大值
        xinterval:'', //x轴进值
    }
    if(sumVal>0){
        axisData.ymax=sumVal*1.2
    }else{
        axisData.ymax=5
    }
    axisData.yinterval=Math.ceil((axisData.ymax-axisData.ymin)/5)
    axisData.ymax=axisData.ymin+(axisData.yinterval*5)

    if(maxnum>0){
        axisData.xmax=maxnum*1.2
    }else{
        axisData.xmax=5
    }
    axisData.xinterval=Math.ceil((axisData.xmax-axisData.xmin)/5)
    axisData.xmax=axisData.xmin+(axisData.xinterval*5)
    console.log(axisData,'66')
    return axisData
}

## 使用
引入 mixins文件import {houseFormat,} from "@/mixins";
let axisData={}
axisData=houseFormat(list1,list2) //传入两个数组
        yAxis: [
          {
            type: "value",
            min: axisData.ymin,
            max: axisData.ymax,
            interval:axisData.yinterval,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                // color: "#f4f4f4",
                fontSize: "14px"
              }
            }
          },
          {
            type: 'value',
            name: '',
            min: axisData.xmin,
            max: axisData.xmax,
            interval:axisData.xinterval,
            axisLabel: {
              formatter: '{value} %'
            }
          },
        ],