echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...

前言

之前在一篇文章《深入 echarts 如何设置渐变色？echarts 如何设置圆角？echarts 如何设置自定义 Label?》已经初步介绍了如何通过 formatter　结合 rich 来处理 label 自定义文字样式，但我们会经常遇到一些情况，就是 echarts 的 x 轴文字太长显示不全或者 label 文字过长被隐藏的情况。如何要实现 label / Label / axisLabel 里面的内容设置换行及同时单独设计样式呢？之前并没有涉及到。在这里，我们结合最基础的 canvas 实现换行的例子来深入了解，echarts 实现换行及同时单独设计样式的原理。

在 canvas 里面是如何设置换行呢？

我们先看看我在项目中经常用到的已经封装好的在 canvas 如何实现文字换行的方法

/**

* canvas 换行画出多行文字

* @param {CanvasRenderingContext2D} ctx

* @param {String} text

* @param {Number} x

* @param {Number} y

* @param {Number} w，即一行的宽度 width

* @param {String} color，即字体的颜色

* @param {Number} fontSize

* @param {Boolean} isBold，即是否加粗

*/

export function drawMultiLineRichText (ctx, text, x, y, w, color, fontSize, isBold) {

if (!text)