前言

只是提供一个解决思路:找出最长的axislabel 通过canvas Api来获取文字在图表中的宽高，达到图表的自适应

y轴文字过长

在我们使用echarts的图表时，如果y轴数据是动态的，有时候会遇到y轴的数据过大，导致超出图表容器范围的情况出现，一般情况下，我们可以通过在配置中设置grid.containLabel为true来解决

 myChart.setOption({
   grid: {
      containLabel: true,
    }
 });

但是，即使配置了containLabel: true,有时候仍然会有超出范围的情况；同时，当我们需要y轴的文本左对齐时，就会出现如下情况:

此时，就可以通过canvas的measureText来获取最长的文本maxLengthLabel的宽度maxWidth，将文本左移maxWidth:

function getTextWidthInChart(text, options = {}) {
  const { fontSize = 14, fontFamily = 'sans-serif' } = options;
  let canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px ${fontFamily}`;
  const metrics = ctx.measureText(text);
  const actual =
    Math.abs(metrics.actualBoundingBoxLeft) +
    Math.abs(metrics.actualBoundingBoxRight);
  canvas = null;
  return Math.max(metrics.width, actual);
}

const maxLengthLabel = '120,000'
const fontSize = 14
const fontFamily = ''

consst maxWidth = getTextWidthInChart(maxLengthLabel,{
    fontSize,fontFamily
})

chartInstance.setOption({
    grid: {
        containLabel: true,
    },
    yAxis:{
        type:'value',
        align: "left",
        padding:[0,0,0,-maxWidth]
    }
})

计算y轴的最大最小刻度

如果y轴的数据是数字，并且没有给yAxis设置max，那么y轴的刻度就是echarts内部计算出来的，根据这个思路，在echarts源码echarts/lib/scale/helper.js中找到了intervalScaleNiceTicks这个方法，使用方法如下

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

const chartData = []

function getMaxWidth(extend, option) {
  let LMaxWidth = 0;
  if (!(extend[0] === 0 && extend[1] === 0)) {
    //坐标轴的分割段数默认为5，可以设置为自己想要的值
    const lTick = intervalScaleNiceTicks(extend, 5);
    const min =
      lTick.niceTickExtent[0] < 0
        ? lTick.niceTickExtent[0] - lTick.interval
        : lTick.niceTickExtent[0];
    const max = lTick.niceTickExtent[1] + lTick.interval;
    
    //echart 默认有千分位
    LMaxWidth = getActualWidthOfChars(
      lMax.toString().length > lMin.toString().length ? lMax : lMin,
      option
    );
  }

  return LMaxWidth;
}

const fontSize = 14
const fontFamily = ''
//获取到数据的最大最小值，这里就不实现了
const [min,max] = getMimMax(chartData)

const maxWidth = getMaxWidth([min,max],{
    fontSize,fontFamily
})

chartInstance.setOption({
    grid: {
        left: 0,
        right: 0,
        containLabel: true,
    },
    yAxis:{
        type:'value',
        align: "left",
        padding:[0,0,0,-maxWidth]
    }
})

以上就是大概的思路，用于记录，欢迎讨论