echarts树形图节点及提示框文字过长问题

问题:echarts的树形图中节点及提示框文字过长
解决
1)提示框文字过长:约束tooltip->extraCssText宽度,设置tooltip->formatter文字放在div中
2)节点文字过长:约束series->label->width属性宽度,设置series->label->overflow属性为‘break’
html代码

<div id="main" style="height: 600px; width: 100%; overflow: hidden"></div>

js代码

var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
      tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          extraCssText: 'max-width:200px; white-space:pre-wrap',//(1)看我看我!!!
          formatter: function(params) {
              return `<div>${params.data.name}</div>`//(1)看我看我!!!
          }
      },
      series: [
          {
              type: 'tree',
              data: [{name:'字真的好多啊,救命啊救命啊救命啊救命啊救命啊救命啊救命啊救命啊救命啊救命啊',
                  children:[
                      {name: '老天是公平的,生命予每个人只有一次,生为死之始,死为生之终,概莫如是。可惜世人看透的不多,才有贪官小人的登场,才有为名为利倾轧的上演。',
                          children:[{name:'等到真正领悟时,潜意识里的世外桃源早已在尘世的醉生梦死中迷失,珍藏在心底那田园诗般风光早被世间的忙碌洗涤得荡然无存。'}]},
                      {name: '生命就像大自然有春夏秋冬一样从容,一样简单,一样自然。每一个季节都有自己独有的美丽',
                          children:[{name:'春的绿叶与生机,夏的清莲与淡雅,秋的枫菊与成熟,冬的白雪与深沉,就如同每个人的人生一样多姿多彩。'}]
                      }
                  ]}],
              top: '1%',
              left: '15%',
              bottom: '1%',
              right: '20%',
              nodeClick: false,
              symbolSize: 7,
              roam: true, //缩放,平移开启
              label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 12,
                  width: 180,//指定宽度,(2)看我看我!!!
                  // height: 100,
                  lineHeight: 20,
                  padding: [4, 4, 4, 4],
                  overflow: 'break' //文字过多换行,/(2)看我看我!!!
              },
              leaves: {
                  label: {
                      position: 'right',
                      verticalAlign: 'middle',
                      align: 'left',
                  }
              },
              emphasis: {
                  focus: 'descendant'
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
          }
      ]
  }

  option && myChart.setOption(option);

效果图
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值