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

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

>'啊覅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>
    );
  }
}
效果

图表中展示

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
统计单词个数可以这样实现: ```java import java.util.Scanner; import java.io.*; public class WordCount { public static void main(String[] args) throws IOException { File file = new File("test.txt"); Scanner scanner = new Scanner(file); int count = 0; while (scanner.hasNext()) { count++; scanner.next(); } System.out.println("单词数:" + count); scanner.close(); } } ``` 这个程序首先打开一个名为 `test.txt` 的文件,然后用 `Scanner` 对象扫描文件中的每个单词,计算单词数。 统计文件中的字符数、单词数和行数可以这样实现: ```java import java.util.Scanner; import java.io.*; public class FileCount { public static void main(String[] args) throws IOException { File file = new File("test.txt"); Scanner scanner = new Scanner(file); int charCount = 0; int wordCount = 0; int lineCount = 0; while (scanner.hasNextLine()) { String line = scanner.nextLine(); lineCount++; charCount += line.length(); wordCount += line.split("\\s+").length; } System.out.println("字符数:" + charCount); System.out.println("单词数:" + wordCount); System.out.println("行数:" + lineCount); scanner.close(); } } ``` 这个程序首先打开一个名为 `test.txt` 的文件,然后用 `Scanner` 对象扫描文件中的每一行,计算字符数、单词数和行数。其中,字符数等于每一行的字符数之和,单词数等于每一行的单词数之和,行数等于文件中的行数。 需要注意的是,在计算单词数时,不能简单地使用空格分隔符,因为单词之间可能存在其他分隔符,如逗号、句号等。因此,可以使用正则表达式 `\\s+` 来匹配所有的空白符,包括空格、制表符、换行符等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值