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);

效果图：

这篇好文章是转载于：学新通技术网