获取字符长度并控制字数和行数（超出显示..., 悬浮显示所有内容）

获取字符长度并控制字数和行数（超出显示…, 悬浮显示所有内容）

>'啊覅u发哦啊哦士大夫耨爱你的身份'.length
> 16

> '啊覅u发哦啊哦士大夫耨爱你的身份'.slice(4)
> "哦啊哦士大夫耨爱你的身份"

> "哦啊哦士大夫耨爱你的身份".slice(4)
> "大夫耨爱你的身份"

以此类推，思想是这个思想，可以自己封装方法...

后续

  getEachCodeLine = (word, wordNum, LineTimes, count = 0) => {  
    // word:总文字; wordNum: 每行字数; LineTimes:行数; count:初始0;
    // console.log("计次", count);
    if (word.length > wordNum && count < LineTimes) {
      return <><div>{count == LineTimes - 1 ? word.slice(0, wordNum - 1) + '...' : word.slice(0, wordNum)}</div>{this.getEachCodeLine(word.slice(wordNum), wordNum, LineTimes, count + 1)}</>
    }
  }

let companyName = '商贷首付八二发涩发商贷首付八二发涩发商贷首付八二发涩发商贷首付八二发涩发商贷首付八二发涩发商贷首付八二发涩发商贷首付八二发涩发'
 {<div title={companyName}>{this.getEachCodeLine(companyName, 5, 3)}</div>}

效果

优化换行问题：tooltip用’
’ 饼图指标文字用’\n’

import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import { INIT_DATA } from '../initData';
import { Row, Col, Typography } from 'antd';
import styles from './index.less';
const { Text } = Typography;

export default class SecChart extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // getEachCodeLine = (word, wordNum, LineTimes, count = 0) => {
  //   // word:总文字; wordNum: 每行字数; LineTimes:行数; count:初始0;
  //   // console.log("计次", count);
  //   if (word.length > wordNum && count < LineTimes) {
  //     return <><div>{count == LineTimes - 1 ? word.slice(0, wordNum - 1) + '...' : word.slice(0, wordNum)}</div>{this.getEachCodeLine(word.slice(wordNum), wordNum, LineTimes, count + 1)}</>
  //   }
  // }
  getEachCodeLine = (word, wordNum, LineTimes, isTooltip = 0, count = 0) => {
    // word:总文字; wordNum: 每行字数; LineTimes:行数; count:初始0;
    if (count < LineTimes) {
      if (word.length > wordNum) {
        return (count == LineTimes - 1 ? word.slice(0, wordNum - 1) + '...' : word.slice(0, wordNum)) + (isTooltip ? '<br/>' : '\n') + this.getEachCodeLine(word.slice(wordNum), wordNum, LineTimes, isTooltip, count + 1)
      } else {
        return word;
      }
    } else {
      return '';
    }
  }

  getSecChartOption = () => {
    let _this = this;
    const { dataSource } = this.props;
    // console.log('第一个饼图', dataSource);
    let option = {
      color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47', '#255e91', '#9e480e', '#626263', '#987408', '#264478'],
      grid: {
        //设置图表内边距
        top: '12px',
        // left: '12px',
        // right: '16px',
        // bottom: '-30px',
        // containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          // console.log("【值】", params);
          // return [params.name] + '<br/>项目数量 : ' + [params.data.value] + '<br/>资金(万元) : ' + [params.data.replaceMoney]
          return _this.getEachCodeLine(params.name, 5, 9, 1);
        }
      },
      series: [
        {
          // name: title,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 10
              },
              formatter: (params) => {
                //调用自定义显示格式
                if (Number(params.name.split(',')[1].split('%')[0]) / 100 > 0.15) {
                  return this.getEachCodeLine(params.name.split(',')[0], 5, 3, 0) + params.name.split(',')[1];
                } else {
                  return params.name.split(',')[1];
                }
              },
            },
            emphasis: {
              show: true
            }
          },
          type: 'pie',
          // radius: ['45%', '65%'],
          center: ['47%', '50%'],
          data: [
            { value: 16, name: `打发打发发达士大夫撒旦发啊打发撒旦打发士大夫阿斯蒂芬撒1地方发阿斯蒂芬发,16%` },
            { value: 20, name: '是x的,20%' },
            { value: 23, name: '的首发式发生,23%' },
            { value: 34, name: '的分公司分公司,34%' },
            { value: 3, name: '随风倒敢死队风格士大夫归属感,3%' },
            { value: 15, name: '是法国还是公司的,16%' },
            { value: 27, name: '撒旦发个顺丰大概士大夫敢死队风格,27%' },
            // { value: dataSource.abnormalRatio, name: `${INIT_DATA.abnormalPie[0]}:${dataSource.abnormalRatio}%` },
            // { value: 100 - Number(dataSource.abnormalRatio), name: `${INIT_DATA.abnormalPie[1]}:${100 - Number(dataSource.abnormalRatio)}%`,},
          ],
        },
      ],
    };

    return option;
  };
  render() {
    const { dataSource } = this.props;
    return (
      <div className={styles.contentLayout}>
        <div style={{ width: '100%', height: '100%' }}>
          <ReactEcharts
            style={{ height: '100%' }}
            option={this.getSecChartOption()}
            notMerge={true}
            theme="theme"
          />
        </div>
      </div>
    );
  }
}

效果