解决echartsY轴或x轴溢出的问题

不喜欢吃饼

已于 2024-07-31 14:50:09 修改

阅读量2.6k

点赞数 7

于 2024-07-23 15:58:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57760759/article/details/140636362

版权

1、问题描述

最近在项目中使用echarts的时候，遇到数据量大的情况下图表的y轴或x轴会溢出，导致显示不完全。

举个例子：

2、解决办法

1、翻阅了相关的资料，最简单的是你可以给grid设置一个属性，（containLabel: true）有可能会解决问题

  grid: {
    bottom: '0%',
    right: '0%',
    left: '0%',
    containLabel: true
  },

效果如下：

2、但是在某些情况下你设置了这个属性也是不管用的（比如Y轴的值很小，但是x轴的name很长）

这个时候我想的是如果grid这个配置的left可以根据我们Y轴或者x轴的长度自适应就好了（核心：就是比较x轴最长的name与Y轴最大值俩者显示完全需要的宽度做出对比，取较大者就行），于是我就想出一下这个方法（方法可能不满足你的需求，但提供了一种思路，可以在这个基础下封装）

2.1 首先我们创建一个文件，用于存储我们计算的方法（文件名：chartUtils.ts），代码里有详细的注释，我就不多加阐述了。

import { intervalScaleNiceTicks } from 'echarts/lib/scale/helper.js';

interface optionType {
    size: number,
    family: string
}
const family = 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif';
const fontSize = 14;
/**
 * 三位一个逗号
 * @param data
 * @param decimalPlaces
 * @returns {string}
 */
// 定义一个函数，用于格式化数字
const formatNumber = (data: any, decimalPlaces: number) => {
    // 如果数字为0，则直接返回0
    if (data == 0) {
        return 0;
    } else {
        // 将数字转换为字符串，并保留指定的小数位数，然后以小数点分割成整数部分和小数部分
        const [integerPart, decimalPart] = Number(data)
            .toFixed(decimalPlaces)
            .split('.');
        // 将整数部分每三位添加一个逗号
        const formattedIntegerPart = integerPart.replace(
            /\B(?=(\d{3})+(?!\d))/g,
            ','
        );
        // 如果有小数部分，则添加小数点和小数部分，否则只返回整数部分
        const formattedDecimalPart = decimalPart ? '.' + decimalPart : '';
        // 返回格式化后的数字
        return formattedIntegerPart + formattedDecimalPart;
    }
}
/**
 * 获取chart 中文本的宽度
 * @param text 文本
 * @param {*} options 文字样式
 * @returns {number}
 * */
// 定义一个函数，用于获取字符串的实际宽度
const getActualWidthOfChars = (text: string, options: optionType = { size: fontSize, family: family }) => {
    // 从options中获取字体大小和字体类型，如果没有传入，则使用默认值
    const { size = 14, family = 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif' } = options;
    // 创建一个canvas元素
    let canvas: HTMLCanvasElement = document.createElement('canvas');
    // 获取canvas的上下文
    const ctx = canvas.getContext('2d');
    // 如果上下文存在
    if (ctx) {
        // 设置字体大小和字体类型
        ctx.font = `${size}px ${family}`;
        // 获取字符串的度量信息
        const metrics = ctx.measureText(text);
        // 计算字符串的实际宽度
        const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
        // canvas = null;
        // 返回字符串的最大宽度
        return Math.max(metrics.width, actual)
    }
}
/**
 * 获取chart 图表 y轴数字 最长文本宽度
 * @param {*} extend 数据的范围
 * @param {*} option 文字样式
 * @returns {number}
 */
// 定义一个函数，用于获取最大宽度
const getMaxWidth = (extend: any, option: optionType = { size: fontSize, family: family }) => {
    // 定义一个变量，用于存储最大宽度
    let LMaxWidth = 0;
    // 调用intervalScaleNiceTicks函数，获取刻度范围和间隔
    const lTick = intervalScaleNiceTicks(extend, 5);
    // 如果刻度范围的最小值小于0，则将最小值减去间隔
    const min = lTick.niceTickExtent[0] < 0 ? lTick.niceTickExtent[0] - lTick.interval : lTick.niceTickExtent[0];
    // 将刻度范围的最大值加上间隔
    const max = lTick.niceTickExtent[1] + lTick.interval;
    // 定义一个变量，用于存储最大长度值
    let MaxLengthValue = 0
    // 遍历刻度范围，获取每个刻度的长度，并更新最大长度值
    for (let i = min; i <= max; i += lTick.interval) {
        const len = i.toString().length
        MaxLengthValue = len < MaxLengthValue.toString().length ? MaxLengthValue : i
    }
    // 调用getActualWidthOfChars函数，获取最大长度值的实际宽度
    LMaxWidth = getActualWidthOfChars(formatNumber(MaxLengthValue, 1).toString(), option) || 0;
    // 返回最大宽度
    return LMaxWidth;
}
/**
 * 防抖
 * @param fn 回调函数
 * @param delay 延迟时间
 */
const debounce = (fn: Function, delay: number) => {
    let timer: ReturnType<typeof setTimeout> | null = null;
    return function (...args: any[]) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(args);
        }, delay);
    };
};
export { getMaxWidth, getActualWidthOfChars, debounce }

2.2 其次我们要去改变grid的配置的话，就要在我们绘制图表之前拿到option，并对option里的grid做出相应的处理。（使用该方法最好将option.xAxis配置里的boundaryGap设置为false，并且统一函数与echarts的fontFamily）

// 绘制图表
const drawChart = () => {
    // 如果props.option或instance.value不存在，则直接返回
    if (!props.option || !instance.value) return
    // 是否开启自定义适应规则  目前只针对了type: bar、line 的图表 如果涉及到多y轴的情况请参考
    if (props.containLabel) {
        const { xAxis, grid, series }: any = props.option
        let maxXAxisItem: (string | number)[] = []
        if (Array.isArray(xAxis) && xAxis.length > 0 && xAxis) {
            let xAxisArr: (number | string)[] = []
            xAxis.forEach((el) => xAxisArr = [...xAxisArr, ...el.data])
            maxXAxisItem = [xAxisArr[0], xAxisArr[xAxisArr.length - 1]]
        } else if (xAxis) {
            maxXAxisItem = [xAxis!.data[0], xAxis!.data[xAxis!.data.length - 1]]
        }
        let leftXAxisWidth = getActualWidthOfChars(maxXAxisItem[0].toString()) || 0
        let rightXAxisWidth = getActualWidthOfChars(maxXAxisItem[1].toString()) || 0
        let maxYAxisArr: number[] = []
        if (Array.isArray(series) && series.length > 0 && series) {
            series.forEach((el: any) => maxYAxisArr = [...maxYAxisArr, ...el.data])
        } else if (series) {
            maxYAxisArr = series.data
        }
        let leftYAxisWidth = getMaxWidth([Math.min(...maxYAxisArr), Math.max(...maxYAxisArr)])
        // 处理过后的option
        const newOption = {
            ...props.option,
            textStyle: {
                fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
            },
            grid: {
                ...grid,
                containLabel: false,
                left: leftYAxisWidth > leftXAxisWidth / 2 ? leftYAxisWidth : leftXAxisWidth / 2,
                right: rightXAxisWidth / 2
            }
        }
        instance.value.setOption(newOption, {
            notMerge: true,
        })
    } else {
        instance.value.setOption(props.option, {
            notMerge: true,
        })
    }
}

效果如下：