echart title标题显示不下时自动换行，图表做自适应

蜂巢糖FCT

已于 2023-07-25 19:45:50 修改

阅读量649

点赞数

文章标签：前端 javascript echarts

于 2023-06-29 11:00:36 首次发布

本文链接：https://blog.csdn.net/qq_36093530/article/details/131451686

版权

关键点在于获取标题文本的宽度和图表dom的宽度做比较，超出时换行

1.如何获取文本宽度？

let canvas2 = document.createElement("canvas");
let context = canvas2.getContext("2d");
const font = option.title[0].textStyle.fontSize+"px arial";
context.font = font;
let title = this.echart_title;
let { width } = context.measureText(title);

通过动态创建canvas和context.measureText获取到文本实际宽度

2.与dom宽度比较

<div class="echart" ref="echart_2" id="echart_2">
 </div>

监听窗口宽度变化，调用函数时使图表自适应

window.addEventListener

window.addEventListener('resize',function(){
  _this.$nextTick(()=>{
        _this.echart_2 && _this.getGenrac(_this.echart_2,'echart_2');
   })
})

getGenrac()

//dom为图表对象,id为图表div上的id
getGenrac(dom,id){
          let echart = document.getElementById(id);
          console.log('resize',echart.clientWidth);
        
          let option = dom.getOption();
          console.log('option',option);
          let canvas2 = document.createElement("canvas");
          let context = canvas2.getContext("2d");
          const font = option.title[0].textStyle.fontSize+"px arial";
          context.font = font;
          let title = this.echart_title;
          let { width } = context.measureText(title);
          if(width> echart.clientWidth){
            let i = title.length-1;
            while(context.measureText(title.substring(0,i)).width>echart.clientWidth){
              i--;
            }
          option.title[0].text = title.substring(0,i)+'\n'+title.substring(i,title.length);
            ption.grid[0].top = 36+option.title[0].textStyle.fontSize;
         }else{
            option.title[0].text = title;
            option.grid[0].top = 36
         }     
           dom.setOption(option,true);
           dom.resize();       
  },

实际效果：