Echarts图表 y轴axisLabel过长的一种处理方式

技术 JS/TS
1

highlight: agate

前言

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

y轴文字过长

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

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

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

image.png

此时，就可以通过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 &gt; 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]

}

})

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

这是一个从 https://juejin.cn/post/7368294440547663910 下的原始话题分离的讨论话题