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

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

>'啊覅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%' }}><ReactEchartsstyle={{ height: '100%' }}option={this.getSecChartOption()}notMerge={true}theme="theme"/></div></div>);}
}

效果

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

javaScript 对于字符串字符长度的控制
写页面时,会有需求用户名称不要超过一行,或者描述文字不超过两行的要求,但是如果简单的使用单纯使用username.slice(0,10)进行文字的控制的时候,发现效果不是很理想,因为中文和英文的字符 ...
iOS之旅--获取字符长度
有的时候产品需求是有点奇葩,比如:我们的字数限制是按字符算的,服务端通过unicode判断字符长度,但是我们有没有unicode长度的方法呢,找了一下还真有,码代码: + (NSInteger)Val ...
linux 查看(统计)文件字数、行数；查看文件具体内容
常规命令wc wc -c或–bytes或–chars 只显示Bytes数. wc -l或–lines 显示行数. wc -w或–words 只显示字数. wc -help 在线帮助. wc --ver ...
linux-wc命令(用于计算字数、行数等)
Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准输入设备读取数据. 语 ...
实际返回的行数超出请求的行数怎么解决_count(*)这么慢，我该怎么办？
在开发系统的时候,你可能经常需要计算一个表的行数,比如一个交易系统的所有变更记录总数.这时候你可能会想,一条select count(*) from t 语句不就解决了吗? 但是,你会发现随着系统中记 ...
实际返回的行数超出请求的行数_代码行数越少越好？
代码行数越少越好?读懂别人的代码很困难?如何编写出"完美"的代码?每天要坚持8小时编程?......拜托,这些编程误区程序员应该尽早知道! 以下为译文: 作为开发人员,你会听到许多 ...
python显示行数_jupyter notebook实现显示行号
Jupyter Notebook默认不显示行号,可是当我们代码报错时,发现会显示自己多少行出现错误. eg: 这时候我们总不能一行行去数吧,因此,为了方便我们调试排错.我们需要让jupyter not ...
CSS单行文字和多行文字超出部分省略号显示
单行 .text{width: 400rpx;overflow: hidden; /*隐藏*/white-space: nowrap; /*不换行*/text-overflow: ellipsis; ...
TextView设置最大行数、或者最多显示6个字、结束时为省略号
android:maxLines 设置文本的最大显示行数,与width或者layout_width结合使用,超出部分自动换行,超出行数将不显示. android:maxEms="6" ...

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

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

后续

效果

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

效果

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

最新文章

热门文章

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

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

后续

效果

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

效果

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

最新文章

热门文章

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